웹 브라우저 창의 크기가 조정(리사이즈)되면 onresize 속성이 트리거되어, 해당 속성에 지정된 자바스크립트 함수가 자동으로 실행됩니다. 이 속성을 활용하면 사용자가 창 크기를 변경하는 순간 원하는 동작을 수행하도록 만들 수 있습니다.
onresize 속성 기본 문법
onresize 속성은 <body> 태그에 주로 적용하며, 값으로는 실행하고자 하는 자바스크립트 함수 이름을 지정합니다.
예제 코드
아래 코드를 실행한 후 브라우저 창의 크기를 조절해 보세요. 창 크기가 변경되는 순간 이벤트가 발생하여 알림창이 표시됩니다.
<!DOCTYPE html>
<html>
<body onresize = "display()">
<p>창 크기를 조절하면 이벤트가 발생합니다.</p>
<script>
function display() {
alert("웹 브라우저 창 크기가 변경되었습니다!");
}
</script>
</body>
</html>동작 방식 설명
위 예제에서는 <body> 태그에 onresize 속성을 추가하고, 값으로 display() 함수를 지정했습니다. 사용자가 브라우저 창의 너비나 높이를 조정하면 resize 이벤트가 발생하고, 이에 연결된 display() 함수가 호출되어 알림창을 띄우게 됩니다.
참고: addEventListener를 활용한 최신 방식
HTML 속성 대신 자바스크립트의 addEventListener() 메서드를 사용하면 더 유연하게 resize 이벤트를 처리할 수 있습니다.
<script>
window.addEventListener("resize", function() {
console.log("창 크기가 변경되었습니다!");
});
</script>이 방식은 HTML과 자바스크립트 코드를 분리할 수 있어 코드 관리 측면에서 더 권장되는 방법입니다. 또한 여러 개의 리스너를 등록할 수 있어 복잡한 이벤트 처리에도 유용합니다.