css 단위 rem, em
css 를 사용하다 보면 만나게 되는 단위인 rem 과 em 에 대해 정리합니다.
em
em 은 현재 font-size를 정의합니다.
body {
font-size: 14px;
}
div {
font-size: 1.5em; // 14px * 1.5 = 21px
}
위와 같이 설정을 한다면 body안의 폰트는 모두 14px 정의 될 것입니다.
그런데 만약 div 안의 font-size 값은 어떨게 될까요?
정답: 21px
이제 아래 내용을 봅시다.
<body>
<div>
A <!-- 14 * 1.5 = 21px -->
<div>
B <!-- 21 * 1.5 = 31.5px -->
<div>
C <!-- 31.5 * 1.5 = 47.25px -->
</div>
</div>
</div>
</body>
이제 em은 이해가 된 듯 합니다.
rem
그럼 div 테그 안의 font-size를 고정하고 싶을 경우에는 어떻게 해야할까요?
바로 rem 단위를 사용하면 됩니다. rem 에서 r 은 최상위(root)의 의미를 지니고 있습니다.
body {
font-size: 14px;
}
div {
font-size: 1.5rem; // 14px * 1.5 = 21px
}
둘 차이를 JSFiddle 을 통해 손쉽게 확인 가능합니다.