툴박스 가이드는 W3C·MDN·국제 표준 문서(RFC/ISO)와 한국인터넷진흥원(KISA) 등 공신력 있는 기관의 공개 자료를 기반으로 작성·검토합니다.편집 방침 보기
브라우저 글자 크기를 150%로 키웠는데 본문 글씨가 1px도 커지지 않는다 — font-size: 16px처럼 모든 값을 px로 박아두면 실제로 벌어지는 일이다. 국내 웹사이트 상당수가 여전히 px 고정 폰트를 쓰는데, 이는 사용자의 브라우저 확대 설정을 무시해 웹 콘텐츠 접근성 지침(WCAG 2.1, 성공기준 1.4.4 '텍스트 크기 조정')을 어기기 쉽다. CSS 단위는 취향이 아니라 "확대·반응형에 어떻게 반응하느냐"의 문제다. px·rem·em·%·vw/vh가 각각 무엇을 기준으로 계산되는지 알면 선택이 명확해진다.
CSS 단위 한눈에 비교
| 단위 | 계산 기준점 | 브라우저 확대 대응 | 대표 용도 |
|---|---|---|---|
| px | 고정 픽셀(절대) | 사용자 글꼴 확대 무시 | 테두리, 그림자, 1px 구분선 |
| rem | 루트(html) font-size | 잘 따라옴 | 폰트, 여백, 전체 레이아웃 |
| em | 직계 부모 font-size | 따라오나 중첩 주의 | 버튼·아이콘 내부 padding |
| % | 부모 요소의 크기 | 잘 따라옴 | 너비, 유동 그리드 |
| vw / vh | 뷰포트 너비/높이의 1% | 잘 따라옴 | 풀스크린 섹션, 큰 제목 |
핵심은 오른쪽 두 칸이다. px는 사용자가 글자를 키워도 고정되지만, rem·em·%·vw는 기준값이 바뀌면 함께 늘어난다. 그래서 "사람이 읽는 것(폰트·여백)"은 상대 단위, "물리적으로 정밀해야 하는 것(1px 선)"은 px로 나누는 것이 2026년에도 통하는 원칙이다.
절대 단위 px — 정확하지만 굳어 있다
px는 화면 한 점을 그대로 가리키는 절대 단위다. 1px 테두리, box-shadow의 blur 반경, 아이콘의 미세 정렬처럼 "딱 이만큼"이 필요한 곳에서는 px가 가장 예측 가능하다. 문제는 본문 폰트에 px를 쓰는 경우다. 일부 브라우저는 확대 시 px 글자도 키워주지만, 사용자가 설정에서 기본 글꼴 크기만 키운 경우 px 폰트는 꿈쩍하지 않는다. 결론: 선·그림자·테두리는 px, 글자는 px 금지가 안전하다.
rem과 em — 무엇을 기준으로 삼는가
둘 다 상대 단위지만 기준이 다르다. rem(root em)은 언제나 <html>의 font-size를 기준으로 삼는다. 브라우저 기본값 16px을 기준으로 하면:
1rem = 16px1.5rem = 24px0.875rem = 14px2.5rem = 40px
페이지 어디에 있든 1.5rem은 항상 24px이라 예측이 쉽다. 반면 em은 직계 부모의 font-size를 기준으로 한다. 그래서 중첩되면 값이 곱해지는 함정이 있다. 예를 들어 부모가 font-size: 1.25em(20px)이고 그 안의 자식도 1.25em이면 자식은 20 × 1.25 = 25px이 되고, 한 단계 더 들어가면 31.25px로 계속 커진다. 목록(ul) 안의 목록처럼 깊어질수록 폰트가 의도치 않게 부푸는 버그의 단골 원인이다. 그래서 전역 타이포·여백은 rem, 버튼 안쪽 padding처럼 "그 요소 글자 크기에 비례시키고 싶을 때"만 em을 쓰는 분업이 권장된다.
%·vw·vh와 clamp() 조합
%는 부모 요소의 같은 속성 크기를 기준으로 한다. width: 50%는 부모 너비의 절반이다. vw·vh는 부모가 아니라 화면(뷰포트) 자체가 기준으로, 100vw는 화면 너비 전체, 50vh는 화면 높이의 절반이다. 큰 히어로 제목이나 풀스크린 배너에 잘 맞지만, vw만 쓰면 모바일에서 글자가 너무 작아지고 와이드 모니터에서 과도하게 커진다. 이때 clamp(최소, 유동, 최대)를 묶어 쓴다. 예: font-size: clamp(1.5rem, 4vw, 3rem)은 화면이 작으면 24px(1.5rem) 밑으로 내려가지 않고, 크면 48px(3rem)을 넘지 않으면서 그 사이에서 4vw로 부드럽게 변한다. 반응형 타이포의 사실상 표준 패턴이다.
상황별 추천 — 무엇을 언제 쓸까
| 작업 | 1순위 단위 | 이유 |
|---|---|---|
| 본문·제목 폰트 | rem | 사용자 글꼴 확대를 그대로 반영, 접근성 안전 |
| 컴포넌트 내부 여백 | rem 또는 em | 글자에 비례시키려면 em |
| 1px 테두리·구분선 | px | 절대 정밀도 필요 |
| 카드·그리드 너비 | % 또는 fr(그리드) | 부모에 유동적으로 채움 |
| 풀스크린 섹션 높이 | vh | 화면 높이에 맞춤 |
| 반응형 큰 제목 | clamp(rem, vw, rem) | 최소·최대 보장하며 유동 |
요약하면, 기본은 rem으로 깔고 → 비례가 필요한 국소 부분에 em → 화면 단위가 필요할 때 vw/vh와 clamp → 절대 정밀이 필요한 1px류만 px로 가는 흐름이 가장 관리하기 쉽다. 디자인 단계에서 비율을 미리 잡고 싶다면 반응형 비율 계산기로 가로·세로 비율을 먼저 확정해두면 단위 변환이 한결 수월하다. 웹 작업이 아닌 일상 계산이 필요할 땐 자취 살림 계산기도 함께 활용해보자. 더 많은 개발·디자인 팁은 kimgoon 생활·도구 가이드에 정리돼 있다.
자주 묻는 질문
Q. rem과 em 중 그냥 하나만 쓴다면? 대부분의 경우 rem을 권한다. 기준이 항상 루트로 고정돼 어디서 쓰든 같은 px로 환산되기 때문에 중첩 버그가 없다. em은 "이 요소의 글자 크기에 비례시키고 싶다"는 명확한 의도가 있을 때만 국소적으로 쓰는 편이 안전하다.
Q. px로 16px과 rem으로 1rem은 결국 같은데 왜 굳이 rem을?
화면상으로는 같아 보여도 동작이 다르다. 사용자가 브라우저 기본 글꼴을 20px로 키우면 1rem은 20px로 늘지만 16px은 그대로 16px이다. 접근성과 사용자 설정 존중 측면에서 폰트는 rem이 유리하다.
Q. 반응형 글자 크기에 vw만 쓰면 안 되나요?
vw 단독은 최소·최대 한계가 없어 모바일에서 너무 작아지고 대형 화면에서 지나치게 커진다. clamp(최소rem, 유동vw, 최대rem)으로 하한과 상한을 함께 지정하는 것이 안전하다.
Q. 루트 font-size를 62.5%로 줄여 1rem=10px로 쓰는 방식은? 계산이 쉬워진다는 장점이 있으나(예: 1.6rem=16px), 사용자가 기본 글꼴을 바꿨을 때 전체 비율이 함께 줄어드는 부작용이 있어 최근에는 권장하지 않는 편이다. 기본 16px를 유지하는 쪽이 무난하다.
관련 가이드
참고한 표준·공식 자료
본 글은 다음 표준·문서의 공개 자료를 바탕으로 정리·검토되었습니다. 최신 사양은 각 표준 문서를 함께 확인해 주세요.
- MDN Web Docs ↗웹 표준·HTML/CSS/JS 공식 문서
- W3C ↗웹 국제 표준 권고안
- IETF RFC Editor ↗인터넷 프로토콜·인코딩 표준 원문
- 한국인터넷진흥원(KISA) ↗보안·암호·개인정보 가이드
잘못된 정보나 갱신이 필요한 부분을 발견하셨다면 contact@kimgoon.kr로 알려주세요. 툴박스 편집 방침을 함께 참고하실 수 있습니다.
