css 변수에 자바스크립트로 innerHeight 값을 할당해준다.
var vh;
setVh();
window.addEventListener( "resize", setVh );
function setVh() {
vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty( "--vh", vh+"px" );
}
vh라는 변수를 하나 선언해준다.
setVh라는 함수를 하나 만들어주고 바로 호출을 해준다.
함수에서는 아래 두가지 명령을 수행해준다.
- vh 변수에 innerHeight 값의 100분의 1에 해당하는 값을 할당해준다.
- CSS :root 위치에 –vh라는 변수를 만들어주고위에서 구한 vh를 넣어준다.
(:root위치는 자바스크립트에서 document에 해당되며 값을 넣을 때엔 뒤에 px을 붙여준다.)
그리고 창 크기가 변경될 때 마다 함수를 호출해서 vh값을 갱신해주면 끝.










