CSS 크기 단위(px rem em vh)
UI 타이포 스케일은 rem을 우선하고, 헤어라인 보더 등 꼭 필요할 때만 px를 쓰세요.
| 단위 | 기준 | 주요 용도 |
|---|---|---|
| px | 기기 픽셀 (CSS 픽셀) | 보더, 정밀한 아이콘 |
| rem | 루트 요소 글꼴 크기 | 타입 스케일, 간격 |
| em | 부모 요소 글꼴 크기 | 컴포넌트 내부 크기 |
| % | 부모 속성 | 너비, 유연한 레이아웃 |
| vw | 뷰포트 너비의 1% | 풀블리드 섹션 |
| vh | 뷰포트 높이의 1% | 히어로 높이(모바일 UI 주의) |
| vmin / vmax | 뷰포트 짧은/긴 변 | 거의 정형인 반응형 크기 |
| ch | “0” 글리프 너비 | 코드 블록, 고정폭 필드 |
| ex | 글꼴의 x-높이 | 드문 세밀 타이포그래피 |
| svh / lvh / dvh | 작음/큼/동적 뷰포트 | 모바일 브라우저 안전 높이 |
참고
- 모바일에서 100vh는 숨겨진 브라우저 UI를 포함할 수 있습니다. 지원 환경에서는 dvh/svh를 우선하세요.
- 사용자 글꼴 크기 설정은 rem에 영향을 주며, 접근성 측면에서 보통 바람직합니다.
자주 묻는 질문
- 1rem은 몇 px인가요?
- 1rem은 루트 요소 글꼴 크기와 같으며, 기본 16px 환경에서는 16px입니다.
- em과 rem의 차이는?
- rem은 항상 루트 글꼴 크기 기준이고, em은 현재 요소가 상속받은 글꼴 크기 기준입니다.
- 모바일에서 100vh가 부정확한 이유는?
- 모바일 브라우저는 주소창을 숨기거나 표시하므로 100vh가 보이는 영역보다 클 수 있으며, 지원 시 dvh 또는 svh를 사용하세요.