px·rem·em 차이 — CSS 단위, 언제 무엇을 쓰나
"px 대신 rem을 쓰세요"라는 말은 많이 듣는데, 이유를 설명해 주는 곳은 드뭅니다. 세 단위의 차이는 한 줄로 요약됩니다 — 무엇을 기준으로 계산되는가. px는 고정값, rem은 문서 루트의 글자 크기, em은 부모의 글자 크기입니다. 이 기준의 차이가 접근성과 유지보수를 가릅니다.
세 단위의 기준
| 단위 | 기준 | 성격 |
|---|---|---|
px | 고정 — 어떤 설정과도 무관 | 지정한 그대로. 예측은 쉽지만 사용자 설정을 무시 |
rem | 루트(html)의 글자 크기 | 브라우저 기본값(보통 16px)·사용자 설정에 비례 |
em | 부모 요소의 글자 크기 | 맥락에 비례. 중첩되면 곱해져서 예측이 어려움 |
핵심은 rem과 em이 비례 단위라는 점입니다. 기준이 바뀌면 따라서 바뀝니다. px는 어떤 일이 있어도 그대로입니다.
왜 글자 크기는 rem인가 — 접근성
- 시력이 좋지 않은 사용자는 브라우저 설정(글꼴 크기)을 16px → 20px, 24px로 키워 둡니다.
font-size: 14px로 박아 둔 글자는 이 설정을 무시합니다 — 그 사용자에게는 여전히 작은 글자입니다.font-size: 0.875rem은 루트를 따라갑니다 — 설정을 키우면 글자도 비례해 커집니다.- 참고로 화면 확대(Ctrl +)는 px도 함께 키우지만, 글꼴 크기 설정은 rem 계열만 따라갑니다. 둘은 다른 기능입니다.
환산 공식과 자주 쓰는 값
공식은 하나입니다: rem = px ÷ 루트 글자 크기(기본 16).
| px | rem (16px 기준) | 주 용도 |
|---|---|---|
| 12px | 0.75rem | 캡션·보조 텍스트 |
| 14px | 0.875rem | 본문(좁은 UI) |
| 16px | 1rem | 본문 기본 |
| 20px | 1.25rem | 소제목 |
| 24px | 1.5rem | 제목 |
| 32px | 2rem | 큰 제목 |
나누기 16이 번거롭다면 변환 도구에 맡기세요. 루트 크기를 바꿔서 쓰는 프로젝트(예: 62.5% 트릭으로 1rem = 10px)도 기준값만 바꾸면 같은 공식입니다.
실무 선택 기준
- 글자 크기 → rem. 접근성의 기본입니다. 미디어쿼리 분기점도 rem으로 쓰면 글꼴 설정과 일관되게 동작합니다.
- 글자에 비례해야 하는 여백 → em. 버튼 좌우 padding을 em으로 주면 글자가 큰 버튼은 여백도 자동으로 넉넉해집니다.
- 1px 테두리, 그림자처럼 시각적으로 고정이어야 하는 것 → px. 테두리가 글꼴 설정에 따라 굵어질 필요는 없습니다.
- em 중첩 주의. 부모가 1.2em이고 자식도 1.2em이면 실제로는 1.44배 — 중첩이 깊어질수록 의도에서 멀어집니다. 기본은 rem, em은 한 단계짜리 비례가 필요할 때만.
보통의 화면에서는 차이가 없습니다. 차이가 나는 건 사용자가 브라우저 설정에서 기본 글자 크기를 키웠을 때입니다. px로 지정한 글자는 그 설정을 무시하고 그대로 있지만, rem으로 지정한 글자는 설정에 비례해 함께 커집니다. 시력이 좋지 않아 글자 크기를 키워 둔 사용자에게 px 고정 글자는 읽을 수 없는 화면이 되므로, 글자 크기만큼은 rem을 쓰는 것이 접근성의 기본입니다.
대부분의 브라우저 기본값이 16px일 뿐, 보장된 값은 아닙니다. 사용자가 브라우저 설정에서 기본 글자 크기를 20px로 키우면 1rem도 20px이 됩니다. 바로 이 '사용자를 따라가는' 성질이 rem을 쓰는 이유입니다. 환산 공식은 rem = px ÷ 루트 글자 크기로, 기본값 기준 24px은 1.5rem, 12px은 0.75rem입니다.
rem은 문서 루트(html)의 글자 크기를 기준으로 하고, em은 자기 부모(글꼴 크기 기준으로는 자기 자신)의 글자 크기를 기준으로 합니다. em은 중첩될수록 곱해져서 예측이 어려워지는 단점이 있어 기본 선택지로는 rem이 안전합니다. em이 빛나는 곳은 '글자 크기에 비례해야 하는 주변 여백'입니다. 예를 들어 버튼의 좌우 padding을 em으로 주면 글자가 큰 버튼은 여백도 자동으로 넉넉해집니다.