relative to parent element 로 부모 태그에 지정된 폰트 사이즈를 기준으로 자식 요소에 지정된 em
을 곱한 값이다.
/* 기본 html font-size는 16px */
div.parent {
font-size: 8em; /* 16px * 8 = 128px */
}
div.child {
font-size: 0.5em; /* 128px * 0.5 = 64px */
}
/* 부모 font-size: 16px 이면 자식 font-size: 8em -> font-size: 128px 이다. */
/* 부모 font-size: 128px 이면 자식 font-size: 0.5em -> font-size: 64px 이다. */
/* (부모 font-size) * (자식 X em) = (자식 font-size) */
/* 1em == 100%, 8em == 800% */
/* html font-size: 100% 로 변경하면 em으로 지정된 자식 요소들의 폰트 크기를
유동적으로 변경할 수 있다. */
relative to root element 로 rem
단위를 쓰면, 변환된 픽셀 크기는 페이지 최상위(root) 요소, 그러니까 html 요소의 폰트 크기가 기준이 됩니다. 이 최상위 요소의 폰트 크기에다 rem 단위로 지정한 숫자를 곱한 값이 바로 마지막 변환된 값입니다.
html {
font-size: 16px; /* 기본 html font-size는 16px */
padding: 10rem;
}
div {
font-size: 10rem; /* font-size: 160px */
/* padding: 160px */
}
<aside>
💡 *letter-spacing
, line-height
의 em은 부모 태그가 아닌 해당 태그의 font-size 의 크기를 기준으로 em를 곱한 값이다.
즉, 간격이 해당 태그의 글꼴 크기를 기준으로 유지됩니다.*
</aside>
현재 보여지는(Viewport) 브라우저의 너비 만큼 유동적으로 지정하는 것을 의미한다.