CSS에서 글자 크기나 여백을 지정할 때 단위는 매우 중요합니다. 그중 상대 단위인 em과 rem 은 반응형 웹과 접근성 측면에서 자주 사용됩니다. 픽셀(px)처럼 고정된 크기가 아니라, 상대적인 기준을 바탕으로 크기를 조정하기 때문에 유연한 디자인을 가능하게 합니다.
1. em 단위
- 부모 요소(font-size)를 기준으로 크기가 결정됨
- 1em = 부모 요소의 글자 크기
- 중첩될 경우 계산이 누적되므로 주의 필요
div {
font-size: 16px;
}
p {
font-size: 1.5em; /* 24px (16px × 1.5) */
}중첩 예시
div {
font-size: 16px;
}
div p {
font-size: 1.2em; /* 19.2px */
}
div p span {
font-size: 1.2em; /* 19.2px × 1.2 = 23.04px */
}👉 부모 기준으로 계속 곱해지므로 예상치 못한 크기가 될 수 있음
2. rem 단위
- 루트 요소(html)의 font-size를 기준으로 크기가 결정됨
- 1rem = <html> 요소의 글자 크기
- 중첩 영향 X → 유지보수가 쉬움
html {
font-size: 16px;
}
p {
font-size: 2rem; /* 32px (16px × 2) */
}3. 비교: em vs rem
단위 기준 장점 단점
| em | 부모 요소 글자 크기 | 부모 요소 비율에 맞춰 유연함 | 중첩 시 계산 복잡 |
| rem | 루트(html) 글자 크기 | 일관된 계산, 유지보수 쉬움 | 부모 요소에 따라 변화 X |
4. 실무 활용 팁
- 글자 크기(font-size) → rem 사용 권장
- 전체 사이트에서 일관성 유지 가능
- 내부 여백(padding, margin) → em도 유용
- 글자 크기에 비례하여 버튼 크기 자동 조절
- 반응형 디자인에서는 <html>의 font-size를 %로 지정해 rem 단위를 활용하면 좋음
html {
font-size: 100%; /* 일반적으로 브라우저 기본값 16px */
}
h1 {
font-size: 2rem; /* 32px */
}
button {
font-size: 1rem; /* 16px */
padding: 0.5em 1em; /* 글자 크기에 비례해 버튼 크기 조정 */
}마무리
em과 rem은 모두 상대 단위이지만, 기준이 다르다는 점을 꼭 이해해야 합니다.
- em → 부모 글자 크기 기준
- rem → 루트(html) 기준
실무에서는 글자 크기 = rem, 여백/비율 = em 조합을 많이 사용합니다.
'프론트엔드 > CSS' 카테고리의 다른 글
| CSS Flexbox 정리 (0) | 2025.09.22 |
|---|---|
| CSS display 속성 정리 (0) | 2025.09.22 |
| CSS란? (0) | 2025.09.20 |