CSS 길이 단위의 이해
개요
CSS를 처음 접하는 주니어 개발자들은 다양한 길이 측정 단위에 압도될 수 있다. px를 절대 단위로 사용하지 말라는 조언도 있지만, 실제로 그럴까?
절대 단위
px (픽셀)
-
화면이 표현할 수 있는 가장 작은 점
-
레티나 디스플레이 도입으로 현대의 px는 실제 픽셀이 아닌 가상 픽셀을 나타냄
-
중요: px는 더 이상 절대 단위가 아님
-
레티나 디스플레이는 더 밀도 높은 픽셀을 가짐
인쇄용 단위
-
cm (센티미터)
-
mm (밀리미터)
-
q (쿼터 밀리미터)
-
in (인치)
-
pc (파이카 - 1/6 인치)
-
pt (포인트 - 1/72 인치)
인쇄 단위 특징
-
화면용이 아닌 인쇄용으로 권장
-
초기 컴퓨터 프린터는 인치당 72개 점 인쇄 가능 (1pt = 1 dot)
-
현대 프린터는 150, 300, 600, 1200 dpi까지 가능
-
프린터 해상도와 무관하게 예상대로 인쇄하려면 다른 단위나 상대 단위 사용 권장
상대 단위
% (퍼센트)
-
부모 요소에 상대적
-
주의사항: position이 absolute일 때 부모 판단이 복잡해짐
em
-
부모의 font-size에 대한 비율 (특히 “m” 문자의 너비 기준)
-
2em = 현재 크기의 두 배
-
CSS 컴포넌트 구축 시 부모 컨테이너에 비례하여 크기 결정
rem
-
em과 유사하나 루트(html 태그)의 font-size 기준
-
부모와 무관하게 컴포넌트 크기 일정 유지
rem 활용 팁
html { font-size: 62.5%; }
body { font-size: 1.6rem; }
-
위 설정으로 1rem = 10px 환산 (계산 편의)
-
브라우저 기본 font-size는 16px
-
px 대신 rem 사용 이유: 사용자가 접근성을 위해 설정 변경 시 반영
뷰포트 단위
24가지 뷰포트 기반 측정 단위 (웹페이지의 가시 영역 기준)
기본 뷰포트 단위
-
vh: 뷰포트 높이
-
vw: 뷰포트 너비
-
vmin: 뷰포트 차원 중 작은 값
-
vmax: 뷰포트 차원 중 큰 값
방향성 뷰포트 단위
-
vi (inline): 텍스트 방향에 따른 너비
-
vb (block): 텍스트 방향에 따른 높이
-
영어 등 수평 언어: vi=vh, vb=vw
-
일본어 등 수직 언어: 반대로 적용
크기별 뷰포트 단위
-
sv* (small): 브라우저 컨트롤 표시 시 뷰포트
-
lv* (large): 브라우저 컨트롤 숨김 시 뷰포트
-
dv* (dynamic): 현재 뷰포트 (small 또는 large)
-
sv와 lv는 컨트롤 표시 여부와 무관하게 고정값
-
미지정 시 v* = lv* (large)
특수 단위 (지원 제한적)
문자 기반 단위
-
ch: “0” 문자의 너비
-
ex: “x” 문자의 높이
-
cap: 대문자의 높이 (텍스트 옆 아이콘 설정에 유용)
-
ic: CJK 물 표의문자(水)의 너비
줄 높이 단위
-
lh: 부모 요소의 줄 높이
-
rlh: 루트 요소의 줄 높이
실용적 권장사항
세 가지 핵심 옵션
-
인쇄용: mm 사용으로 디자인과 정확히 일치
-
웹 페이지: rem 사용으로 적절한 크기 조정
- 선택사항: 1rem=10px 설정으로 계산 편의성 향상
- 웹 애플리케이션: 뷰포트 단위로 화면 채우기
주의사항
-
대부분의 경우 위 세 옵션으로 충분
-
특수한 시나리오에서만 다른 옵션 고려
-
특수 단위는 실제로 필요한 소수의 개발자만 사용