브라우저, 윈도우 창 크기 구하기 [innerHeight outerHeight 차이 window.resize() 사용방법]

프론트 개발을 하다 보면 윈도우 크기를 구해야 할 상황이 많이 생긴다.

css로 100vh 나 100% 를 사용해서 해결할 때도 있지만

width는 되는데 (100vw) height는 안 되는 경우도 있다.

window.innerHeight와 outerHeight도 헷갈릴 경우가 있어서

기록을 해둔다.

 

window.outerHeight, window.outerWidth

- 탭, 주소창 포함한 브라우저 전체 크기

 

window.innerHeight , window.innerWidth

- 탭, 주소창 제외한 딱 보이는 영역의 크기

- 이걸 더 많이 사용!

 

출처 :  https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight

 

outerHeight 보다는 innerHeight가 구하고 싶은 

window 화면 크기에 더 가깝다.

 

const updateSize = () => {
  console.log(window.innerHeight, window.outerHeight)
  //높이 비교
}

updateSize();
window.addEventListener("resize", updateSize);

//window.resize()를 사용하여 테스트해보자.

 

innerHeight, innerWidth 사용은 주로 window.resize() 와 함께 사용하게 된다.

 

예를 들어 아래와 같이 브라우저 width크기에 맞춰 그래프를

다시 그려줘야하는 상황. 반응형 작업시 특히 사용 많이 함.

 

 

window.resize 가 발생할 경우 d3를 다시 그려주는 함수를 넣어야한다.

이 페이지 에서 확인 가능.

 

chatGPT 에게 물어봐도 이렇게 답해준다. ㅎㅎ