[CSS] vh,vw 와 %의 차이는?

프로젝트를 진행하면서 페이지마다 배경화면 색깔을 다르게 적용하고 모달을 만들때 배경화면을 변경하였다. 그때 css에서 주로 사용한 방법은 width,heigth를 100%로 설정하는 방법을 사용하였다. 하지만 이러한 방법은 부모의 크기에 영향을 받는 문제점이 발생하였다.

%는 뭐야?

창이 중심이 아닌 부모 요소의 길이에 맞게 반환한다. 그래서 최상단에서 사용한다면 문제는 없지만 밑의 컴포넌트로 파고 들어갈수록 원하는 결과값을 얻기가 힘들어 진다.

vw, vh

vh = viewport height
vw = viewport width

실행중인 스크린 크기에 맞춰 크기를 반환한다.
화면을 꽉채우기 위해서는 100vw 100vh를 사용하면 된다.

해당 방법 보다는

이렇게 사용하는게 페이지별 배경색을 지정하는데 좋다.