728x90
반응형
CSS에서 사용할 수 있는 단위들은 여러가지가 있는데요
rem, vh, vw, vmin, vmax, ex, ch중 이번 포스팅은 rem만을 알아봅시다.
rem
rem은 root em의 약자입니다.
먼저 rem을 알아보기전 em을 알아볼까요?
<body>
<div class="remClass">remClass</div>
</body>위와 같은 html을 만들었다고 가정해 봅시다.
body {
font-size: 10px;
}
.remClass {
font-size: 1.5em;
}그다음 CSS를 이렇게 만들었다고 가정한다면 어떤값이 em에 포함이 될까요?
계산을 해보면 다음과 같습니다.
body의 font-size인 10px * remClass의 font-size인 1.5
즉 10px * 1.5 = 15px이 적용되는 것이죠. 간단하게 설명을 해보았는데 생각해보면 간단합니다!
여기서 문제!
<body>
<div class="remClass">
remClass1
<div class="remClass">
remClass2
<div class="remClass">
remClass3
</div>
</div>
</div>
</body>이렇게 적어준다면 어떻게 될까요?!
정답은 em은 부모의 값을 가져오는 것이기때문에
remClass1 의 font-size는 15px
remClass2 의 font-size는 15*1.5 = 22.5px;
remClass3 의 font-size는 22.5*1.5 = 33.75px;
이렇게 되어버리죠! 계속해서 커지는 겁니다.
그렇다면 저 값들을 계속해서 커지지않게 하는 방법은 무엇일까요
바로 최상위 바로 root의 font-size 만을 가져와서 em시켜준다면 자식을 아무리 만든다고해도
폰트 사이즈는 그대로겠지요?
body {
font-size: 10px;
}
.remClass {
font-size: 1.5rem;
}em을 rem으로 바꾸어 주었을 뿐인데, remClass1, remClass2, remClass3의 모든 폰트가 똑같아졌습니다!
728x90
반응형