[CSS] 100%와 100vw/100vh

100vw, 100vh VS 100%

%

%는 부모의 영향을 받는다. 정확히 말하면 부모의 높이/너비 대비 자식의 높이/너비를 지정해주는 단위다.

부모의 높이가 50px일 때

자식의 높이가 100%면

50px의 100%이므로 자식도 50px이 된다.

그리고 %는 스크롤바(빨간색 화살표) 영역을 포함하지 않는다.

---

vh, vw

vh와 vw는 사용자의 눈에 보이는 스크린 범위에 영향을 받는다.

100vh

1vh는 1/100 viewport-height, 즉 뷰포트(스크린) 기준 100분의 1이다. 따라서 100vh는 뷰포트 전체 높이가 된다.

100vw

1vw 역시 1/100 view-width, 즉 뷰포트 기준 100분의 1이다. 100vw는 뷰포트 전체 너비와 같다.

자식의 높이를 100vh로 바꾸면

자식은 부모의 높이(50px)를 무시하고 화면 높이와 동일하게 바뀐다.

그리고 vh, vw는 스크롤바(빨간색 화살표) 영역을 포함한다.

---

참고

[CSS] vh란? / vw란? / what is vh? ❓ / %와의 차이