em vs rem

CSS에서 em과 rem의 차이를 명확히 알아봅시다.

 

em과 rem은 상대 단위입니다.

 

상대단위란, 말 그대로 상대적인 단위를 의미합니다. 고정되지 않고 기준에 따라서 바뀔 수 있는 길이를 나타내는 단위를 말합니다.

반대로, 절대 단위란 일상생활에서의 1cm와 같이 정해지면 절대 변하지 않는 단위를 말합니다.

 

상대단위: em, rem, %, vw, vh

절대단위: px(1px = 0.02645833cm)

 

픽셀(px)은 웹디자인이나 프론트엔드 개발을 하다보면 자주 사용하는 단위입니다. 하지만 px를 사용하는 것은 웹의 접근성(Accessibility)를 저해시킵니다. 브라우저마다 기본 font-size가 존재합니다.(보통 16px) 브라우저에는 사용자별로 기본 font-size를 지정하는 기능이 있고, 사용자가 기본 font-size를 20px으로 설정하면 모든 글씨의 크기를 그에 따라 증가시켜야합니다. 하지만 px단위로 설정한경우 브라우저를 통한 사용자 설정값이 반영되지 않습니다. 따라서 픽셀을 사용할 경우 사용자의 사용성을 떨어뜨리고 웹 접근성을 저해시키므로 웹에서 px단위를 쓰는 것은 좋지 않습니다.

 

이 글의 주제인 상대단위인 em과 rem의 기준 또한 font-size입니다. em과 rem은 font-size 속성 값에 비례해서 결정됩니다.

 

이 둘의 차이점은 정확이 어디에 있는 font-size 속성 값인지에 따라 차이가 발생합니다.

 

우선 가장 상위 태그인 html태그에 font-size를 설정합니다.

 

html {
    font-size: 16px;
}

 

그 후에 div태그에 font-size를 다른 값으로 설정합니다.

 

div {
    font-size: 20px;
    width: 10em; /* 200px */
}

 

em의 경우 해당 단위가 사용되고 있는 요소의 font-size를 기준으로 계산됩니다. 위의 예제에서는 10em이므로 20 * 10 = 200px이 됩니다.

 

div {
    font-size: 20px;
    width: 10rem; /* 160px */
}

 

rem은 160px로 계산되었습니다. rem에서 r은 root, 즉 최상위 요소의 font-size 속성 값을 의미합니다. HTML문서에서 최상위 요소는 html태그이기 때문에 rem은 html 태그의 font-size 속성 값을 기준으로 결정됩니다. rem단위를 사용하는 순간 해당요소의 font-size속성은 중요하지 않게 됩니다.

 

많은 CSS가이드들이 em을 사용해야만 하는 타당한 이유가 없는 경우라면 가급적 rem을 우선적으로 쓰도록 권고하고 있습니다. em을 사용하게 될 경우 실제 몇 px로 변환될지 예측하지 못하는 경우가 많아지기 때문에 em을 사용해서 스타일링된 요소의 경우 재사용이 어렵고 유지보수가 힘들어집니다.

 

어떻게 활용할까?

기본 폰트를 10px로 잡는것은 rem을 사용하는 사람들에게 일반적인 세팅이라고합니다.  단순히 숫자를 10으로 나누기만 하면 픽셀 값을 rem으로 빠르게 변환할 수 있기 때문이죠. 

 

rem을 활용하면 media query를 통해서 반응형 웹사이트를 만들 때 가장 상위 태그인 html태그의 font-size값만 변경하는것으로 웹사이트 전체의 font-size를 바꿀 수 있기 때문에 매우 유용하게 사용할 수 있습니다.

 

 

추가적으로 어떤 컴포넌트를 개발할 때 가장 상위요소에 rem을 먹여놓으면 아래에서 em을 사용하더라도 스타일이 꼬일 일이 적을 것입니다. 왜냐면 em은 자신의 font-size가 없으면 한칸씩 거슬러 올라가는데 한 컴포넌트 최상단에 font-size를 정의하고 관리한다면 스타일을 통제할 수 있을 것입니다.

 

참고

https://www.daleseo.com/css-em-rem/