1. CSS 속성 값
ㅇ 수치 (단위 값) 지정 방식 ☞ CSS 폰트(font-size: 글꼴 크기) 참조
- 상대 값 (부모 요소와의 비교)
. em : 부모 요소 크기와의 상대 배수 값
.. 기본값 : 1em (= 16px)
.. em은, W3C에서 권고하는 방식임
. rem : 부모 요소가 아닌 최상위 루트 요소 크기와의 상대 배수 값
. % : 부모 요소 크기와의 백분율 (기본 100%)
. ex : 부모 요소 폰트의 소문자 크기와의 상대 값
- 상대 값 (화면해상도에 따른 비교)
. px : 픽셀 (한편, 폰트 크기는 기본 16px 임)
.. 픽셀이란, 미리 물리적으로 정해진 크기가 아니고,
.. 모니터 화면해상도에 따라 달라지는 상대적인 크기임
- 상대 값 (뷰포트에 따른 비교)
. vw,vh : 뷰포트 너비(vw),높이(vh) 값의 100분의 1 단위 (%)
. vmin, vmax : 뷰포트 너비 최소,최대 크기를 정함. 그 크기 이상 커지거나/작아지지 않음.
- 절대 값
. pt : 포인트 (1 pt = 1/72 inch = 0.3528 mm, 아래 inch,cm 보다 더 세밀하여 많이 쓰임)
. in : 인치 (1 in = 2.54 cm)
. cm : 센티미터 (1 cm = 10 mm)
ㅇ 키워드 지정 방식 : 굉장히 많음
- color : acua (바다물색), black (검정), blue (파랑), fuchsia, gray, ...
- font-size : xx-small, x-small, small, medium, large, x-large, xx-large, ...
- position : static, relative, absolute, fixed
- border-style : dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden
2. CSS 속성 값이 여럿일 경우의 단축형 표현
ㅇ font 단축형
- { font : font-style font-variant font-weight font-size/line-height font-family; }
ㅇ margin,padding 단축형
- 4개 값 => { margin : top right bottom left }
- 3개 값 => { margin : top right&left bottom }
- 2개 값 => { margin : top&bottom right&left }
- 1개 값 => { margin : top&bottom&right&left }
ㅇ border 단축형
- { border-width border-style(required) border-color }