em과 rem

CSS에서 px 외에도 자주 쓰이는 단위가 있습니다.

바로, em과 rem입니다. 반응형 웹 디자인이 유행하면서 해당 단위가 애용되고 있습니다. 이들은 상대 단위 라고 불립니다.

상대 단위

상대 단위는 기준이 있고, 유동적으로 바뀌는 길이를 나타냅니다.

각 부분 별 퍼센트를 나타내는 % 도 있고, 화면 상의 너비나 높이를 나타내는 vw, vh 도 있습니다.

em과 rem의 기준점은 그렇다면 무엇일까요? CSS에서 각 font-size의 값에 따라 결정됩니다. 브라우저에서는 em과 rem을 보고 계산되어 화면에 그리게 됩니다.

em vs. rem

그렇다면, em과 rem의 차이를 한 번 살펴봅시다.

• rem rem에서의 r은 root 를 뜻합니다. 최상위 요소(root: html)의 font-size에 따라 값이 뼌한다고 보면 됩니다.
  
• em em에서는 해당 단위가 사용되고 있는 요소의 font-size 속성 값이 기준이 됩니다. 여러 상위 요소를 가지고 있을 때 계산이 어렵기 때문에 계산이 복잡할 수 있습니다.
  

em과 rem 혼용하기

em 보다는 가급적 rem을 우선적으로 사용하는 것이 위에서 언급한 문제 때문에 권장 됩니다. 하지만 상대적인 font-size를 여러 개 사용하고 싶을 때 두 가지를 혼용할 수 있습니다.

아래에서의 예를 봅시다.

.example {
    margin-right: 0.2em;
    font-size: 3rem;
}

현재 html 문서의 글자 크기의 3배가 example의 크기가 됩니다. 여기서의 margin-right는 이 3배가 된 example의 0.2배가 된다는 뜻입니다.