CSS 측정 단위란?
CSS는 인치(in), 센티미터(cm), 포인트(pt)와 같은 절대 단위뿐만 아니라 퍼센트(%), em과 같은 상대 단위까지 다양한 측정 단위를 지원합니다. 스타일 규칙에서 글꼴 크기, 여백, 간격 등을 지정할 때 이러한 값들이 반드시 필요합니다.
아래 표는 CSS에서 사용되는 주요 측정 단위를 단위별 설명과 예제 코드와 함께 정리한 것입니다.
| 단위 | 설명 | 예제 |
|---|---|---|
| % | 다른 값(주로 부모 요소)을 기준으로 한 백분율로 크기를 정의합니다. | p {font-size: 16pt; line-height: 125%;} |
| cm | 센티미터 단위로 크기를 정의합니다. | div {margin-bottom: 2cm;} |
| em | 글꼴 크기를 기준으로 하는 상대 단위입니다. em은 해당 글꼴 크기와 동일하므로, 글꼴이 12pt일 때 1em은 12pt, 2em은 24pt가 됩니다. | p {letter-spacing: 7em;} |
| ex | 글꼴의 x-height(소문자 'x'의 높이)를 기준으로 하는 상대 단위입니다. | p {font-size: 24pt; line-height: 3ex;} |
| in | 인치 단위로 크기를 정의합니다. | p {word-spacing: .15in;} |
| mm | 밀리미터 단위로 크기를 정의합니다. | p {word-spacing: 15mm;} |
| pc | 파이카(pica) 단위로 크기를 정의합니다. 1파이카는 12포인트와 같으며, 1인치는 6파이카입니다. | p {font-size: 20pc;} |
| pt | 포인트 단위로 크기를 정의합니다. 1포인트는 1/72인치입니다. | body {font-size: 18pt;} |
| px | 화면 픽셀 단위로 크기를 정의합니다. | p {padding: 25px;} |
| vh | 뷰포트(viewport) 높이의 1%를 나타냅니다. | h2 { font-size: 3.0vh; } |
| vw | 뷰포트 너비의 1%를 나타냅니다. | h1 { font-size: 5.9vw; } |
| vmin | 뷰포트 너비와 높이 중 작은 값의 1%를 나타냅니다. | p { font-size: 2vmin;} |
추가로 알아두면 좋은 단위: rem과 vmax
최신 CSS에서 널리 사용되는 단위도 함께 알아두면 유용합니다.
- rem: 루트 요소(html)의 글꼴 크기를 기준으로 하는 상대 단위입니다. em이 부모 요소의 글꼴 크기에 따라 달라지는 것과 달리, rem은 문서 전체에서 일관된 기준을 가지므로 반응형 디자인에서 특히 자주 활용됩니다.
- vmax: 뷰포트 너비와 높이 중 큰 값의 1%를 나타냅니다. vmin과 반대되는 개념입니다.
절대 단위와 상대 단위의 선택 기준
인쇄물처럼 물리적 크기가 중요한 경우에는 pt, cm, in 같은 절대 단위가 적합합니다. 반면 화면 크기에 따라 유연하게 조정되어야 하는 웹 환경에서는 %, em, rem, vh, vw 같은 상대 단위를 사용하는 것이 좋습니다. 특히 데스크톱과 모바일을 모두 고려하는 반응형 웹 디자인에서는 상대 단위의 활용이 사실상 필수적입니다.