[CSS] em/rem

Frontend/CSS

[CSS] em/rem

joy_95 2021. 7. 30. 17:38

em

- 상위 요소 크기의 몇 배인지로 크기를 정한다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      html { font-size: 16px; }
      body { font-size: 1.5em; }
      .a { font-size: 2.0em; }
    </style>
  </head>
  <body>
    <p class="a">Lorem Ipsum Dolor</p>
  </body>
</html>

html 요소의 크기는 16px.

body 요소의 크기는 상위 요소인 html 요소 크기의 1.5배인 24px.

a 크기는 상위요소 body의 24px의 2배인 48px가 된다.

rem

- 문서의 최상위 요소, html 요소의 크기의 몇 배인지로 크기를 정한다.

.a { font-size: 2.0rem; }

글자 크기는 32px가 된다.