JavaScript에서 브라우저 창의 크기가 변경될 때 발생하는 이벤트는 바로 resize 이벤트입니다. 이 이벤트를 활용하면 사용자가 브라우저 창 크기를 조절하는 순간을 감지하여, 화면 크기에 맞춘 동적인 반응형 처리를 구현할 수 있습니다.
window 객체의 크기 관련 속성
브라우저 창의 실제 크기를 확인하려면 window.outerWidth(창의 외부 너비)와 window.outerHeight(창의 외부 높이) 속성을 사용합니다. 이 두 속성은 툴바, 메뉴바, 스크롤바를 포함한 브라우저 창 전체의 크기를 픽셀(px) 단위로 반환합니다.
예제 코드
아래 예제는 onresize 이벤트 핸들러를 사용해 브라우저 창 크기가 변경될 때마다 현재 창의 너비와 높이를 화면에 실시간으로 출력합니다.
<!DOCTYPE html>
<html>
<head>
<script>
function resizeFunction() {
var val = "Window Width=" + window.outerWidth + ", Window Height="
+ window.outerHeight;
document.getElementById("test").innerHTML = val;
}
</script>
</head>
<body onresize = "resizeFunction()">
<p>브라우저 창 크기를 조절한 후, 창의 높이와 너비가
어떻게 변하는지 다시 한번 확인해 보세요.</p>
<p id = "test"> </p>
</body>
</html>
addEventListener로 resize 이벤트 등록하기
HTML 속성(onresize) 대신 JavaScript의 addEventListener 메서드를 사용하면 더 유연하게 이벤트를 처리할 수 있습니다.
window.addEventListener('resize', function() {
console.log('너비: ' + window.outerWidth + 'px, 높이: ' + window.outerHeight + 'px');
});
참고 사항
- window.innerWidth / innerHeight: 툴바나 스크롤바를 제외한 웹 페이지 콘텐츠 영역의 크기를 반환합니다.
- resize 이벤트 최적화: 창 크기 조절 중에는 이벤트가 연속적으로 여러 번 발생하므로, 성능을 위해 디바운스(debounce) 기법을 적용하는 것이 좋습니다.