[CSS] em과 rem의 차이

간단히 말해

em은 상위 컴포넌트의 크기를 가져오는 것이고, 

rem은 root 컴포넌트의 크기를 가져오는 것이다.

 

예를 들어 

<div class="first-div" style="font-size: 100px;">
  <div class="second-div" style="font-size: 0.5em;">
      <span style="font-size: 0.5em;">안녕</span>
  </div>
</div>

이렇게 되어 있을 때, 

span의 "안녕" 사이즈는 바로 상위 div인 second-div 클래스의 스타일을 상속받아 오게 된다.

first-div의 폰트 사이즈가 100px 이므로, second-div의 font-size는 first-div(root-div)의 영향을 받아 100*0.5로 50px이다.

즉, span의 폰트 사이즈는 50*0.5로 25px가 된다.

 

하지만 만약, rem을 쓰게 된다면,

<div class="first-div" style="font-size: 100px;">
  <div class="second-div" style="font-size: 0.5rem;">
      <span style="font-size: 0.5rem;">안녕</span>
  </div>
</div>

span의 "안녕" 사이즈는 root div인 first-div 클래스의 스타일을 상속받아 오게 된다.

first-div의 폰트 사이즈가 100px 이므로, second-div의 font-size는 first-div(root-div)의 영향을 받아 100*0.5로 50px이다.

span의 폰트 사이즈 또한 100*0.5로 50px가 된다.

 

요런 차이가 있다.

나는 그래서 보통 rem을 많이 쓰게 되는 것 같당.