1. 상대 단위란?
상대(relative) 단위란 고정되지 않고, 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위이다. 여기서는 rem과 em를 다룰 것인데, 상대 단위에서 대표적인 것은 %, vw, vh 등이 있다.
반면 절대(absolute) 단위는 어떤 상황에서든 항상 고정된 길이를 나타내는 단위이다. 대표적으로 px, pt를 들 수 있으며, 실생활에서는 cm, inch 등과 같은 것들이 있다.
2. em, rem 공통점
여기서 em과 rem은 둘다 font-size 속석값에 비례해서 결정되는 상대 단위이다. 만약 font-size: 16px 일 경우 다음과 같이 브라우저에서 계산이 된다
- 0.5em = 16px * 0.5 = 8px
- 1em = 16px * 1 = 16px
- 2em = 16px * 2 = 32px
- 3em = 16px * 3 = 48px
3. em, rem 차이점
em과 rem 단위의 기준은 font-size 속성값인데, 어디에 있는 font-size 속성에 따라 차이가 발생한다. em의 경우는 사용되고 있는 요소의 font-size 속성값이 기준이 된다.
근데 rem의 경우는 r은 보통 root를 뜻하는데, 이는 최상위 요소를 font-size 속성값을 의미한다. HTML의 최상위 요소는 <html>이다.
따라서 rem은 html 요소의 font-size 속성값이 기준이 된다.
rem과 em을 사용할 때 진짜 사용해야하는 경우 말고는 rem을 우선적으로 사용하는 것이 좋다. 특히 나같은 초보자에게는 그러하다. em의 경우는 px 변환에 대한 영향을 주는 변수들이 많고, 재사용성이 어려우며, 유지보수가 힘들어질수도 있다.
'HTML & CSS' 카테고리의 다른 글
| Video 속성 (0) | 2024.08.19 |
|---|---|
| title attribute 속성 (0) | 2024.08.19 |
| typography / font-family (0) | 2024.08.19 |
| object-fit: cover, contain (0) | 2024.08.17 |
| aspect-ratio 두 번째 (0) | 2024.08.17 |
