[CSS] 상대단위 rem em

상대단위

px(약 0.0264cm), pt 같이 고정된 절대단위의 값이 아닌 브라우저가 어떤 기준에 따라 계산한 값 대표적으로 em, rem, %, vw, vh가 해당된다. 본 글에서는 rem, em을 다루겠습니다.

rem / em 공통점

em, rem 둘 다 font-size의 속성 값에 비례해서 결정되는 상대단위입니다.
ex 1) font-size 16px

0.5em = 16px x 0.5 = 8px
1em = 16px x 1 = 16px
2em = 16px x 2 = 32px

ex 2) font-size 20px

0.5rem = 20 px x 0.5 = 10px
1rem = 20 px x 1 = 20px
2rem = 20 px x 2 = 40px

em, rem 동일하게 동작합니다.

rem / em 차이점

em: 해당 단위가 사용되고 있는 요소의 font-size의 값이 기준이 됩니다.
rem(root): r이 root를 뜻합니다. 즉 최상위 요소 의 font-size의 값이 기준이 됩니다.

  html{
      font-size: 10px;
  }
  div{
      font-size: 20px;
      width: 10em; // 200px  div의 font-size 기준 20px을 기준으로 형성
      width: 10rem; // 100px  root 즉 html font-size 기준 10px을 기준으로 형성
  }

주의할 점

div 요소에 font-size 요소가 없다면 부모의 font-size 값을 상속받게 됩니다.

  html {
  font-size: 16px;
}

.outer {
  font-size: 2rem;  /// 32px
  background: red;
}

.outer .inner {
  width: 10em;    /// 부모 .outer 클래스의 font-size 32px을 상속 받습니다. >>>320px
  background: blue;
}

em을 사용하면 중간에 겹치는 태그 font-size속성에 의해서 어디서 변환 되는지 파악이 어렵기 때문에 주로 rem을 사용하는 것이 유지보수에 유리합니다.