CSS CSS 단위
절대길이 단위
| 단위 | 이름 | 다음과 동일함 |
|---|---|---|
| cm | 센티미터 | 1cm = 96px/2.54 |
| mm | 밀리미터 | 1mm = 1/10th of 1cm |
| Q | 4분의 1 밀리미터 | 1Q = 1/40th of 1cm |
| in | 인치 | 1in = 2.54cm = 96px |
| pc | Picas | 1pc = 1/16th of 1in |
| pt | 포인트 | 1pt = 1/72th of 1in |
| px | 픽셀 | 1px = 1/96th of 1in |
이러한 값의 대부분은 화면 출력이 아닌 인쇄에 사용될 때 더 유용합니다. 일반적으로 화면에 사용하는 값은 px입니다.
상대 길이 단위
| 단위 | 관련 사항 |
|---|---|
| em | 요소의 글꼴 크기 |
| ex | 요소 글꼴의 x-heigth |
| ch | 요소 글꼴의 glyph"0"의 사전 길이(너비) |
| rem | 루트 요소의 글꼴 크기 |
| lh | 요소의 라인 높이 |
| vw | viewport너비의 1% |
| vh | viewport 높이의 1& |
| vmin | viewport의 작은 치수의 1% |
| vmax | viewport의 큰 치수의 1% |
상대 길이 단위는 다른 요소(상위 요소의 글꼴 크기 또는 viewport크기)와 관련이 있습니다. 상대 단위를 사용하면 텍스트나 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정되도록 신중하게 계획할 수 있습니다.
* 예제 *
브라우저로 실행해야 확인할 수 있습니다.
I am 200px wide
I am 10vw wide
I am 10em wide
- 첫 번째 박스에는 px단위로 설정되어 있습니다. 절대 단위로서 이 너비는 다른 사항에 관계없이 동일하게 유지됩니다.
- 두 번째 박스의 너비는 vw(viewport)단위로 설정되어 있습니다. 이 값은 브라우저 창의 너비를 변경하면 박스의 크기가 변경됩니다.
- 세 번째 박스는 em단위를 사용합니다. 글꼴 크기에 상대적 입니다.