px
- px은 고정적인 단위이지만, 전세계의 1cm 같듯이 모든 1px이 같은 것은 아니다.
- 픽셀은 모니터 해상도에 따라 고정적인 크기로 설정된다.
- 모니터가 바뀌지 않는 한, 브라우저에서는 절대적인 고정값으로 한번 설정된 크기는 변하지 않게 되므로 반응형에 적합하지 않다.
- 반응형 웹 구현이 아닐 때 사용하는 것을 추천한다.
em
- 가변적인 단위
- em 은 이 단위가 적용된 엘리먼트의 글자 크기에 비례한다.
- 상위 요소의 폰트 사이즈를 상속 받을 수 있다.
- px 보다는 반응형에 적합하지만, 상위 요소의 사이즈가 바뀌거나 뎁스가 깊어질수록 사이즈를 관리하기 어렵다.
rem
- 가변적이면서도 비교적 관리하기 수월한 폰트 사이즈.
- 상위 요소가 아닌 최상위 엘리먼트를 기준으로 가변한다.
em 이란 무엇일까
픽셀에 대해서 설명이 굉장히 길었는데, em 과 rem 의 경우엔 모두 픽셀과 연관이 있기때문에 픽셀에 대해서만 제대로 알아두면 나머지 단위는 상대적으로 편하게 익힐 수 있다.
em 은 이 단위가 적용된 엘리먼트의 글자 크기에 비례한다.
div { width: 2em; }
다음과 같이 em 을 적용하고 각 예제를 살펴보자.
div 의 너비는 40 px 이 되는데 이는 해당 엘리먼트의 글자 크기가 이미 20 px 로 설정되어 있기 때문이다.
em 은 적용되어 있지만 글자 크기가 적용되어 있지 않아서 부모의 값을 받아오는 경우엔(font-size 는 상속형 속성이다) 부모의 글자 크기 15 px 을 물려받아 자식(div) 의 글자 크기가 “먼저” 적용되고, 그 후에 em 에 의해 너비가 계산된다.
em 에 대한 기본 개념은 이게 끝일만큼 간단하다. 픽셀에 비해선 상대적으로 더욱 유연하게 처리할 수 있어서 조건에 맞게 length 를 조절할 수 있다.
개인적으로는 em 을 그다지 추천하지 않는다. 가장 큰 이유는 퍼블리싱을 하다보면 디자인의 변경 또는 요구사항 등 기타 여러가지 이유로 인해 글자 크기나 기타 요소들이 바뀔 만한 상황이 비일비재한데, em 의 가장 큰 단점은 하필 자기 자신의 글자 크기를 참조하기 때문에 em 을 사용하는 다른 속성 역시 글자 크기에 영향을 받을 수 밖에 없다는 점이다. 글자 크기는 또 상속이 기본 속성이라서, 나의 글자 크기가 변하지 않더라도 부모의 글자 크기가 변하면 또 복잡하게 일이 흘러갈 수도 있다. 그래서 필요한 곳에서만 사용하는 것을 추천한다.
rem 이란 무엇일까
rem 역시 em 과 마찬가지로 글자 크기에 따라 비례되는 속성인데, em 과의 차이점은 rem 은 오직 html 태그의 글자 크기만 참조한다. 다른 모든 태그의 글자 크기는 신경쓰지 않는다.
div { width: 2rem; }
이렇게 너비를 rem 으로 지정한다면 다음과 같이 계산된다.
em 에 비해선 매우 간단하다.
em 역시 마찬가지지만 rem 을 사용할 때는 글자 크기를 참조하다보니 계산하기 쉽게 참조 대상의 글자 크기를 10 픽셀로 맞춰놓고 진행하는 경우가 많다. html 태그의 경우, 브라우저 기본 설정 기준에서 기본 16 픽셀을 갖고 시작하는데 여기에 62.5% 를 곱해주면 10 픽셀로 맞춰놓고 시작할 수 있다.
html { font-size: 62.5%; }
이러면 html 은 10 픽셀로 맞춰지게되고 하위 태그에서 rem 을 사용하는 경우 10 배수로 계산하면 되니 훨씬 편하다.
정리
CSS 를 다룰 때 많이 접하게되는 세 가지 길이(length) 단위를 알아봤다. 그 중 em 과 rem 은 글자 크기를 참조하는 독특한 성질이 있었고, 글자 크기는 픽셀을 기반으로하는데 이 픽셀이라는 것이 브라우저에서 어떻게 계산되어 사용되는 값인지도 같이 살펴봤다.
어떤 단위가 제일 좋다 라고 말하긴 힘들다. 프로젝트에 맞게 알맞은 단위를 사용해서 최대한 유지보수가 용이하고 가독성이 좋은 코드를 생산해내는 것이 좋겠다는 생각이다.