JavaScript로 브라우저 창의 내부 너비와 내부 높이 구하는 방법

JavaScript의 window 객체는 브라우저 창을 그대로 나타내는 객체입니다. 이 방식은 모든 주요 브라우저에서 지원되며, 별도의 라이브러리 없이 바로 사용할 수 있습니다.

브라우저 창의 내부 높이(inner height)와 내부 너비(inner width)를 구하려면 window 객체가 제공하는 다음 두 가지 속성을 활용하면 됩니다.

window.innerWidth — 브라우저 창의 내부 너비
window.innerHeight — 브라우저 창의 내부 높이

두 속성 모두 결과를 픽셀(px) 단위의 숫자로 반환합니다. 여기서 '내부'란 스크롤바, 툴바, 메뉴 등 브라우저 UI를 제외한 실제 콘텐츠가 표시되는 영역을 의미합니다. 아래에서 각각의 사용 방법을 살펴보겠습니다.

내부 너비(Inner Width) 구하기

다음 예제에서는 window.innerWidth 속성을 사용하여 브라우저 창의 내부 너비를 구하고, 그 결과를 화면에 출력합니다. 반환값은 픽셀 단위입니다.

예제 코드

<html>
<body>
<p id="width"></p>
<script>
   var w = window.innerWidth;
   var x = document.getElementById("width");
   x.innerHTML = "브라우저 내부 창 너비: " + w + "px";
</script>
</body>
</html>

출력 결과

브라우저 내부 창 너비: 598px

창 크기는 사용자 환경에 따라 달라지므로, 위 출력 값은 예시일 뿐 실제 실행 시에는 각자의 브라우저 창 크기가 표시됩니다.

내부 높이(Inner Height) 구하기

마찬가지로, window.innerHeight 속성을 사용하면 브라우저 창의 내부 높이를 픽셀 단위로 구할 수 있습니다.

예제 코드

<html>
<body>
<p id="height"></p>
<script>
   var h = window.innerHeight;
   var x = document.getElementById("height");
   x.innerHTML = "브라우저 내부 창 높이: " + h + "px";
</script>
</body>
</html>

출력 결과

브라우저 내부 창 높이: 477px

정리 및 참고 사항

window.innerWidth와 window.innerHeight는 읽기 전용 속성으로, 페이지 로드 시점뿐 아니라 언제든 호출하여 현재 창 크기를 확인할 수 있습니다. 만약 창 크기가 변경될 때마다 값을 갱신하고 싶다면 resize 이벤트와 함께 활용할 수 있습니다.

window.addEventListener("resize", function() {
   console.log(window.innerWidth + " x " + window.innerHeight);
});

이처럼 JavaScript만으로 간단하게 브라우저 창의 크기를 확인할 수 있으며, 반응형 웹 디자인이나 동적 레이아웃 조정에 유용하게 사용됩니다.