[CSS] em과 rem 비교 (feat. 브라우저 기본 설정 폰트 크기)

1)공통

em과 rem 단위를 쓰면 디자인이 유연해지면서 고정된 크기에만 머무는 게 아니라 구성 요소의 크기를 늘리고 줄이는 게 가능해집니다. 브라우저 사용자는 전체 사이트의 크기를 조절해 가면서 읽기에 가장 적합한 환경을 손수 구성할 수도 있습니다.

 

2)em 단위의 한계 (연쇄 상속)

 

일반적으로 폰트 크기는 px 혹은 vw와 같이 상속에 영향을 받지 않는 단위를 지정해주지 않는 한 자동으로 상위 요소로부터 그 값을 상속 받는다. 그런데 이 상속으로 인해 em 단위를 가지고 작업을 할 때 복잡한 상황에 처할 수 있다.

 

em 단위는 사용된 요소의 폰트 크기에 따라 결정됩니다. 그런데 사용된 요소의 폰트 크기는 상위에 있는 요소로부터 폰트 크기를 상속 받았을 수도 있고, 그 상위 요소도 마찬가지로 그 위의 상위 요소로부터 폰트 크기를 상속 받았을 수 있는 바, 결국  모든 상위 요소의 폰트 크기로부터 연쇄 영향을 받는다.

 

3)rem 단위로 극복 (단일 상속) 

 

rem 단위는 위 상속 특성에 상관없이 html 요소의 폰트 크기에 따라 결정됩니다. 

 

이 때  html 요소의 글자 크기는 고정 값으로 지정되어 직접 rem 값의 기준이 될 수도 있지만 사용자가 설정한 브라우저의 기본 글자 크기를 상속 받아 rem 단위의 기준이 될 수도 있다. 즉 후자로 인해 사용자가 설정한 브라우저의 기본 폰트 크기에 따라 사이트 레이아웃을 적절히 조정할 수 있다.

 

참고로 디자이너가 rem 기반 레이아웃을 구현하면서 html 요소의 font-size로 고정된 px 단위를 지정해서 작업한 경우도 있는데 이렇게 해놓으면 사용자가 브라우저에 설정해 놓은 폰트 크기를 html 요소가 아예 무시하게 만드는 일이라서 되도록 삼가야 할 방법입니다. 사용자 설정을 무시해버리면 사용자로부터 최적화된 콘텐츠 해석의 환경을 갖추도록 하는 기능을 아예 빼앗아 버리기 때문입니다.

 

대신 그래도 html 요소의 폰트 크기를 바꾸고 싶다면 html 요소의 폰트 크기를 px 단위가 아닌 em이나 rem 값으로 지정해 놓아서 사용자가 지정한 브라우저 폰트 크기와 일정한 비율로 계속 유지될 수 있도록 해야 합니다. 이렇게 하면 사용자의 브라우저 설정값이 가진 효과도 계속 유지될 수 있습니다.

 

4)요약

 

폰트 크기로 em 단위를 쓰지 말고  
브라우저에 설정된 폰트 크기에 따라 그 크기가 변해야 하는 곳에는 rem 단위를 쓰자.

 

5)기타 요약

 

• 디자인에 쓰인 rem과 em 단위는 폰트 크기를 기준으로 브라우저에 의해 픽셀값으로 변환됩니다.
• em 단위는 지정된 요소의 폰트 크기를 기준으로 합니다.
• rem 단위는 html 요소의 폰트 크기를 기준으로 합니다.
• em 단위는 모든 상위 부모 요소로부터의 폰트 크기를 상속받으면서 영향을 받을 수 있습니다.
• rem 단위는 브라우저에 설정된 폰트 크기를 상속받는 특성이 있습니다.
• em 단위는 최상위 요소에 지정된 폰트 크기 말고 다른 특정 요소의 폰트 크기에 따라 그 크기가 변해야 하는 곳에 사용하십시오.
• rem 단위는 em 단위를 쓸 필요가 없고 브라우저의 폰트 크기 설정에 따라 그 크기가 변해야 하는 곳에 사용하십시오.
• 폰트 크기 지정을 비롯해서 꼭 em 단위를 써야 하는 곳이 아니라면 rem 단위를 사용하십시오.
• 다중 칼럼 레이아웃의 너비에는 em 혹은 rem을 쓰진 마십시오 - 대신 %를 쓰세요.
• 만약에 크기가 변할 경우 해당 요소의 레이아웃이 깨지는 걸 막을 수 없다면 em과 rem 모두 쓰지 마세요.

6)참고 URL

 

종합 안내: Rem 그리고 Em, 언제 써야 할까