em, rem 차이

프론트엔드/HTML,CSS

by 호치민 개발자 2023. 5. 22. 20:10

처음 HTML,CSS를 배울때는 막연하게 외우려고 했던 개념인데, 이번에 확실하게 이해했으며, 이를 기록해둔다

즉 최상위 요소를 의미하는 것이다

HTML에서 최상의 요소는 <html>이다.

예를 들어 html 의 font-size 값이 15px 일 경우.

html {
  font-size: 15px;
}

그리고 새로 만든 span의 폰트 사이즈를 5rem으로 하는 경우.

span {
  font-size: 5rem; /* 폰트사이즈는 75px이 된다 */
  }

만약 폰트 사이즈를 px로 정하고 width 값을 em으로 하는 경우.

span {
  font-size: 20px; /* span에서 폰트사이즈는 20px로 고정된다 */
  width: 10em; /* 200px이 된다 */
}

즉 em은 html 최상위에 있는 값보다 바로 연결된 속성 값에 영향을 받는다.

rem은 최상위 값 만을 기준으로 생각할 수 있으므로, 초보 개발자 입장에서 계산이 쉽다.

하지만 만약에 html 요소와 이 span을 사이에 두고 다른 요소들이 많다면?

예를 들어 h1 요소안에 span 이 포함되어 있고, 이 h1 요소의 font-size가 30px으로 정했졌을 경우.

이 h1 은 span의 부모가 될 것이다.

[span의 font-size값이 10em일 경우]

span의 font-size는 부모의 30px을 기준으로 하여 이되서 span의 실제 값은 300px.

[span의 font-size값이 10rem일 경우]

변함없이 html의 15px이 기준이 되므로, span의 실제 값은 150px.

만약 h1의 값이 rem일 경우?

h1{
 font-size: 3rem;
}

span{
 font-size: 2em;
}

이 경우 h1의 값은 3 x 15px = 45px

span은 2 x 45px = 90px 이 된다.

즉 em을 쓰면 초보에게는 값을 예측하기 어려워지는 것이다.