JavaScript에서 브라우저 창의 크기 조정(resize) 이벤트를 처리하려면 window.addEventListener() 메서드를 사용합니다. 사용자가 브라우저 창의 크기를 변경할 때마다 resize 이벤트가 발생하며, 이를 활용하면 반응형 레이아웃 조정이나 실시간 화면 크기 표시 등 다양한 기능을 구현할 수 있습니다.
예제: 현재 창 크기 실시간 표시하기
다음 코드는 현재 브라우저 창의 너비와 높이를 화면에 출력하고, 창 크기가 변경될 때마다 값을 자동으로 갱신합니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin-top: 10px;
padding: 10px;
background-color: #1E9E5D;
width: 50%;
} span {
font-size: 50px;
}
</style>
<script>
window.addEventListener('resize', display);
function display() {
document.querySelector('.width').innerText = document.documentElement.clientWidth;
document.querySelector('.height').innerText = document.documentElement.clientHeight;
}
display();
</script>
</head>
<body>
<div>
<span>Width= <span class="width"></span></span><br />
<span>Height= <span class="height"></span></span>
</div>
</body>
</html>
코드 설명
- window.addEventListener('resize', display) : 창 크기가 변경될 때마다 display 함수가 실행되도록 이벤트 리스너를 등록합니다.
- document.documentElement.clientWidth / clientHeight : 스크롤바를 제외한 뷰포트(실제 화면 영역)의 너비와 높이를 픽셀 단위로 반환합니다.
- display() 초기 호출 : 페이지가 로드되는 즉시 현재 창 크기를 먼저 화면에 표시합니다.
참고 사항
resize 이벤트는 사용자가 창 크기를 드래그하는 동안 연속적으로 수십 번씩 발생할 수 있습니다. 따라서 이벤트 핸들러에서 무거운 작업을 수행하는 경우에는 setTimeout 등을 활용해 일정 시간 동안 이벤트 발생이 멈춘 뒤 한 번만 실행되도록 디바운싱(debouncing) 처리를 적용하는 것이 성능 측면에서 바람직합니다.