[CSS] em vs rem 사용법과 비교 총정리

 

css에서 조금 더 유연한 크기 지정 단위로 em과 rem을 많이 사용하고 있을 것이다.

그러나 이 단위가 어떤 것을 기준으로 변화하는지, 어디에 무엇을 사용하면 좋을지 헷갈릴 때가 많다.

이번 포스팅에서 이들의 차이점과 적절한 사용법을 정리해보겠다.

 

 

rem

페이지의 최상위 요소, 즉 html 요소의 폰트 크기를 기준으로 변화한다.예를 들어 최상위 요소의 폰트 크기가 16px이라면, 10rem은 160px이 된다.

em

스타일을 지정한 요소의 폰트 크기를 기준으로 변화한다.현재 지정된 요소에 폰트 크기가 지정되지 않았다면, 상위 요소의 폰트 크기를 기준으로 변화한다.예를 들어 한 요소의 폰트 크기가 20px이라면, 10em은 200px이 된다.

 

---

브라우저가 HTML 폰트 크기에 미치는 영향

기본적으로 브라우저의 폰트 크기는 16px로 설정되어 있으며, 이는 사용자에 의해 변경될 수 있다.

최상위에 있는 html 요소의 폰트 크기는 고정적으로 명시하지 않았다면 브라우저에서 설정된 값을 자동적으로 상속 받게 된다.

 

그러므로 브라우저에 지정된 폰트 크기 설정값은 디자인에 사용된 모든 rem, em 단위의 값에 영향을 미친다!

 

---

결론부터 말하자면, 웬만한 상황에선 rem 단위를 사용해주는 게 좋다.

이유는 아래에서 살펴보도록 하자

 

rem 단위를 써야 하는 이유

이 단위가 가진 가장 큰 장점은 요소 상속 특성에 상관 없이 일관된 크기를 돌려주는 것이다. 그러므로 사용자가 설정한 폰트 크기에 따라 사이트에 배치된 모든 구성 요소가 적절하게 반응한다!

이러한 이유 때문에 rem 단위는 사용자가 브라우저 기본 폰트 크기를 어떤 값으로 설정했든 간에, 이에 따른 가변 텍스트 크기에 맞춰 레이아웃이 적절히 조정될 수 있도록 할 때 사용된다.

 

그럼에도 불구하고 em 단위를 써야 하는 상황이 발생할 수 있다

아래의 설명을 통해 살펴보자

 

em 단위를 써야 하는 이유

이 단위의 가장 큰 특징이자 장점은 html 요소 외에 다른 요소의 폰트 크기에 따라 변화할 수 있다는 것이다.

예를 들어 드롭 다운 메뉴의 경우, 보통 두 번째 단계의 메뉴는 첫 번째 단계에 있는 메뉴의 폰트 크기에 영향을 받는다. 이러한 경우 em 단위를 사용해 상위 폰트 크기를 상속 받는다면 유연하게 조절할 수 있을 것이다.

그러나 대부분 웹 디자인에선 이러한 특별한 요소는 잘 없기 때문에, 사실 그닥 쓸 이유는 없다... 이걸 쓰면 사이즈 조정이 더욱 복잡해질 뿐

 

---

결론

rem과 em 모두 상대적인 크기를 조절함으로써 반응형 웹사이트에 유용하게 쓰일 수 있다.그러나 em의 경우 상위 요소와 현재 요소의 사이즈에 모두 영향을 받기 때문에 크기 조정에 복잡할 수 있다. 그러므로 웬만한 상황에서는 최상위 폰트 사이즈의 영향만 받는 rem 단위를 사용하는 것이 더욱 깔끔하고 효율적일 수 있다.