삼분공부/기타
[css] CSS 크기 단위 비교
케이쓰리
2025. 4. 7. 23:46
퍼블리셔가 있어도 간간히 개발자들이 고쳐야하는 부분이 있다.
3년차지만 .. . 이제와서 궁금해진 rem ...
| 단위 | 기준점 | 특징 | 예시 | 결과 (기준 font-size: 16px) |
| px | 고정 픽셀값 | 가장 직관적이고 정확함 | margin: 16px; | 16픽셀 |
| em | 부모 요소의 font-size | 중첩 시 크기 계산 복잡 | margin: 1em; | 보통 16px (부모 기준) |
| rem | 최상위 html의 font-size | 항상 기준이 일정해서 예측 쉬움 | margin: 1rem; | 16px (html 기준) |
| % | 부모 요소의 크기 비율 | 반응형에 자주 사용 | width: 50%; | 부모의 절반 크기 |
📌 예시 코드
<html style="font-size: 16px;">
<body>
<div style="font-size: 20px;">
<p style="margin: 1em;">em 예시</p>
<p style="margin: 1rem;">rem 예시</p>
</div>
</body>
</html>- 1em → 20px (div가 기준)
- 1rem → 16px (html이 기준)
🧠 언제 어떤 걸 쓰면 좋을까?
- ✅ px: 픽셀 정확하게 맞춰야 할 때
- ✅ rem: 전체 디자인에서 통일성 있게 만들고 싶을 때 (ex. 반응형 디자인)
- ✅ em: 글자 크기에 맞춰 여백/패딩 설정하고 싶을 때
- ✅ %: 부모 영역 비율 기준으로 레이아웃 만들 때