[CSS] em vs rem

em, rem는 CSS의 상대 길이를 지정하는 단위로, 반응형 웹사이트를 만들 때 사용된다.

 

공통점

em, rem 모두 배수로 값을 지정하며, 폰트 크기(font-size)를 기반으로 계산된다.

em, rem은 font-size, padding, margin 등에 사용한다.

 

크기 계산 예시

폰트크기가 16px 일 경우,

• 2rem = (16*2)px = 32px
• 2em = (16*2)px = 32px

 

차이점

둘의 큰 차이점은 어떤 'font-size'를 기준으로 하는가이다.

em

• 'font-size' 기준: 지정된 요소
  (** 주의: 간혹 부모 요소에 의해 영향을 받는 것처럼 보일 수 있는데,
  이는 자식 요소가 'font-size' 값을 부모에게 상속받아서 그런 것이다)
• 부모 요소에 영향을 받을 수 있어 유지 보수에 어려울 수 있음

<style>
    .test {
        font-size: 14px;
        padding: 0.5em; /* (14*0.5)px = 7px */
    }
    
    .test-parent {
        font-size: 16px;
    }

    .test-child1 {
        font-size: 12px;
        margin-top: 1.25em; /* (12*1.25)px = 15px */
    }

    .test-child2 {
        margin-top: 1.25em; /* (16*1.25)px = 20px */
    }
</style>


<div class="test">
</div>
<div class="test-parent">
    <div class="test-child1">
    </div>
    <div class="test-child2">
    </div>
</div>

 

rem

root + em

• 'font-size' 기준: 최상위 요소 (html 요소)
  (최상위 요소를 기준으로 하기 때문에 지정 요소의 font-size에 영향을 받지 않는다.)
• 최상위 요소에 폰트 크기를 지정하지 않으면 브라우저 기본 폰트 크기를 기준으로 잡음
  (** 주의: 사용자가 브라우저 기본 폰트 크기를 변경할 수도 있다.)

<style>
    html {
        font-size: 16px;
    }
    
    .test {
        font-size: 9px;
        margin-top: 1.5rem; /* (16*1.5)px = 24px*/
    }
</style>

<div class="test">
</div>

 

rem, em 사용 시점

언제 rem, em을 사용하는지는 정확한 해답은 없는 것 같다.
(여러 곳에서 조사를 했을 시 각자 사용하는 시점이 조금씩 다른 것같았다.)

디자인의 목적에 따라 적절하게 사용해야한다고 한다.

 

참고한 블로그에서 제시하는 사용 시점은 다음과 같다.

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

 

em

• 해당 요소의 'font-size'가 지정되어 있고, 대칭적으로 구성요소가 변경되길 원할 경우
  (해당 요소의 'font-size'를 변경하면, 해당 요소의 구성요소도 비례하여 크기가 바뀌길 기대)
• 관련 구성요소: margin, padding, width, height, line-height..
• 해당 요소의 'font-size'는 rem 단위를 사용하기를 권장

rem

• em을 써야하는 경우를 제외하고, 크기가 변경되어야하는 모든 요소에 사용
  (브라우저에 설정된 폰트 크기에 따라 크기가 변경되어야 하는 일반 디자인 요소에 사용)
• media queries에서 rem 단위 사용
• 관련 구성 요소: margin, padding, width, height, font-size, shadow, width, height

 

em, rem 둘 다 사용하면 안되는 경우

• 다중 칼럼 레이아웃의 너비: % 기반의 단위 사용
• 요소의 크기가 변하면 안되는 경우: px 단위 사용