CSS의 vw 및 vh 단위

vw 및 vh 단위는 브라우저 창의 뷰포트 영역을 기준으로 크기를 설정할 수 있게 해줍니다. 예제를 통해 살펴보겠습니다.

다음과 같은 div가 있다고 가정해 보겠습니다:

<div></div>

이 div의 너비를 뷰포트 너비의 절반으로, 높이를 뷰포트 높이의 절반으로 설정해 보겠습니다:

div {
	width: 50vw;
	height: 50vh;
	margin: 30px auto;
	border: 1px solid red;
}

결과를 확인해 보겠습니다:

주어진 div에 대해, 뷰포트 높이의 30%에 해당하는 상단 여백(margin-top)을 설정하세요.

주어진 div에 대해, 너비와 높이를 뷰포트 너비의 70%로 설정하세요.