css 단위 rem, em

css 단위 rem, em

css 를 사용하다 보면 만나게 되는 단위인 remem 에 대해 정리합니다.

em

em 은 현재 font-size를 정의합니다.

body {
    font-size: 14px;
}
div {
    font-size: 1.5em; // 14px * 1.5 = 21px
}

위와 같이 설정을 한다면 body안의 폰트는 모두 14px 정의 될 것입니다.
그런데 만약 div 안의 font-size 값은 어떨게 될까요?
정답: 21px

이제 아래 내용을 봅시다.

<body>
<div>
  A  <!-- 14 * 1.5 = 21px -->
    <div>
    B  <!-- 21 * 1.5 = 31.5px -->
    <div>
      C  <!-- 31.5 * 1.5 = 47.25px -->
    </div>
  </div>
</div>
</body>

css em test – JSFiddle

이제 em은 이해가 된 듯 합니다.

rem

그럼 div 테그 안의 font-size를 고정하고 싶을 경우에는 어떻게 해야할까요?

바로 rem 단위를 사용하면 됩니다. rem 에서 r 은 최상위(root)의 의미를 지니고 있습니다.

body {
    font-size: 14px;
}
div {
    font-size: 1.5rem; // 14px * 1.5 = 21px
}

css rem test – JSFiddle

둘 차이를 JSFiddle 을 통해 손쉽게 확인 가능합니다.

Author :
github: https://github.com/9to6

카테고리

Count per Day

  • 31812Total visitors:
  • 10Visitors today:
  • 84Visitors yesterday:
  • 573Visitors last week:
  • 80Visitors per day:
  • 2017년 4월 7일Counter starts on: