절대 단위
: 절대적으로 지정하여 항상 동일한 크기를 유지할 수 있다.
- px 등
상대 단위
: 다른 것들에 비례하여 조정되도록 할 수 있다.
- 상위 요소의 글꼴 크기나 viewport 크기에 비례하게 지정할 수 있다.
- em, rem, %,vw, cvw 등
| em (엠) | 부모로부터 상속된 크기에 비례 (상속 글자 크기의 n배) (ex. 1.3em = 부모 글꼴 크기의 1.3배) |
| rem (렘) | 루트(<html> 요소)의 크기를 기준으로 글자 크기 비례 |
| % (퍼센트) | 부모 요소의 크기에 백분율로 계산 |
| ex | 요소 글꼴의 x-height |
| lh | 요소의 라인 높이 (line-height) |
| rlh | 루트 요소의 라인 높이 (line-height) 루트 요소의 font-size 또는 line-height 속성에 사용될 때 속성의 초깃값을 참조 |
| vw | 뷰포트(현재 화면)를 기준으로 계산한 너비 뷰포트의 초기 컨테이닝 블록 너비 1%와 같다. (ex. 10vw = viewport 너비의 10%) |
| vh | 뷰포트를 기준으로 계산한 높이 |
| vmin | viewport의 작은 치수의 1% |
| vmax | viewport의 큰 치수의 1% |
| vb | 초기 컨테이닝 블록의 블록 축 크기 1%와 같다. |
| vi | 초기 컨테이닝 블록의 인라인 축 크기 1%와 같다. |
| svw, svh | 작은 뷰포트 각각의 너비 및 높이 1% |
| lvw, lvh | 큰 뷰포트 각각의 너비 및 높이 1% |
| dvw, dvh | 동적인 뷰포트 각각의 너비 및 높이 1% |
* 기본값을 지정하면 사용자가 글자 크기 설정할 수 있음
html {
font-size: 10px
}
* line-height 속성값 지정 시 넘버 단위(= 단위 생략) 사용
line-height: 1;
참고
CSS 값과 단위 - Web 개발 학습하기 | MDN
CSS에 사용된 모든 속성에는 해당 속성에 허용되는 값이 있으며, MDN의 속성 페이지를 보면 특성 속성에 유효한 값을 이해하는 데 도움이 됩니다. 이 레슨에서는 가장 일반적인 값과 사용 단위를
developer.mozilla.org
김원준 - 웹폰트(Web Font) 파헤치기 [WSConf.Seoul.2017. Vol.2]
김원준 - 웹폰트(Web Font) 파헤치기 [WSConf.Seoul.2017. Vol.2] - Download as a PDF or view online for free
www.slideshare.net