코딩야학 3일차

오늘의 공부목차

1. CSS 문서 사용하기
2. 선택자 기본편
3. 박스모델이란
4. 테두리 스타일
5. 여백 다루기
6. 배경 다루기
7. 색지정
8. 텍스트 꾸미기
9. 과제 - 프로필 CSS 적용하기

1. CSS 문서 사용하기

• 인라인 스타일은 우선적으로 적용된다.
• 인라인 스타일이 아닌 경우, 나중에 쓰여진 선언문이 적용된다.

2. 선택자 기본편

• 전체선택자: 문서 내 모든 요소를 선택 - *
• 태그선택자: 특정 태그로 만들어진 모든 요소를 선택 - 태그명
• 클래스선택자: 특정 클래스 값이 지정된 모든 요소를 선택 - .클래스값
• 아이디선택자: 특정 아이디 값이 지정된 요소를 선택 - #아이디값
• 그룹선택자: 여러 유형의 선택자를 한꺼번에 선택 - 선택자, 선택자, 선택자 ...

선택자 우선순위: 쓰여진 순서랑 관계없이 적용되는 순위
1) 아이디선택자
2) 클래스선택자
3) 태그선택자

3. 박스모델이란

• % : 내가 속한 영역을 기준으로 백분율 계산 (상대적인 값)
  => 내가 속한 영역에 관련 값이 있어야 적용 가능!
  (width는 화면의 가로사이즈라는 기본값이 있지만,
  height 높이가 정해져있지않아 기본값이 없기에 %가 먹히지 않는다.)
  
  
• 콘텐츠영역: 요소 내에 포함된 콘텐츠를 표시하는 영역 - width, height
• 안쪽 여백: 테두리 안에서 콘텐츠 주변을 감싸는 여백 - padding
• 경계선(테두리): 콘텐츠와 안쪽 여백을 둘러싸는 테두리 - border
• 바깥쪽 여백: 테두리 바깥에서 요소를 감싸는 여백 - margin

개발자 도구 이용하면 박스모델도 확인할 수 있다.(computed)

4. 테두리 스타일

• border-width : 테두리의 두께를 지정
• border-style : 점선, 실선, 겹선 등으로 테두리 모양을 지정
• border-color : 테두리의 색삭을 지정
• border : 테두리의 두께, 모양, 색상 등을 한 번에 지정
• border-radius : 모서리 둥글게 만들 수 있다.

5. 여백 다루기

• 여백의 모든 면에 동일한 값을 지정 > margin:10px
• 위아래 여백과 왼쪽 오른쪽 여백의 값을 따로 지정 > margin:10px 20px
• 윗쪽 여백, 왼쪽 오른쪽 여백, 아래쪽 여백 순서로 값을 지정 > margin:10px 20px 15px
• 윗쪽, 오른쪽, 아래쪽, 왼쪽 순서대로 각각을 따로 지정 > margin:10px 20px 30px 40px

  (padding도 똑같이 적용)

6. 배경 다루기

• color
• clip(칼라배경 범위)
• image
• origin(이미지 배경 시작위치)
• size
• position(이미지 배경 패딩터럼 사용하여 위치 이동)
• repeat

7. 색 지정

• rgb : 빛의 3원색인 red, green, blue의 줄임말.
  • CSS는 빨강, 초록, 파랑 각 색상의 비율을 지정해 색상을 결정할 수 있는 rgb 함수와
    투명도를 추가 지정할 수 있는 rgba 함수를 각각 지원한다.
  • rgb(값1, 값2, 값3)
  • rgba(값1, 값2, 값3, 값4)

• hsl : 색조, 채도, 조도를 각각 지정해 색상을 결정하는 함수.
  투명도를 추가로 지정하고자 할 때는 hsla
  • hsl(값1, 값2, 값3)
  • hsla(값1, 값2, 값3, 값4)

• 16진수 값
  : 색상을 지정할 때는 해시(#) 기호로 시작하는 여섯 자리 16진수 값을 입력하는 방법
  : RGB 색상코드
  ex) #RRGGBB
  #RRGGBBAA(투명도까지 더한 버전)

8. 텍스트 꾸미기

rem : 루트 요소의 글자 크기를 배수로 계산해 적용하는 상대단위
em : 부모 요소의 글자 크기를 배수로 계산해 적용하는 상대단위

line-height : 텍스트간의 줄 간격

단위 공부하기 좋은 블로그링크(https://blog.jeongtae.com/rem-%EA%B3%A0%EC%B0%B0)

웹폰트 - 구글폰트(https://fonts.google.com/?subset=korean¬o.script=Kore)

9. 과제 - 프로필 CSS 적용하기