[CSS] 가변 단위 em, rem의 사용

다양한 브라우저의 크기에서 px단위를 사용할 경우 고정크기로 적용되기 때문에
반응형 웹을 만들 때 불편함이 있다.
언뜻 보긴 했지만 적용은 망설였던, px보다는 조금 더 유연한 가변 단위인 em, rem을 알아보자.

em, rem은 설정된 폰트 크기에 따라 브라우저에 의해 픽셀값으로 변환된다.
폰트사이즈를 16px로 지정했을 경우 1em, 1rem은 16px로 변환된다.

그러면 언제 em을 쓰고 언제 rem을 쓰는가?

- rem의 픽셀 단위 변환 기준

rem은 페이지 최상위인 root요소인 html요소의 폰트 사이즈가 기준이 된다.
html에 설정한 폰트크기가 16px이면 10rem은 160px가 된다.

- em의 픽셀 단위 변환 기준

em은 지정한 요소의 폰트 사이즈를 기준으로 한다.
예를들어 div에 font-size를 20px일 경우 10em은 200px이다.

** 지정한 요소의 font-size가 아니여도 CSS특성상 하위 요소가 상위 요소의

font-size를 상속받기 때문에 상위 요소의 폰트 크기가 em값에 영향을 준다.

 

브라우저의 크기에 따라 변하는 rem

기본적으로 브라우저의 폰트 크기는 16px으로 설정되어있지만
사용자 설정에 의해 최소 9px부터 72px까지 변경될 수 있다.

root요소인 html에 폰트크기를 고정값으로 명시해놓지 않으면 브라우저가 가지고 있는

폰트크기로 적용되기 때문에 이 부분을 인지하고 있어야 한다.

그렇다면 html에 폰트크기를 고정값으로 늘 명시해야 할까?
전체적인 디자인 크기를 손쉽게 바꾸기 위해 html에 고정된 px단위의 폰트크기를
명시해 놓고 사용하기도 하지만 (실제로 본적이 있다.)
그렇다면 rem의 본래의 기능을 없애는 거나 마찬가지이다.
대체 방안으로는 html의 폰트 크기도 em이나 rem으로 지정해놓는 방법이 있다.
이와 같이 사용한다면 사용자가 지정한 브라우저 폰트 크기와 일정한 비율로 유지되게 작업을 할 수 있다.

 

- rem단위의 장점

rem단위 사용의 장점은 상속 특성에 상관없이 최상위 요소를 기준으로 
일관된 크기를 제공하며, 사용자가 선택한 폰트 크기에 따라 사이트에 배치된
구성 요소들이 적절하게 반응한다.
즉 rem단위를 쓰면 사용자가 폰트 크기를 늘리더라도 레이아웃이 보존되기 때문에

고정된 크기의 레이아웃에 폰트만 이상한 비율로 배치되는 불상사를 막을 수 있다.

- em단위의 장점

em단위의 장점은 html요소가 아닌 다른 상위요소의 폰트 크기에 따라 변하는 특성이다.
사이트 메뉴의 padding, margin, line-height를 설정할 때 em단위를 사용하는 것이 좋다.

(레이아웃의 너비는 %단위를 사용)

em단위로 설정을 해 놓았다면 메뉴의 폰트 크기가 변할 경우 해당 요소와 하위 요소의
사이즈도 적절한 비율로 변경이 되기 때문이다.

즉 최상위 요소가 아닌 특정 요소의 font-size를 기준으로 비율에 맞추어 변경이 필요 할 때
em단위를 사용하는 것이다. 그리고 그 지정한 요소는 rem단위를 쓰는 것이 좋다고 한다.

 

하지만 남발하는것은 좋지 않으며 목적에 맞게 잘 고려해서 사용 해야 할 듯 하다.

 

 

참고:

https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984