CSS 단위 레퍼런스
CSS 길이 단위는 두 부류입니다: 물리적 크기에 고정된 절대 단위와, 글꼴·부모·뷰포트에 따라 스케일되는 상대 단위. 반응형 디자인에서는 주로 상대 단위를 씁니다 — 특히 rem, %, 뷰포트 단위.
업데이트 2026-07-06
절대 단위
| 단위 | 의미 |
|---|---|
| px | 픽셀 — 화면의 기본 단위. 1px은 하나의 기기 독립 픽셀. |
| pt | 포인트 — 1/72인치. 인쇄 스타일시트에서 흔함. |
| in | 인치 — 1in = 96px = 2.54cm. |
| cm | 센티미터 — 주로 인쇄용. |
| mm | 밀리미터 — 주로 인쇄용. |
| pc | 파이카 — 1pc = 12pt = 1/6인치. 드묾. |
상대 단위
| 단위 | 의미 |
|---|---|
| % | 부모 요소의 해당 값에 대한 백분율. |
| em | 요소 자신의 글꼴 크기에 상대적. 1.5em = 글꼴 크기의 1.5배. |
| rem | 루트(html) 글꼴 크기에 상대적. 일관된 스케일링에 예측 가능. |
| ex | 현재 글꼴의 x-높이(거의 안 씀). |
| ch | 현재 글꼴에서 '0' 문자의 너비. |
| vw | 뷰포트 너비의 1%. |
| vh | 뷰포트 높이의 1%. |
| vmin | 뷰포트의 더 작은 치수(너비 또는 높이)의 1%. |
| vmax | 뷰포트의 더 큰 치수의 1%. |
| fr | CSS 그리드 컨테이너의 여유 공간의 한 조각. |
em vs. rem: 핵심 차이
둘 다 글꼴 크기에 따라 스케일되지만, em은 현재 요소의 글꼴 크기에 상대적이라 중첩 요소를 거치며 누적되고, rem은 항상 루트 글꼴 크기에 상대적이라 아무리 깊이 중첩돼도 예측 가능합니다. 헷갈리면 크기와 간격에는 rem이 가장 놀랄 일이 적습니다.
관련 도구