hyowonii의 블로그

[CSS] em / rem 본문

웹/CSS

[CSS] em / rem

hyowonii 2022. 2. 8. 17:08

em / rem

em : 상위 요소 기준

ex)

<html>
  <head>	
    <style>
      html { font-size: 10px; }
      body { font-size: 1.5em; }
      .a { font-size: 2.0em; }
    </style>    
  </head>
  <body>
  	<p class="a">Hello HTML</p>
  </body>
</html>

html 요소의 크기를 10px이라고 하면 body 요소의 크기는 10px의 1.5배인 15px이고, .a 요소의 크기는 body 요소의 2.0배인 30px이 된다.

 

rem: 최상위 요소, 즉 html 요소의 크기의 몇 배인지

ex)

<html>
  <head>	
    <style>
      html { font-size: 10px; }
      body { font-size: 1.5em; }
      .a { font-size: 2.0rem; }
    </style>    
  </head>
  <body>
  	<p class="a">Hello HTML</p>
  </body>
</html>

2.0rem으로 바꾸면 .a 요소의 폰트 사이즈는 가장 상위 태그인 html 요소의 폰트사이즈인 10px의 2.0배가 되어 20px이 된다.

 

[참고]

https://www.codingfactory.net/10748

'웹 > CSS' 카테고리의 다른 글

[CSS] mouse hover로 이미지 확대 시 가림 문제&해결  (0) 2022.02.28
[CSS] :hover 이미지 확대  (0) 2022.02.21
[CSS] img 위에 button 추가  (0) 2022.02.21
'웹/CSS' Related Articles more