한 줄 정답 — px는 화면에 고정된 절대 단위고, em·rem·%·vw/vh는 무언가에 비례하는 상대 단위다. em은 자기(또는 부모) 글자 크기, rem은 루트(html) 글자 크기, %는 부모 요소, vw/vh는 화면 폭·높이를 기준으로 삼는다. 글자와 여백은 사용자 설정을 존중하는 rem을 기본으로, 화면에 꽉 차야 하는 폭·높이는 vw/vh를, 부모에 비례시킬 땐 %를 쓴다.

핵심 요약#

  • px — 절대 단위. 어디서나 같은 길이라 계산이 단순하지만, 사용자가 브라우저 기본 글자 크기를 키워도 따라 커지지 않는다.
  • em — 기준이 자기(또는 부모) font-size. 중첩되면 값이 곱해지는 함정이 있다.
  • rem — 기준이 루트(html) font-size 하나뿐. 대부분 브라우저 기본값이 16px이라 보통 1rem=16px. 중첩과 무관해 글자·여백의 기본 단위로 권한다.
  • % — 부모 요소의 같은 속성 기준(폭은 부모 폭, 높이는 부모 높이).
  • vw·vh — 화면(뷰포트) 폭·높이의 1%. 100vw는 화면 전체 폭. 모바일 100vh는 잘릴 수 있어 dvh로 보정한다.

CSS 단위 차이 — 절대 단위와 상대 단위부터#

단위는 크게 둘로 갈린다. 기준이 없는 절대 단위(px)와 무언가에 비례하는 상대 단위(em·rem·%·vw/vh)다. 헷갈림의 대부분은 "이 상대 단위가 도대체 무엇을 기준으로 삼는가"를 모를 때 생긴다. 단위마다 기준이 다르다는 것만 잡으면 나머지는 따라온다.

px — 화면에 고정된 절대 단위#

1px는 어디에 쓰든 같은 길이다(기준 환경에서 1인치의 1/96). 기준을 따질 필요가 없어 계산이 가장 단순하다. 단점은 접근성이다. 사용자가 브라우저 기본 글자 크기를 키워도 px로 박은 글자는 그대로라, 시력이 약한 사람에게 불친절할 수 있다. 그래서 글자 크기보다는 테두리처럼 늘 또렷한 1~2px가 필요한 곳에 어울린다.

.box {
  border: 1px solid #ddd;   /* 두께는 화면과 무관하게 또렷하게 */
}

em — 자기 글자 크기 기준#

em은 font-size에 쓰면 부모의 font-size를, 그 외 속성(padding·width 등)에 쓰면 자기 요소의 font-size를 기준으로 삼는다. 핵심 함정은 중첩 곱셈이다. 부모가 1.5em, 그 자식도 1.5em이면 글자가 2.25배로 불어난다.

.parent { font-size: 20px; }
.parent .child { font-size: 1.5em; }   /* 20 × 1.5 = 30px */

.btn {
  font-size: 1rem;
  padding: 0.5em 1em;   /* 글자 크기에 비례한 여백 — 글자가 커지면 여백도 함께 */
}

마지막 예처럼 글자 크기에 딸려 여백이 같이 커지길 원하는 컴포넌트(버튼 등)에서 em이 빛난다.

rem — 루트 글자 크기 기준#

rem은 언제나 html(루트) 요소의 font-size 하나만 본다. 브라우저 기본이 보통 16px이라 1rem=16px, 1.5rem=24px이다. 중첩과 무관해 어디서 써도 값이 예측 가능하고, 사용자가 브라우저 글자 크기를 키우면 rem 기반 레이아웃이 함께 커져 접근성에도 유리하다. 그래서 글자·여백·breakpoint의 기본 단위로 권한다.

html { font-size: 16px; }   /* 기준 — 보통 브라우저 기본값이라 생략 가능 */

h1 { font-size: 2rem; }     /* 32px */
.card { padding: 1.5rem; }  /* 24px — 어느 깊이에 있든 같은 값 */

html의 font-size를 바꾸면 모든 rem 값이 거기에 곱해진다. 의도한 게 아니라면 함부로 건드리지 않는다.

% — 부모 요소 기준#

%는 부모 요소의 같은 축을 기준으로 한다. width: 50%는 부모 폭의 절반이다. 흔한 함정은 높이다. height: 50%는 부모에 높이가 정해져 있어야 계산되며, 부모 높이가 auto면 무시된다. 가변 폭 레이아웃에 주로 쓴다.

vw·vh — 화면(뷰포트) 기준#

1vw는 뷰포트 폭의 1%, 1vh는 높이의 1%다. 100vw는 화면 전체 폭, 100vh는 전체 높이라 첫 화면을 꽉 채우는 히어로 섹션 등에 쓴다. 모바일에는 함정이 있다. 100vh는 주소창이 접힌 큰 뷰포트 기준이라(MDN 기준 vh는 lvh와 동일), 주소창이 떠 있으면 화면보다 커서 아래가 잘린다. 이를 보정하려면 화면 변화에 맞춰 줄었다 늘었다 하는 **동적 뷰포트 단위 dvh**를 쓴다.

.hero { min-height: 100vh; }    /* 데스크톱에선 화면을 꽉 채움 */
.hero { min-height: 100dvh; }   /* 모바일 주소창 변화에 맞춰 잘림 방지 */

한눈 비교#

단위기준1 단위 값(기본)주로 쓰는 곳
px화면 고정(절대)항상 같은 길이테두리, 그림자, 미세 고정값
em자기(또는 부모) font-size기준 글자 크기 × 배수글자에 비례한 컴포넌트 내부 여백
rem루트(html) font-size보통 16px × 배수글자·여백·breakpoint 기본
%부모 요소의 같은 속성부모 값 × 비율가변 폭 레이아웃
vw·vh뷰포트 폭·높이화면의 1%풀스크린, 화면 비례 크기

언제 무엇을 쓰나#

  • 글자 크기·여백·둥근 모서리 등 대부분 → rem. 사용자 설정을 존중하면서 어디서나 값이 예측된다.
  • 글자 크기에 여백이 함께 비례해 커져야 하는 컴포넌트(버튼 등) → em.
  • 부모 폭에 비례한 가변 폭 → %.
  • 화면에 꽉 차야 하는 폭·높이 → vw·vh(모바일 높이는 dvh 고려).
  • 늘 또렷해야 하는 테두리 1~2px → px.

한 프로젝트 안에서 단위를 무작정 섞기보다, "글자·여백은 rem, 화면 비례는 vw/vh" 식으로 역할을 정해 두면 유지보수가 쉬워진다.

단위가 안 먹거나 어긋날 때#

  • em 중첩으로 글자가 점점 커진다 — 목록 안 목록처럼 깊어질수록 배수가 곱해진 것이다. 해당 글자 크기를 rem으로 바꾸면 한 기준으로 고정된다.
  • height: %가 무시된다 — 부모 높이가 auto라 기준이 없는 경우다. 부모에 높이를 주거나 vh로 바꾼다.
  • 모바일에서 100vh 섹션 아래가 잘린다 — 주소창 영역만큼 넘친 것이다. 100dvh로 보정한다.
  • rem 값이 전부 틀어졌다 — html font-size를 바꾼 적이 있는지 본다. 그 변경은 모든 rem에 곱해진다.

자주 묻는 질문#

Q. px, em, rem 차이가 뭔가요?

A. px는 화면에 고정된 절대 길이라 기준이 없습니다. em은 자기(또는 부모) 글자 크기를, rem은 루트(html) 글자 크기를 기준으로 하는 상대 단위입니다. em은 중첩되면 값이 곱해지지만 rem은 항상 한 기준만 보므로, 글자와 여백의 기본 단위로는 rem을 권합니다.

Q. rem은 16px 기준인가요?

A. 대부분 브라우저의 기본 글자 크기가 16px이라 보통 1rem=16px입니다. 다만 고정값이 아니라 html 요소의 font-size를 따르며, 사용자가 브라우저 글자 크기를 키우면 그 값도 커집니다. 그래서 rem 기반 레이아웃이 접근성에 유리합니다.

Q. em과 rem은 언제 골라 쓰나요?

A. 한 기준으로 예측 가능하게 가려면 rem, 컴포넌트 글자 크기에 여백이 함께 비례해 커지길 원하면 em입니다. 예를 들어 버튼 글자가 커질 때 안쪽 여백도 같이 커지게 하려면 padding에 em이 편합니다. 둘을 섞을 때는 em 중첩 곱셈만 주의하면 됩니다.

Q. vw, vh 단위는 무엇인가요?

A. vw는 뷰포트(화면) 폭의 1%, vh는 높이의 1%입니다. 100vw는 화면 전체 폭, 100vh는 전체 높이라 풀스크린 섹션에 씁니다. 모바일에서 100vh는 주소창이 접힌 큰 뷰포트 기준이라 화면보다 커 보일 수 있어, 동적 뷰포트 단위인 dvh로 보정합니다.

관련 글#

단위는 색상·박스·반응형과 늘 함께 쓴다. 기준을 잡았다면 그 단위가 실제로 어디에 들어가는지 이어서 보면 좋다.

더 알아보기#