5일차
어제에 이어서 CSS 속성 공부
CSS 속성
11. 글꼴
1. font-style
font-style
- 글자의 기울기
- normal 기울기 없음
- italic 이텔릭체
- oblique 기울어진 글자
2. font-weight
font-weight
- 글자의 두께(가중치)
- normal, 400 기본 두께 ✔
- bold, 700 두껍게 ✔
- bolder 상위(부모) 요소보다 더 두껍게
- lighter 상위(부모) 요소보다 더 얇기
- 100 ~ 900 100단위의 숫자 9개 , normal과 bold 이외 두께
3. font-size
font-size
- 글자의 크기
- 16px 기본 크기 ✔
- 단위 px, em, rem 등 단위로 지정 ✔
- % 부모 요소의 폰트 크기에 대한 비율
- smaller 상위(부모) 요소보다 작은 크기
- lager 상위(부모) 요소보다 큰 크기
- xx-small ~ xx-large 가장 작은 크기 ~ 가장 큰 크기까지, 7단계의 크기를 지정
4. line-height
line-height
- 한 줄의 높이, 행간과 유사
- normal 브라우저의 기본 정의를 사용
- 숫자 요소의 글꼴 크기의 배수로 지정 ✔(권장)
- 단위 px, em, rem 등의 단위로 지정 ✔
- % 요소의 글꼴 크기의 비율로 지정
5. font-family
font-family
font-family: 글꼴1, "글꼴2" , ... 글꼴 계열; (필수작성)
1번 2번 후보 지정 후보가 안되면 글꼴 계열로
띄어쓰기 등 특수문자가 포함된 글꼴 이름은 큰 따옴표로 묶기
고딕체 계열 많이 사용 "sans-serif"
12. 문자
문자와 관련된 속성
color
color
- 글자의 색상
- rgb(0,0,0,) 검정색 (기본값)
- 색상 기타 지정 가능한 색상
text-align
text-align
- 문자의 정렬 방식
- left 왼쪽 정렬
- right 오른쪽 정렬
- center 가운데 정렬
- justify 양쪽 정렬
text-decoration
text-decoration
- 문자의 장식(선)
- none 장식 없음 (기본값)
- underline 밑줄 (a태그 기본값)
- overline 윗줄
- line-through 중앙 선
text-indent
text-indent
- 문자 첫줄의 들여쓰기
- 0 들여쓰기 없음
- 단위 px, em, rem 등 단위로 지정
- % 요소의 가로 너비에 대한 비율
- 음수를 사용시 내어쓰기(outdent)
13. 배경 (background)
background-color
background-color
- 요소의 배경 색상
- transparent 투명함
- 색상 지정 가능한 색상
background-image
background-image
- 요소의 배경 이미지 삽입
- none 이미지 없음
- url("경로") 이미지 경로
background-repeat
background-repeat
- 요소의 배경 이미지 반복
- repeat 이미지를 수직, 수평 반복
- repeat-x 이미지를 수평 반복
- repeat-y 이미지를 수직 반복
- no-repeat 반복 없음
background-position
background-position
- 요소의 배경 이미지 위치
- 0% 0% 0% ~ 100% 사이 값
- 방향 top, bottom, left, right, center 방향
- 단위 px, em, rem 등 단위로 지정
background-size
background-size
- 요소의 배경 이미지 크기
- auto 이미지의 실제 크기 (기본값)
- 단위 px, em, rem 등 단위로 지정
- cover 비율을 유지, 요소의 더 넓은 너비에 맞춤
- contain 비율을 유지, 요소의 더 짧은 너비에 맞춤
150px 150px 가로 세로 x y
하나만 명시✔
background-attachment
background-attachment
- 요소의 배경 이미지 스크롤 특성
- scroll 이미지가 요소를 따라서 같이 스크롤 (기본값)
- fixed 이미지가 뷰포트에 고정, 스크롤 X
- local 요서 내 스크롤 시 이미지가 같이 스크롤
14. 배치
position
position
- 요소의 위치 지정 기준
- static 기준 없음 (기본값)
- relative 요소 자신을 기준
- absolute 위치 상 부모 요소를 기준 (위치 상 부모 요소를 꼭 확인) ✔
- fixed 뷰포트(브라우저)를 기준
- sticky 스크롤 영역 기준
- top bottom left right z-index
top bottom left right
- 요소의 각 방향별 거리 지정
- auto 브라우저가 계산
- px, em, rem 등 단위로 지정
⭐absolute 부모 상위요소가 static일경우 기준안되면 뷰포트를 부모로 기준
요소 쌓임 순서(Stack order)
- 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정
- 요소에 position 속성의 값이 있는 경우 위에 쌓임. (기본값 static 제외)
- 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임.
- 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임.
z-index
z-index
- 요소의 쌓임 정도를 지정 (position 속성 먼저 비교후)
- auto 부모 요소와 동일 한 쌓임 정도 (기본값)
- 숫자 숫자가 높을 수록 위에 쌓임