[CSS] rem과 em의 차이

💡 tl;dr

---

• CSS의 em과 rem 단위의 정의
• em과 rem의 차이점 및 활용

em과 rem은 무엇인가?

---

• em과 rem 모두 길이가 유연한 가변 단위로 크기 지정시 어디에나 사용 가능하다.
• 디자인에 설정된 폰트 크기에 따라 브라우저에 의해 픽셀값으로 변환된다.
• px값은 브라우저에서 절댓값으로 인식한다

em과 rem의 차이점

---

차이점을 알아보기 전에 em과 rem이 실제 어떻게 적용되는지 알아야 한다.

어떻게 rem 단위가 픽셀(Pixel)값으로 변환되나

• rem 단위로 변환된 픽셀 크기는 페이지 최상위(root) 요소(html 요소)의 폰트 크기가 기준이 된다.
• 이 최상위 요소의 폰트 크기에 rem 단위로 지정한 숫자를 곱한 값이 마지막 변환된 값이 된다.

em 단위가 픽셀값으로 변환되는 공식

• em 단위의 픽셀값은 스타일을 지정한 요소의 폰트 크기를 곱한 값이 된다.

[em 요소의 중요 사항]

• em 단위가 상위 요소의 폰트 크기와 직접 연관되어 있다고 잘못 알려져 있다.
• W3 명세서의 의하면 실제 사용된 요소의 폰트 크기와 직접 연관되어 있다.
• 상위 요소의 폰트 크기가 em 값에 영향을 줄 수는 있지만, 이는 오로지 스타일 상속 때문이다.

em 단위에 미치는 스타일 상속의 영향

---

• 모든 요소는 상위 요소로부터 폰트 크기를 상속 받기 때문에 em 단위 계산이 복잡할 수 있다.
• 보통 em 단위가 사용된 요소는 어떤 상위 요소로부터 폰트 크기를 상속 받았는지 알기 힘들다.
• 이런 복잡함을 피하려면 오로지 폰트 크기로 px 혹은 vw와 같이 상속에 영향을 받지 않는 단위를 일일이 지정해야 한다.

em 상속의 예

[HTML]

<div class="upper">
    <div class="lower">
        <!-- ?? padding size ?? -->
    </div>
</div>

[STYLUS]

.upper
    font-size: 1.25em
.lower
    padding: 1.5em

• 최상위 요소(html)의 font 값(default) : 16px

• upper class div의 font-size 계산 : 16px x 1.25 = 20px

• lower class div의 padding 계산 : 16px x 1.25 x 1.5 = 30px

[lower div에 font-size(em) 추가]

[STYLUS]

.upper
    font-size: 1.25em
.lower
    font-size: 1.2em
    padding: 1.5em

• lower class div의 padding 계산 : 16px x 1.25 x 1.5 x 1.2 = 36px
• 상위 요소가 더 많아질수록 계산은 복잡해진다.

[lower div에 font-size(px) 추가]

[STYLUS]

.upper
    font-size: 1.25em
.lower
    font-size: 14px
    padding: 1.5em

• lower class div의 padding 계산 : 1.5 x 14px = 21px
• px단위를 명시하면 상위 요소 상속을 걱정하지 않아도 된다.

브라우저 설정이 HTML 요소의 폰트 크기에 미치는 영향

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

[중요 사항]

• html요소의 폰트 크기는 고정값을 지정하지 않았다면 브라우저에 설정된 값을 상속받는다.

• html요소에 지정된 폰트 크기가 직접 rem값을 결정짓기도 하지만, 브라우저 설정값에서 전해졌을 수도 있다.

• 브라우저에 지정된 폰트 크기 설정값은 디자인에 사용된 모든 rem 단위의 값에 영향을 주며, 상속의 영향을 받는 모든 em 단위도 마찬가지다.

[브라우저 설정이 em 단위로 설정된 HTML 폰트 크기에 미치는 영향]

• html요소에 em기반의 폰트 크기를 지정했다면, 변환된 픽셀값은 브라우저에 지정된 폰트 크기의 배수가 된다.

• 만약 html 요소의 font-size 값이 1.25em로 지정되었다면, 최상위 요소의 폰트 크기는 브라우저에 설정된 폰트 크기의 1.25배가 된다.

• 이때 브라우저의 폰트 크기가 16px로 설정되어 있다면, 최상위 요소의 폰트 크기는 20px이 된다.

  • 계산 : (1.25 x 16 = 20)

em과 rem 사이의 차이점 요약

• rem단위의 픽셀값 변환은 html요소의 폰트 크기에 따라 결정된다. 또 이 폰트 크기는 상속에 구애를 받지 않는 절대 단위를 지정해서 직접 덮어씌우지 않았다면, 브라우저에 설정된 폰트 크기를 그대로 상속받게 된다.

• em 단위의 픽셀값 변환은 사용된 요소의 폰트 크기에 따라 결정된다. 이 폰트 크기 또한 상속에 구애를 받지 않는 절대 단위를 가지고 명시적으로 덮어씌우지 않았다면, 상위 요소로부터 상속의 영향을 받는다.

왜 rem 단위를 써야 하는가

---

• 요소의 상속 특성에 상관없이 일관된 크기를 돌려준다.
• 사용자가 설정한 폰트 크기에 따라 사이트에 배치된 모든 구성 요소가 적절하게 반응하는 길을 제공한다.
  • 브라우저의 기본 폰트 크기 설정에따라 가변 텍스트 요소를 활용하여 사이트 레이아웃을 구성할 수 있다.

• rem기반 레이아웃에서 html요소의 font-size로 고정된 px단위를 지정하는 것은 피해야 한다.
• 이는 사용자가 브라우저에 설정해 놓은 폰트 크기를 완전히 무시하게 만드는 일이다.
• html 요소의 폰트 크기를 바꾸고 싶다면 em이나 rem으로 지정해야 브라우저 폰트 비율이 유지된다.

왜 em 단위를 써야 하는가

---

• html 요소 말고도 다른 요소의 폰트 크기에 따라 변하는 특성이 있다.
• 디자인 요소가 지닌 특별한 상황에 따라 변동성이 요구될 때 사용하면 좋다.

그러나 em 단위의 변동 상황을 늘 관리하기 힘드므로 꼭 필요할 때만 사용해야 한다.

실제 활용

---

em 단위를 써야할 때

• 최상위 요소를 제외한 특정 요소의 font-size를 기준으로 그 크기가 바뀌어야 하는 곳.
• 어느 한 요소의 크기를 정할 때 해당 요소가 기본 폰트 크기로 지정되어 있지 않았을 때.
• em 사용시 상속에 따른 애매한 상황을 피하고 크기가 대칭적으로 변할 수 있도록, 지정한 요소의 폰트 크기는 rem 단위를 사용해야 한다.

웬만하면 폰트 크기로 em 단위의 사용은 피하자.
보통 rem 단위를 쓰면 디자인을 관리하기에 더 편하다.

rem 단위를 써야할 때

• em 사용 예시를 제외하고, 브라우저에 설정된 폰트 크기에 따라 그 크기가 변해야 하는 모든 곳.
• 일반 높이, 너비, 패딩, 마진, 테두리 너비, 대부분의 폰트 크기, 그림자 등등 기본적으로 레이아웃의 모든 부분이 해당.

한 마디로, 크기가 변해야 하는 곳이라면 rem 단위를 쓰는게 좋다.

em과 rem 모두 쓰지 말아야 하는 곳:

[다중 칼럼 레이아웃의 너비]

• 레이아웃의 다중 칼럼은 보통 %기반의 단위를 써서 예상치 못한 화면 크기에도 유동적으로 반응할 수 있도록 해야 한다다.
• 칼럼이 하나일 경우에도 일반적으로 max-width에 rem 값을 지정해 놓아도 원만히 작동한다.

• 예시

.container {
    width: 100%;
    max-width: 75rem;
}

이렇게 하면 칼럼의 크기는 유동적으로 변하지만, 동시에 그 안에 있는 글이 읽기 불편할 정도로 너무 넓어지는 것도 막을 수 있다.

[요소의 크기가 절대 변하면 안 되는 상황일 때]

• 간혹 크기가 변하는 것을 막기 위해 고정된 값을 지정해야 하는 상황.
• 해당 요소의 크기가 변할 경우 레이아웃이 망가져 버릴 때.

하지만 이런 경우는 별로 없으므로, px 단위를 꺼내 들기 전에 정말로 필요한 것인지 한 번 더 검토해 봐야한다.

총정리

---

• 디자인에 쓰인 rem과 em 단위는 폰트 크기를 기준으로 브라우저에 의해 픽셀값으로 변환된다.
• em 단위는 지정된 요소의 폰트 크기를 기준으로 한다.
• rem 단위는 html 요소의 폰트 크기를 기준으로 한다.
• em 단위는 모든 상위 부모 요소로부터의 폰트 크기를 상속받으면서 영향을 받을 수 있다.

• rem 단위는 브라우저에 설정된 폰트 크기를 상속받는 특성이 있다.

• em 단위는 최상위 요소에 지정된 폰트 크기 말고, 다른 특정 요소의 폰트 크기에 따라 그 크기가 변해야 하는 곳에 사용.

• rem 단위는 em 단위를 쓸 필요가 없고, 또 브라우저의 폰트 크기 설정에 따라 그 크기가 변해야 하는 곳에 사용.
• 폰트 크기 지정을 비롯해서 꼭 em 단위를 써야 하는 곳이 아니라면 rem 단위를 사용.
• 다중 칼럼 레이아웃의 너비에는 em 이나 rem 말고 %를 써야한다.
• 만약에 크기가 변할 경우 해당 요소의 레이아웃이 깨지는 걸 막을 수 없다면 em과 rem 모두 쓰면 안된다.

참고

해당 글은 “종합 안내: Rem 그리고 Em, 언제 써야 할까”를 다시 요약한 글입니다.