폰트 사이즈 등 css에서 크기를 조정할 때 절대적인 단위로 px를 사용한다. 그러나 px사용에는 다음과 같은 문제가 존재한다.
문제
Problem 1
웹 브라우저 창의 크기를 늘였다 줄였다 할 때, 즉 브라우저 창의 크기를 변경함에 있어 컨텐츠의 크기가 고정된 값으로 유지됨.
Problem 2
사용자가 브라우저 세팅에서 폰트 사이즈(Very small, Medium, Large...)를 바꿔도, 전혀 적용되지 않는다.
절대적인 단위를 사용하는 것은 위와 같은 문제가 따른다.
해결방법
그래서,대부분의 웹 페이지는 사이즈를 지정할 때 픽셀을 단위로 사용하기 보다는 부모의 80%를 적용하는 등의 상대적인 크기를 가져오는 방식을 사용한다. 단위를 % 등으로 하게 되면, 브라우저의 크기가 변경됨에 따라 컨텐츠의 사이즈가 반응하여 변하게 된다.
지금부터, 웹 페이지에서 크기를 표현하는데 있어 지향해야 할 상대적인 크기 unit에 대해 알아보자.
기본적으로 브라우저에서 html에 할당되는 폰트 크기는 16px이다. 따로 폰트 사이즈를 지정하지 않는 이상 16픽셀로 지정이된다.
<div class="parent">
Parent
<div class="child">
Child
</div>
</div>.parent{
font-size: 8em;
}
.child{
font-size: 0.5em;
}em: em 을 단위로 사용하면, 브라우저의 기본 폰트 크기인 16px * 8의 크기로 폰트 사이즈를 정해진다. 따라서 parent의 경우 128픽셀의 크기로 창에 띄워진다. child의 경우, 부모인 128px * 0.5 즉 64px의 크기로 창에 띄워지게 된다.
em 이란, 부모의 크기에 따라 조정되는 값이다. 즉 em은 부모의 폰트사이즈를 곱한 값으로 계산이 된다. em 대신 % 를 써도 되는데, 이는 em과 %모두 부모 요소에 따라 값이 결정되기 때문이다.
.parent{
font-size: 800%;
}
.child{
font-size: 50%;
}rem : em과 비슷한데, 부모에 따라 크기가 조정되는 것이 아니라 root에 따라 폰트 사이즈가 결정된다. 루트는 브라우저에서 폰트의 디폴트 값인 16px을 기준으로 바뀌게 되는 것이다.
정리
em은 부모 요소에 의해 상대적으로 사이즈가 결정되며, rem은 루트크기에 의해 상대적으로 사이즈가 결정된다. 이런 상대적인 유닛들을 사용함으로써, 좀 더 responsive한 웹 사이트를 만들 수 있게 된다.
