웹 디자인의 유연성을 결정하는 **상대 단위인 em과 rem**에 대해 알아보겠습니다.
이 단위들은 고정된 값인 px과 달리 주변 환경(글자 크기)에 따라 크기가 변하므로, 반응형 웹을 만드는 데 필수적입니다.
1. em (Element)
해당 요소나 부모 요소의 글자 크기를 기준으로 하는 단위입니다.
- 계산 방식: 현재 요소의 font-size를 1로 봅니다.
- 특징: 중첩해서 사용할 경우 부모의 크기에 따라 자식의 크기가 계속 곱해져서 계산됩니다.
- 용도: 특정 요소 내부의 여백(padding, margin)을 글자 크기에 비례해서 조절하고 싶을 때 유용합니다.
2. rem (Root em)
최상위 요소(<html>)의 글자 크기만을 기준으로 하는 단위입니다.
- 계산 방식: 브라우저의 기본 설정값(보통 16px)을 1로 봅니다.
- 특징: 어디에서 사용하든 기준점이 항상 일정하므로 크기를 예측하기 훨씬 쉽습니다.
- 용도: 전체적인 레이아웃이나 폰트 크기를 일관성 있게 관리할 때 가장 많이 쓰입니다.
🖥️ 실전 예제 코드: "중첩에 따른 차이 확인"
HTML
<style>
html { font-size: 16px; } /* 루트(Root) 설정 */
.parent { font-size: 20px; } /* 부모 설정 */
/* 1. em 사용: 부모인 20px의 2배 = 40px */
.child-em {
font-size: 2em;
padding: 1em; /* 자기 자신의 폰트 크기(40px)만큼 패딩 */
}
/* 2. rem 사용: 루트인 16px의 2배 = 32px */
.child-rem {
font-size: 2rem;
padding: 1rem; /* 루트 폰트 크기(16px)만큼 패딩 */
}
</style>
<div class="parent">
부모 (20px)
<div class="child-em">나는 em (40px)</div>
<div class="child-rem">나는 rem (32px)</div>
</div>
📋 em vs rem 핵심 비교표
| 구분 | em | rem |
| 기준점 | 자신 혹은 부모의 font-size | **<html>**의 font-size |
| 특징 | 중첩될수록 크기가 누적됨 | 페이지 어디서나 동일한 기준 |
| 예측 가능성 | 낮음 (복잡한 구조에서 계산 어려움) | 높음 (항상 루트 기준) |
| 주요 용도 | 요소 내부의 비례적인 간격 조정 | 전체적인 폰트 및 레이아웃 크기 |
학습 정리
- **rem**을 사용하면 사용자가 브라우저 설정에서 글자 크기를 키웠을 때 웹사이트 전체가 그에 맞춰 유동적으로 변하므로 웹 접근성에 좋습니다.
- 실무에서는 계산의 편리함을 위해 **rem**을 기본 단위로 사용하고, 버튼의 여백처럼 글자 크기에 딱 붙어서 변해야 하는 부분에만 **em**을 섞어서 씁니다.
상대 단위의 두 주인공인 em과 rem의 차이를 완벽히 이해하셨습니다!
'CSS' 카테고리의 다른 글
| Media query (0) | 2026.02.20 |
|---|---|
| RWD Image (0) | 2026.02.20 |
| Flexbox (0) | 2026.02.20 |
| Flex Container property (0) | 2026.02.20 |
| Flex Items property (0) | 2026.02.20 |