HTML onresize 이벤트 속성 – 브라우저 창 크기 변경을 감지하는 방법

HTML의 onresize 속성은 사용자가 브라우저 창의 크기를 조절할 때마다 자동으로 실행되는 이벤트 속성입니다. 주로 <body> 태그에 적용되며, 창 크기 변화에 반응해 화면 배경을 바꾸거나 레이아웃을 재조정하는 등의 동작을 구현할 수 있습니다.

기본 문법

onresize 속성의 기본 작성 형식은 다음과 같습니다.

<tagname onresize="script"></tagname>

속성 값으로는 창 크기가 변경될 때 실행할 JavaScript 코드를 지정합니다.

예제: onresize로 배경색 변경하기

아래 예제는 브라우저 창의 크기를 조절하면 페이지 배경 그라데이션이 다른 색상으로 전환되도록 구현한 코드입니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        height: 100vh;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
        padding: 20px;
    }
</style>
</head>
<body onresize="resizeFn()">
<h1>HTML onresize Event Attribute Demo</h1>
<p>Now resize the browser window</p>
<script>
    function resizeFn() {
        document.body.style.background = 'linear-gradient(45deg, #8BC6EC 0%, #9599E2 100%) no-repeat';
    }
</script>
</body>
</html>

실행 결과

코드를 실행하면 처음에는 주황색 계열의 그라데이션 배경이 표시됩니다.

HTML onresize 이벤트 속성 – 브라우저 창 크기 변경을 감지하는 방법

여기서 브라우저 창의 크기를 조절하면 onresize 이벤트가 발생하여 파란색 계열의 그라데이션 배경으로 즉시 변경되는 것을 확인할 수 있습니다.

HTML onresize 이벤트 속성 – 브라우저 창 크기 변경을 감지하는 방법

참고 사항

onresize 이벤트는 주로 <body> 요소에서 사용됩니다.
창 크기 조절 중에는 이벤트가 연속적으로 여러 번 발생할 수 있으므로, 성능 최적화를 위해 디바운스(debounce) 기법을 함께 사용하는 것이 좋습니다.
JavaScript의 window.addEventListener('resize', 함수) 방식으로도 동일한 기능을 구현할 수 있습니다.