Web Dev, HTML, CSS, SVG, BootStrap/CSS

2020-093.CSS.Font Size.폰트 크기.rem.em.px.vh/vw.ex/ch

jake_kim 2020. 4. 5. 19:49
반응형

참조) https://webclub.tistory.com/356

em

 

부모의 폰트사이즈 X 자신의 폰트 사이즈가 된다.

 body { font-size:10px }
div { font-size:1.2em; }

<body>
  <div>
    Test (10 * 1.2 = 12px)
    <div>
      Test (12 * 1.2)
      <div>
        Test (12 * 1.2 * 1.2) 
       </div>
     </div>
  </div>
</body> 

rem

 

root (<html>) 의 폰트사이즈 X 자신의 폰트 사이즈가 된다.

 

width 에도 사용가능하다.

 

grid 에서 사용된다.

 html { font-size : 14px; }
div { font-size : 1.2rem; }

<body>
  <div>
    Test (10 * 1.2 = 12px)
    <div>
      Test (10 * 1.2)
      <div>
        Test (10 * 1.2)
       </div>
     </div>
  </div>
</body> 

vh & vw
( vertical height & width )

뷰포트의 너비값과 높이값

 

반응형에 사용

브라우저 높이가 900px 이면 1vh = 9px, 750px 이면 1vh = 7.5px

 

vmin & vmax

vmin : 화면 width
vmax : 화면 height

.box1 # 가로는 100%, 세로는 가로길이인 정사각형
{
  height: 100vmin;
  width : 100vmin;
}

.box2 # 세로는 100%, 가로는 세로길이라서 화면을 넘어가는 정사각형
{
  height: 100vmin;
  width : 100vmin;
}

 

 

반응형