CSS) vw, vh

1. vw, vh
반응형으로 가로, 세로의 사이즈가 변할때 자동으로 적용이 된다.

vw: viewport의 가로사이즈
화면 전체의 가로 크기
1vw는 전체 viewport의 가로사이즈의 1/100

vh: viewport의 세로 사이즈
화면 전체의 세로 크기
1vh는 전체 viewport의 세로사이즈의 1/100

css reset 환경 설정 후의 실행입니다.

 

css

.container {
  width: 50vw;
  height: 50vh;
  background: red;
}

 

html

<div class="container">
</div>

 

출력