rem (Root EM)
rem은 Root EM의 약자로, HTML의 최상위 요소인 <html>의 font-size를 기준으로 상대 크기를 설정하는 단위이다.
- 기준: 항상 <html>의 font-size를 기준으로 한다.
- 글로벌 스타일링에 적합: 문서의 root 크기를 변경하면, rem을 사용하는 모든 요소의 크기가 비례적으로 조정된다.
- 일관성 유지: 요소가 중첩되거나 부모 요소의 스타일에 영향을 받지 않으므로, 예측 가능한 크기 조정이 가능하다.
html {
font-size: 16px; /* Root font-size */
}
h1 {
font-size: 2rem; /* 16px × 2 = 32px */
}
p {
font-size: 1.5rem; /* 16px × 1.5 = 24px */
}
em
em은 현재 요소의 font-size를 기준으로 크기를 설정하는 단위이다. 부모 요소의 font-size를 상속받아 계산되므로, 문맥(Context)에 따라 달라질 수 있는 상대적 단위이다.
- 기준: 현재 요소 또는 부모 요소의 font-size를 기준으로 계산된다.
- 상속에 민감: 부모 요소의 크기에 따라 결과값이 달라지므로, 중첩된 경우 값이 누적될 수 있다.
- 세부적인 조정에 유리: 컨텍스트 기반의 상대 크기 설정이 가능하므로, 특정 요소 내부에서 비율적으로 크기를 조정할 때 유용하다.
body {
font-size: 16px;
}
div {
font-size: 1.5em; /* 16px × 1.5 = 24px */
}
p {
font-size: 1em; /* div의 24px × 1 = 24px */
}'프론트엔드 > html,css' 카테고리의 다른 글
| CSS visibility: hidden, display: none, pointer-events: none의 차이 (1) | 2024.08.20 |
|---|---|
| Inline ,Block , Inline-block (1) | 2024.08.13 |
| CSS 박스 모델( border, border-radius) (1) | 2024.08.09 |
