CSS 단위 [rem / em / vh / vw / vmax / vmin]

# CSS 단위

  em

  부모 태그의 사이즈를 기준으로 잡는 단위

 

만약 가장 최상위의 글자 크기가 10px이고 하위 태그의 글자 크기가 1.2em이면

하위 태그의 글자는 12px가 된다. 또 그 하위 태그는 14.4px가 된다.

See the Pen zYKXqjN by Soksurim (@soksurim) on CodePen.

  rem

  최상위 태그의 사이즈를 기준으로 잡는 단위

See the Pen MWjRyBy by Soksurim (@soksurim) on CodePen.

  vh & vw (vertical height & vertical width)
  뷰포트의 너비값과 높이값에 맞춰 사이즈를 조절한다.
  vh는 뷰포트의 높이의 1/100단위이다.

  브라우저 높이값이 900px일때 1vh는 9px이 된다.

See the Pen zYKXqMw by Soksurim (@soksurim) on CodePen.

브라우저 크기에 맞게 글자 크기가 조절된다.

 

 

vmin & vmax

 

vmin : 1/100th of the minimum value between the height and the width of the viewport.

vmax : 1/100th of the maximum value between the height and the width of the viewport.

 

## CSS
.box {
    height: 100vmin;
    width: 100vmin;
}

 

CSS
.box {
    height: 100vmax;
    width: 100vmax;
}

출처: https://webclub.tistory.com/356 [Web Club]