EM 단위란 무엇일까? (ft. EM의 유래, REM과 EM의 차이점)

작년 즈음에 em과 rem의 차이점에 대해서 포스팅한 내용이 있습니다.

https://kincoding.com/entry/em%EA%B3%BC-rem%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

em과 rem의 차이점

em과 rem의 차이점 CSS에서는 다양한 단위를 사용하여 요소들의 크기와 위치를 정의합니다. 그 중에서도 em과 rem은 상대적인 단위로, 요소의 크기를 상위 요소에 대한 비율로 정의합니다. 이번 글

kincoding.com

개념도 알고 있고, 적당히 잘 사용하고는 있는데 왠지 가끔씩 헷갈리는 이유가 정확하게 이해를 못하고 있기 때문이란 생각을 가져보게 되었습니다. 그래서 이참에 em의 유래까지 뒤져보면서 정리해두기로 합니다.

문득, em = element라는 단어와 그 유래가 관련이 있는 것인가? 하는 의문이 들었는데, 결론부터 말하자면 아니올시다 였습니다.

그렇다면, em은 도대체 무엇으로부터 유래가 된 것이지?

em : 발음은 [이엠]이 아니라, [엠] 입니다!

em은 HTML/CSS에서 엘리먼트 또는 스페이스 등, 수치 단위가 들어가는 모든 곳에 사용할 수 있게 되는데요, 우리, 특히나 한국 사람들에게는 px이나 % 단위처럼 빠른 이해가 쉽지 않은 단위라는 생각이 듭니다.

먼저, em의 발음은 [엠]인데요, 알파벳 'M'을 지칭하는 말입니다. 읭? 이게 무슨 말일까요?

금속활자 조판 시절로 잠시 돌아가 봅시다

일단은 폰트(font)에 대해서 집중해서 살펴보겠습니다. 지금이야 키보드를 두드리면 되지만, 옛날 옛적에는 금속 활자를 만들어서 조판(組版)을 해서 인쇄를 했더랬습니다. 다른 말로는 식자(植字)라고도 부릅니다. 팔만대장경 같은 것을 떠 올리시면 되겠습니다.

알파벳을 사용하는 영미권에서는 'M'자가 조판의 기준이 되었다고 합니다.

알파벳 'M'의 활자 금속 조각은 대체로 정사각형 형태를 띄게 되는데, 이것이 바로 M이 차지하는 영역(Em Space)가 되는 것이고, 바로 이 것이 다른 글자들의 활자에 대한 기준이 되었다고 합니다.

그래서 em은 기준이 되는 'M'을 지칭하는 규격을 말하고, 1em, 2em, 0.75em 처럼 단위로 사용하게 된 것이라고 합니다.

즉, M은 다른 알파벳 조각에 대해 '상대적인 기준'이 되는 단위였다는 역사를 가지고 있고, 이를 HTML/CSS에서의 단위로 차용하게 된 것입니다. 아, 뭔가 구름이 끼었던 머리가 드디어 맑아지는 느낌이 드는군요.

참고로, HTML/CSS에서의 em은 '부모 엘리먼트'에 대해서 상대적인 크기를 말하게 됩니다.

아래와 같이 p 엘리먼트의 부모인 div 엘리먼트의 font-size가 20px 인 경우, p의 폰트 사이즈를 0.5em을 준다면 폰트 크기는 몇 px이 되는 것일까요?

<body>
    <div style="font-size: 20px">
      em이란 뭘까?
      <p style="font-size: 0.5em">EM은 "Em quad" 또는 "Em space"에서 온 말입니다.</p>
    </div>
 </body>

그렇죠, 20px의 0.5배는 10px이 되는 것입니다.

이러한 상대적인 단위는, 폰트 사이즈 외에도 margin, padding, width, height 등 다양한 속성에 사용될 수 있습니다.

당연히, 반응형 UI를 구성할 때 효과적인 사용을 가져올 수 있겠죠?

그렇다면, rem은 또 무엇인가?

이제 em이라는 개념을 알았으니, rem은 오히려 더 쉽게 이해할 수 있게 됩니다. root + em 이라고 보면 됩니다.

여기서 말하는 root는 html 문서 또는 body에서 정하고 있는 사이즈를 말합니다.

HTML 문서의 root에 별도의 값을 지정하지 않았다면, rem은 16px이 됩니다.

<body>
    <div>
      rem이란 뭘까?
      <p>Root + em을 말합니다.</p>
    </div>
</body>

브라우저에서 F12키를 누르고 개발자 모드에서 확인해봅시다.

body에 스타일을 전혀 주지 않았지만, div와 p 엘리먼트 모두 font-size는 16px로 확인됩니다.

위 코드는 아래 코드와 동일하게 동작합니다.

<body style="font-size: 16px;">
    <div>
      rem이란 뭘까?
      <p>Root + em을 말합니다.</p>
    </div>
 </body>

style="font-size: 16px;" 을 적용하지 않은 상태에서 font-size가 16px로 나타난다는 것은, 어딘가에 default로 그렇게 지정이 되어 있다는 의미겠죠? (style="font-size: 16px;"을 html 엘리먼트에 적용하는 것도 동일합니다)

자, 그러면 코드를 아래와 같이 작성해보겠습니다.

(환경에 따라서, body에서 안 먹고, html에 적용해야만 rem이 동작하는 경우가 있어서, html 엘리먼트에 스타일을 주었습니다.)

<html lang="ko" style="font-size: 40px">
  <body>
    KINcoding
    <div style="font-size: 16px">
      rem이란 뭘까?
      <p style="font-size: 0.5rem">Root + em을 말합니다.</p>
    </div>
  </body>
</html>

위 코드에서 p 엘리먼트의 폰트 사이즈는 몇 px이 될까요?

정답은 20px 입니다. 왜냐하면 문서의 root인 html 엘리먼트의 사이즈를 참조하기 때문입니다.

rem 단위를 사용했기 때문에 바로 위의 부모를 참조하지 않고, root를 상대적으로 참조하는 것입니다.

em과 rem의 차이, 이제 명확해졌죠?

이처럼, 상대적인 크기를 의미하는 em과 rem의 차이를 잘 이해하고, UI를 작업해둔 다면 유지보수 측면에서도 훨씬 더 생산성이 증가할 수 있을 것입니다.

마치며

좋은 공부 방법은 역시나 실습과 반복입니다. 그리고 명쾌하지 않은 부분에 대해서는 계속 의문을 갖는 것이겠습니다.

em은 상대적으로 크기 등을 '상속'해서 처리하는 측면이 유리한 경우에 부모 엘리먼트의 크기를 참조하도록 하고, rem은 문서의 root를 기준 삼아 일관성이 필요한 엘리먼트 들에 대해 활용을 하게 된다면 보다 효율적인 HTML/CSS 코딩을 할 수 있을 것입니다.

즐거운 코딩생활, 즐코딩

KINcoding

저작자표시 비영리 변경금지

'HTML+CSS' 카테고리의 다른 글

비슷한 듯 다른 동작 방식, Alpha Channel과 Opacity의 차이점 (0)	2023.04.06
background 다채로운 기능 한 눈에 살펴보기 (0)	2023.04.05
Hover 버튼을 폼 나게 만들기 (transition + transform 적용) (0)	2023.04.03
Transform - rotate(), scale(), translate(), skew() (0)	2023.03.29
Interactive의 시작, transition 속성 2/2 - timing function (0)	2023.03.24

즐코딩 - KINcoding

EM 단위란 무엇일까? (ft. EM의 유래, REM과 EM의 차이점)