[CSS] em 과 rem

HP :) 😃·2022년 4월 5일

안녕하세요 hp입니다 :)

저는 최근에 프론트엔드 관련하여 많은 교육들을 찾아 보았고 패스트캠퍼스 , 엘리스 SW 엔지니어 트랙이라는 교육을 알게되어서 지원해 합격하게 되었고 그 중 엘리스 트랙의 코치진님들과 교육 과정이 맘에 들어 교육을 듣게 되었습니다.
앞으로 올라오는 포스팅의 대부분의 글들은 수업시간에 배웠던 내용 중에 몰랐던 부분이나 헷갈렸던 부분을 정리하는 방식으로 진행해 보겠습니다.

그래서 오늘은 CSS 파트의 em과 rem에 대해서 자세히 공부해 보도록 하겠습니다.

📚 개념

사실 저는 이때까지 주로 고정값인 px 위주로 사용했었습니다. 하지만 최근 들어 반응형 웹디자인등이 대두되면서 em과 rem이 점점 더 많이 사용되고 있어 동작 방법을 알고 제대로 사용해보도록 하겠습니다.

em

먼저 em은 해당 단위가 사용되고 있는 요소의 font-size 속성값을 기준이 됩니다.

작성된 예시를 통해 보겠습니다.

body {
  font-size: 10px;
}

div {
  font-size: 20px;
  width: 15em; /* 20px * 15 = 300px */
  height: 10em; /* 20px * 10 = 150px */
  border: solid 1px black;
}

em을 사용했을 경우 위와 같이 자기 자신의 font-size를 기준으로 width height 값을 설정하게 됩니다.

만일 자기 자신의 font-size가 없을 경우에는 그 부모의 font-size를 이용합니다.

HTML

<body>
  <div class="parent">
    <div class="div"></div>
  </div>
</body>

CSS

body {
  font-size: 20px;
}

.parent {
  font-size: 10px;
}
.div {
  width: 15em; /* 10px * 15 = 150px */
  height: 10em; /* 10px * 10 = 100px */
  border: solid 1px black;
}

만일 그 위에 부모도 font-size가 없다면 브라우저 기본 글자 크기인 16px을 기준으로 값이 설정됩니다.

rem

rem은 최상위 요소의 font-size 속성 값이 기준이 됩니다. 즉 , HTML에서 최상위 요소인 html 태그를 말합니다.

html {
  font-size: 20px;
}

body {
  font-size: 20px;
}

.parent {
  font-size: 10px;
}
.div {
  width: 15rem; /* 20px * 15 = 300px */
  height: 10rem; /* 20px * 10 = 200px */
  border: solid 1px black;
}