인프런 커뮤니티 질문&답변

고란끝에 낙이온다님께서 잘 말씀해 주셨네요~
100%는 자신의 부모 요소의 width가 기준이고
100vw는 브라우저 창의 width가 기준입니다.

.mom { width: 500px; }
.son { width: 100%; }

<div class="mom">
    <div class="son"></div>
</div>

이런 경우라면 .son의 width 100%는 500px이 되겠지요~

vw,vh는 화면 전체 넓이이고

%는 부모의 범위안에서의 비율정도입니다.

만약 화면 넓이가 1920px이고 부모가 200px이면

100vw는 1920px이고

100%면 200px입니다.

상속받을게 딱히 없으면 body나 html의 100%니까 100vw랑 같아지죠