CSS 단위 px em rem 차이 완벽 정리 - 언제 어떤 단위를 써야 할까
글자 크기는 px로? rem으로? 브라우저 기본값 16px부터 접근성 문제까지, CSS 단위 px em rem 차이를 예제와 함께 한 번에 정리했습니다.
CSS를 처음 배울 때 가장 많이 막히는 부분이 단위 선택입니다. 폰트 크기를 16px로 쓰는 사람도 있고, 1rem으로 쓰는 사람도 있고, 어떤 코드에서는 1.2em이 튀어나옵니다. 셋 다 화면에서는 비슷하게 보이는데 왜 굳이 나눠 쓰는지 답답했던 경험, 한 번쯤 있으실 겁니다. CSS 단위 px em rem 차이는 기준점이 어디냐 하나로 정리됩니다. 이 기준만 이해하면 단위 때문에 헤맬 일이 크게 줄어듭니다.
px em rem, 핵심 차이 한눈에 보기
세 단위의 차이는 크기를 계산하는 기준점에 있습니다. px는 기준 없이 고정, em은 부모 요소 기준, rem은 문서 최상위(html) 요소 기준입니다.
| 단위 | 기준점 | 1단위의 크기 | 특징 |
|---|---|---|---|
| px | 없음 (절대값) | 항상 동일 | 예측 쉬움, 사용자 설정 무시 |
| em | 부모 요소의 font-size | 부모가 16px이면 1em = 16px | 중첩되면 누적 계산됨 |
| rem | html 요소의 font-size | 루트가 16px이면 1rem = 16px | 어디서 써도 기준이 하나 |
px - 고정 단위의 장점과 함정
px는 화면에서 항상 같은 크기로 표시되는 절대 단위입니다. 디자인 시안이 픽셀 기준으로 나오기 때문에 시안을 그대로 옮기기에는 가장 직관적입니다.
- 장점: 계산이 필요 없고, 어디에 써도 크기가 변하지 않아 예측이 쉽습니다.
- 단점: 사용자가 브라우저 설정에서 기본 글자 크기를 키워도 px로 지정된 글자는 커지지 않습니다.
- 적합한 곳: 1px 테두리, 그림자 값처럼 화면 밀도와 무관하게 고정되어야 하는 속성.
단점이 생각보다 큽니다. 시력이 좋지 않은 사용자가 브라우저 기본 글자 크기를 20px로 올려도 font-size: 14px로 박아둔 텍스트는 그대로 14px입니다. 접근성 관점에서 본문 텍스트에 px를 쓰지 말라고 하는 이유가 바로 이것입니다.
em - 부모를 따라가는 상대 단위
em은 부모 요소의 font-size를 1로 보는 단위입니다. 부모의 폰트가 20px이면 자식의 1.5em은 30px이 됩니다. 컴포넌트 내부 요소들이 부모 크기에 비례해서 함께 커지고 작아져야 할 때 유용합니다.
em의 함정, 중첩 누적
문제는 중첩입니다. font-size: 1.2em을 지정한 요소 안에 또 1.2em 요소가 들어가면 16px × 1.2 × 1.2 = 23.04px로 곱셈이 누적됩니다. 리스트 안에 리스트가 들어가는 구조에서 글자가 단계마다 커지거나 작아지는 버그가 em 중첩의 대표적인 사례입니다.
font-size 외의 속성에서는 다르게 동작
한 가지 더 헷갈리는 점이 있습니다. padding이나 margin에 em을 쓰면 부모가 아니라 해당 요소 자신의 font-size가 기준이 됩니다. 버튼의 폰트 크기를 키우면 padding: 0.5em 1em으로 지정한 여백도 함께 커지는 원리입니다. 버튼 크기 변형을 만들 때는 오히려 이 특성이 편리하게 작동합니다.
rem - 루트 기준이라 예측 가능한 단위
rem은 em의 중첩 문제를 해결한 단위입니다. 기준이 항상 html 요소 하나이기 때문에 아무리 깊은 곳에 써도 1rem은 같은 크기입니다. 계산이 단순하고, 사용자가 브라우저 기본 글자 크기를 바꾸면 페이지 전체가 비례해서 커지므로 접근성까지 확보됩니다.
단위 선택의 본질은 취향이 아니라 기준점 설계입니다. 페이지 전체가 하나의 기준으로 움직여야 하면 rem, 컴포넌트 내부가 자기 크기에 비례해야 하면 em, 크기가 절대 변하면 안 되면 px. 이 세 문장이 사실상 결론입니다.
실무에서는 어떤 단위를 써야 할까
현업에서 통용되는 기준은 비교적 명확합니다.
- 본문, 제목 등 텍스트: rem. 접근성과 유지보수 양쪽에서 유리합니다.
- 버튼, 카드 등 컴포넌트 내부 여백: em 또는 rem. 폰트에 비례해야 하면 em.
- 테두리, 그림자, 미세 조정: px. 1px 선은 1px여야 합니다.
- 레이아웃 너비: %, vw 같은 뷰포트 단위와 rem을 조합.
특히 입력 폼이 많은 웹 도구일수록 rem 기반 설계의 효과가 큽니다. 예를 들어 학점 계산기처럼 숫자 입력 칸이 화면에 빼곡한 페이지는 모바일에서 글자가 조금만 작아도 사용성이 급격히 떨어지는데, rem으로 통일해 두면 루트 폰트 하나만 조정해서 전체 균형을 맞출 수 있습니다.
반응형 확인은 개발자 도구의 기기 모드만 믿지 말고 실제 스마트폰에서 열어보는 것이 정확합니다. 테스트 페이지 주소가 길고 복잡하다면 미투 단축URL로 줄여서 폰으로 옮기면 확인 과정이 훨씬 간단해집니다.
바로 적용할 수 있는 추천 설정
지금 진행 중인 프로젝트가 있다면 두 가지만 실천해 보세요. 첫째, font-size에 쓰인 px를 rem으로 교체하세요. 16px은 1rem, 14px은 0.875rem입니다. 둘째, 브라우저 설정에서 기본 글자 크기를 20px로 바꾼 뒤 내 페이지가 자연스럽게 커지는지 직접 확인해 보세요. 이 테스트 하나로 접근성 문제 상당수가 드러납니다. 기준점이라는 개념만 잡히면 px, em, rem은 더 이상 헷갈리는 대상이 아니라 상황에 맞게 골라 쓰는 도구가 됩니다.
