CSS에서 상대 단위(relative units)는 픽셀(px)처럼 고정된 절대값이 아니라, 부모 요소·루트 요소·뷰포트(화면) 크기 같은 다른 기준값에 따라 실제 크기가 결정되는 단위입니다. 이러한 특성 덕분에 반응형 웹 디자인에서 화면 크기나 사용자 환경에 유연하게 대응할 수 있습니다.
CSS 상대 단위 목록
| 단위 | 약어 |
|---|---|
| 퍼센트 (Percent) | % |
| 엠 (Em) | em |
| 엑스 (Ex) | ex |
| 루트 엠 (Root em) | rem |
| 뷰포트 너비 (Viewport Width) | vw |
| 뷰포트 높이 (Viewport Height) | vh |
| 뷰포트 최소/최대 (Viewport Min/Max) | vmin / vmax |
| 문자 (Character) | ch |
| 그리드 (Grid) | gd |
주요 상대 단위 설명
% (퍼센트)
부모 요소의 크기를 기준으로 길이를 계산합니다. 주로 컨테이너의 너비(width)나 높이(height)를 지정할 때 사용하며, 화면 크기에 따라 요소가 자동으로 조절됩니다.
em
해당 요소 자체의 font-size를 기준으로 하는 단위입니다. 예를 들어 font-size: 16px인 요소에서 1em은 16px입니다. 중첩된 요소에서는 부모의 글꼴 크기가 누적되어 적용되므로 주의가 필요합니다.
rem
루트 요소(<html>)의 font-size를 기준으로 합니다. em과 달리 중첩에 따른 누적 효과가 없어 일관된 크기 조절이 가능하며, 최근 웹 개발에서 가장 널리 권장되는 단위 중 하나입니다.
vw / vh
뷰포트(브라우저 화면) 크기를 기준으로 하며, 1vw는 화면 너비의 1%, 1vh는 화면 높이의 1%에 해당합니다. 전체 화면을 차지하는 히어로 섹션(hero section)이나 배너를 만들 때 유용합니다.
vmin / vmax
뷰포트의 짧은 쪽 또는 긴 쪽을 기준으로 합니다. 1vmin은 너비와 높이 중 작은 값의 1%, 1vmax는 큰 값의 1%입니다. 모바일 세로/가로 모드 전환 시 안정적인 레이아웃을 구현하는 데 도움이 됩니다.
ex
현재 사용 중인 글꼴의 소문자 'x' 높이(x-height)를 기준으로 하는 단위로, 타이포그래피를 세밀하게 조정할 때 활용됩니다.
ch
글꼴에서 숫자 '0'의 너비를 기준으로 하는 단위입니다. 입력창(<input>)이나 코드 블록처럼 일정한 문자 수만큼 너비를 맞추고 싶을 때 편리합니다.
gd
그리드(Grid) 단위로, 초기 CSS Grid Layout 규격 초안에서 제안되었으나 현재는 대부분의 브라우저에서 지원되지 않습니다. 그리드 기반 레이아웃은 오늘날 fr(fraction) 단위를 사용하는 것이 표준입니다.
상대 단위 활용 팁
반응형 웹을 구축할 때는 글꼴 크기에 rem, 레이아웃 너비에 % 또는 vw, 전체 화면 섹션에 vh를 조합하면 다양한 기기에서 일관된 사용자 경험을 제공할 수 있습니다. 절대 단위(px)와 상대 단위를 상황에 맞게 혼용하는 것이 실무에서 권장되는 방식입니다.