Tistory
CSS 길이 단위 이해하기
px/em/rem/뷰포트 단위(vh,vw,svh,lvh,dvh)/ch,ex,cap,ic,lh 까지 — 각 단위가 "무엇을 기준으로" 측정되는지 정리한다.
핵심 요약
분류:
| 카테고리 | 단위 | 기준 |
|---|---|---|
| 절대 | px(가상 픽셀), cm,mm,in,pt,pc | 화면 / 인쇄 |
| 부모 기준 | %, em | 부모 크기·폰트 |
| 루트 기준 | rem, rlh | <html> 폰트·줄높이 |
| 뷰포트 기준 | vh,vw,vmin,vmax,vi,vb + s/l/d 프리픽스 | 뷰포트 크기·UI 표시 여부 |
| 글자 기준 | ch,ex,cap,ic,lh | 특정 문자/줄높이 |
핵심 권고: 인쇄는 mm/pt, 웹 페이지는 rem(필요시 html { font-size: 62.5% } 로 1rem=10px), 풀-뷰포트 레이아웃은 dvh/svh/lvh 로 모바일 주소창 변화 대응.
CSS 길이 단위는 두 축으로 분류한다: (1) 절대 vs 상대, (2) 무엇을 기준으로 하는가(부모/루트/뷰포트/문자/줄높이). "왜 px 대신 rem 을 쓰나" 의 답은 사용자 글꼴 설정 존중 이라는 한 문장으로 정리된다.
이 주제는 면접에서 "px 만 쓰면 안 되는 이유", "vh 100% 가 모바일에서 깨지는 이유", "em vs rem" 형태로 자주 나온다. 본질은 접근성(사용자 글꼴 설정) + 뷰포트 변화(모바일 주소창) 두 가지를 어떻게 단위로 표현하느냐다.
학습 포인트
면접 답변으로 연결할 학습 포인트입니다.
왜 `px` 가 "진짜 절대" 가 아닌가
Retina/HiDPI 시대의 1px 는 CSS 픽셀(가상) 이며 디스플레이의 물리 픽셀과 다르다(devicePixelRatio 로 확인). 또한 브라우저 글꼴 크기 설정 을 무시하므로 사용자가 글자 키운 환경에서 레이아웃이 깨질 수 있다.
"px 가 가장 정확하다" 라고 외우는 것. 정확성은 "화면 픽셀 1:1" 에 한정되고, 접근성·반응형 측면에선 가장 경직된 단위.
`vh` 100% 가 모바일에서 "깜빡" 하는 이유와 `dvh`/`svh`/`lvh` 의 분리
모바일에서 주소창이 보일 때 / 숨길 때 뷰포트 높이가 변한다.
lvh: 주소창 숨겨졌을 때 의 큰 뷰포트 (고정)svh: 주소창 보일 때 의 작은 뷰포트 (고정)dvh: 현재 뷰포트 (동적, 스크롤 시 변함)vh(프리픽스 없음) =lvh
풀-뷰포트 hero 섹션은 min(100dvh, 100svh) 같은 패턴이 안전.
height: 100vh 만 써서 모바일에서 하단이 잘리거나 콘텐츠가 점프 하는 현상. dvh 로 바꾸면 스크롤마다 layout 이 흔들린다는 새 트레이드오프 인지.
`em` vs `rem` — 어디를 기준으로 잡느냐
.parent { font-size: 20px; }
.child { padding: 1em; /* 20px, 부모 의존 */ }
.btn { padding: 1rem; /* 16px, 루트 의존 */ }
컴포넌트 라이브러리는 보통 rem 을 권장한다 — 어느 트리 위치 에 두든 동일 크기. em 은 아이콘이 글자와 함께 스케일되어야 할 때 같은 의도된 사용처.
em 을 깊게 중첩해 누적 스케일이 폭주하는 것. 흔한 사례: 1.2em 헤더 안의 1.2em 부제 → 1.44em.
읽는 순서
- 1이론
MDN length 문서 의 단위 표를 그대로 옮겨, 기준 컬럼이 무엇인지 직접 채워 본다.
- 2구현
vh,svh,lvh,dvh차이를 보여주는 데모 페이지를 만든 뒤, 실제 모바일 주소창을 숨겼다 보였다 하며 점프 여부를 확인. - 3실무
현재 프로젝트의 typography 토큰과 spacing 토큰이
rem기반인지 점검.px로 박힌 곳을 찾아 한 페이지 단위로 이전. - 4설명
"왜 디자인 시스템은
rem기반이 표준인가" 5분 발표. 사용자 글꼴 설정 + 위치 독립성 + 1rem=10px 트릭 트레이드오프까지.
면접 연결 질문
[좋은 답변] 사용자가 브라우저 기본 글꼴을 24px 로 키웠을 때, px 기반 레이아웃은 글꼴만 커지지 않고 행 간격·여백·breakpoint 가 그대로라 가독성이 떨어진다. rem 기반은 자동 스케일.
[좋은 답변] dvh 로 교체 (현재 뷰포트), 또는 min(100dvh, 100svh) 로 stable 하게. JS 로 window.innerHeight 측정 후 CSS 변수에 주입하는 옛 패턴은 layout shift 와 resize 비용 단점.
[좋은 답변] 컴포넌트의 위치 독립성 이 중요한 디자인 시스템에서는 rem 기본. em 은 부모와 함께 스케일되어야 하는 패턴 (예: 아이콘 옆 텍스트, 버튼 내부 padding) 에 의도적으로.
자기 점검
"모두 같다" — 모바일 주소창 표시 여부에 따라 다르다.
"항상 좋다" — 사용자가 기본 크기를 바꾸면 상대값은 그대로 유지 되지만 60% 부터 시작하므로 작은 글자가 더 작아질 수 있다.