resize 이벤트는 브라우저 창의 크기가 변경될 때마다 자동으로 발생하는 이벤트입니다. JavaScript에서 window.outerWidth와 window.outerHeight 속성을 함께 사용하면, 브라우저 창 크기가 조정되는 시점에 실시간으로 창의 너비와 높이 값을 가져올 수 있습니다.
onresize 이벤트 활용 예제
아래 코드를 실행한 후 브라우저 창 크기를 조절해 보세요. 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>
코드 설명
- onresize="resizeFunction()" : body 태그에 등록된 이벤트 핸들러로, 창 크기가 변경될 때마다 resizeFunction 함수가 호출됩니다.
- window.outerWidth / window.outerHeight : 현재 브라우저 창의 외부 너비와 높이를 픽셀(px) 단위로 반환합니다.
- document.getElementById("test").innerHTML = val : 측정된 창 크기 정보를 문자열로 만들어 id가 "test"인 요소에 출력합니다.
이처럼 onresize 이벤트는 반응형 웹 디자인 구현이나, 창 크기에 따라 레이아웃·차트·캔버스 요소를 다시 그려야 하는 경우에 유용하게 활용됩니다.