Vw, Vh

Vw = (Viewport Width)

Vh = (ViewPort Height)

Viewport란?

-> 컴퓨터 그래픽스에서, 뷰포트(viewport)는 현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역입니다. 웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분(전체화면이라면 화면 전체, 스크롤바 포함)을 말합니다.
ViewPort에 대한 정의 링크

쉽게 말해서 100vw와 vh가 전체 화면의 기준이 됩니다. width: 1200px, height: 900px으로 전체 화면이 구성되어 있다면 1vw = 12px, 1vh = 9px이 될 것입니다.

그렇다면 우리가 흔하게 사용하는 %와 차이점은 무엇일까요?

%는 간단하게 말해서 부모 요소의 크기에 비례한다고 보면 되겠습니다.
위에서 화면의 넓이가 1200px인데 아래처럼 정의되어 있다면 자식의 width는 부모의 300px의 100%를 사용하므로 똑같이 300px이 됩니다. 상속 받는 게 없다면 젤 상위 요소인 1200px 받아 이때는 1200px이 되겠죠?

이상으로 Vw, Vh, %에 대하여 간단히 알아보았습니다.
매번 가볍게 사용하고 넘어 갔었는데 이번 기회에 잘 상시 시켜야겠습니다.

.부모 {width : 300px;}
'자식 {width : 100%; }
<div class="부모">
	<div class="자식"> </div>
</div>