CSS로 크기를 지정할 때 px를 쓸지, rem을 쓸지, %를 쓸지 매번 망설이게 됩니다. 각 단위는 무엇을 기준으로 삼느냐가 다르고, 그 차이가 접근성과 반응형 동작을 좌우합니다. 하나씩 정리해 봅시다.
절대 단위: px
**px(픽셀)**는 고정된 절대 단위입니다. 16px은 어떤 상황에서도 16px입니다. 예측이 쉽다는 장점이 있지만, 사용자가 브라우저 기본 글자 크기를 키워도 따라 커지지 않는다는 단점이 있습니다. 그래서 폰트나 여백을 px로 고정하면 시력이 낮은 사용자의 접근성이 떨어질 수 있습니다. 테두리 두께처럼 실제로 고정돼야 하는 값에 적합합니다.
폰트 기준 상대 단위: rem과 em
rem: 루트 기준
**rem(root em)**은 항상 HTML 루트 요소의 폰트 크기를 기준으로 합니다. 루트가 16px이면 1rem = 16px, 1.5rem = 24px입니다. 사용자가 기본 글자 크기를 키우면 rem으로 잡은 모든 것이 함께 커져 접근성에 유리합니다. 언제나 루트 하나만 기준으로 하므로 값이 예측 가능합니다.
em: 부모 기준
em은 해당 요소가 상속받은 폰트 크기를 기준으로 합니다. 버튼 padding을 0.75em으로 주면 글자 크기에 따라 여백이 함께 스케일돼, 컴포넌트가 통째로 커지는 효과를 냅니다.
em의 함정은 중첩 누적입니다. em으로 폰트 크기를 지정한 요소 안에 또 em을 쓰면 조상들의 배율이 곱해집니다. 1.2em이 세 단계 중첩되면 실제로는 1.2 × 1.2 × 1.2 ≈ 1.73배가 됩니다. 그래서 예측 가능성이 중요하면 rem을, 부모에 비례한 스케일이 필요하면 em을 선택합니다.
컨테이너 기준: %
**%(퍼센트)**는 부모 요소를 기준으로 합니다. 다만 속성마다 기준이 다릅니다: width는 부모의 너비, height는 부모의 높이, font-size는 부모의 폰트 크기이며, 흥미롭게도 padding과 margin은 세로 값이라도 부모의 너비를 기준으로 계산됩니다. 컨테이너 안에서 공간을 비율로 나눌 때 적합합니다.
뷰포트 기준: vw / vh
**vw(viewport width)**는 화면 너비의 1%입니다. 100vw는 화면 전체 너비, 50vw는 절반입니다. 화면 크기에 따라 자동으로 변하므로 풀블리드 히어로나 화면에 비례한 타이포에 쓰입니다.
주의할 점은 vw만 단독으로 쓰면 큰 화면에서 지나치게 커지고 작은 화면에서 너무 작아진다는 것입니다. 그래서 실무에서는 clamp()로 하한과 상한을 함께 지정합니다: font-size: clamp(1rem, 4vw, 2rem).
상황별 선택 가이드
- 폰트 크기·여백 → rem (접근성·예측 가능성)
- 컴포넌트 내부 스케일 → em (부모 폰트에 비례)
- 컨테이너 안 비율 배분 → %
- 화면에 비례한 크기 → vw, 단 clamp와 함께
- 고정돼야 하는 값(테두리 등) → px
px로 환산해 확인하기
디자인 시안은 보통 px로 전달되지만 구현은 rem·em·%·vw로 하는 경우가 많아, 둘 사이를 오가는 환산이 자주 필요합니다. 실제로 몇 px이 되는지 확인하면 감을 잡기 쉽습니다: rem→px, em→px, vw→px, %→px 변환기로 즉시 확인해 보세요.