상대 단위
고정적이지 않고 어떤 기준에 의해 변경되는 단위
대표적으로 em, rem, %, vw, vh 단위 등이 있다.
절대 단위
어떠한 상황에서든 변하지 않고 고정적인 길이를 갖는 단위
대표적으로 px 단위가 있다.
em과 rem의 공통점
font-size의 크기에 따라 변하는 상대 단위라는 점이다.
예를 들어, font-size: 10px 인 경우
- 1em → 1 * 10px = 10px
- 2em → 2 * 10px = 20px
...
em과 rem의 차이점
두 단위 모두 font-size에 영향을 받는다고 했는데 어느 요소의 font-size인가에 대한 차이가 있다.
em은 해당 em 단위가 적용된 요소,
/* em 단위가 적용된 div 요소의 font-size 값을 기준으로 한다. */
div {
width: 10em; /* 200px */
font-size: 20px;
}rem은 html 요소의 font-size 속성 값이 기준이된다.
html {
width: 10rem; /* 200px */
font-size: 20px;
}만약 em 단위를 사용하는데 해당 요소에 font-size 속성이 없다면 상위 요소 중 font-size가 적용된 요소의 것을 기준으로 한다.
<div>
<header>
<blockquote></blockquote>
</header>
</div>div {
font-size: 10px;
}
blockquote {
width: 10em; /* 100px */
height: 200px;
background-color: hotpink;
}
em은 변수가 많아서 특별한 이유가 있지 않으면 em보단 rem 사용을 권장한다.
