[제이쿼리] 브라우저 창 크기 변화 이벤트, resize()

 

제이쿼리를 사용하여 브라우저 창의 크기를 조절할 때 이벤트를 발생하는 방법에 대하여 알아봅니다. 또 자바스크립트만 사용할 경우의 방법도 함께 알아봅니다.

# 브라우저 크기 변화에 따른 이벤트 발생, jQuery

브라우저 크기가 바뀌었을 경우 제이쿼리의 메소드 resize()를 사용할 수 있니다. resize()는 브라우저 창의 크기가 바뀌게 되면 콜백함수를 호출하여 코드를 실행하게 됩니다. 먼저 간단한 사용 방법은 아래와 같습니다.

$(window).resize(function() { ... });

매우 간단한 코드입니다. 제이쿼리에서는 자바스크립트 resize 이벤트를 좀 더 쉽게 사용할 수 있게 해주며 자바스크립트만 사용해서도 당연히 가능합니다.

! resize 이벤트는 언제 필요한가?

실제 웹사이트를 구축할 경우 브라우저 크기 이벤트는 언제 필요하거나 주로 사용할 수 있을까요?

• 모바일 / 데스크탑에 따라 다른 이벤트 동작 등이 필요한 경우
• 반응형웹 구현시 CSS를 사용하지 않고 스크립트를 사용하는 경우
  

이처럼 브라우저, 화면의 크기에 따라 다른 뷰를 방문자에게 보여주는 경우에 많이 사용됩니다. 그럼 간단한 예제를 만들어보고 어떻게 동작하는지 알아봅니다.

# 제이쿼리 resize(), 브라우저 크기 변경 예제

아래 에제는 만약 브라우저 폭의 width값이 800px 이하로 줄어들 경우 경고창을 띄어 출력하려는 예제를 만들어보겠습니다. 일단 위 문법과 같이 resize()를 사용하여 코드를 작성합니다. 제이쿼리의 스크립트 코드는 아래와 같습니다.

코드를 살펴보면 먼저 브라우저의 크기 값을 확인하기 위해서 window.outerWidth;를 사용하였습니다. 그래서 resize() 이벤트가 발생할 때 현재의 브라우저 크기를 다시 확인하여 크기가 800 이하인지 계속 체크하도록 if문을 사용하였습니다. 만약 800보다 적다면 alert()을 출력할 것입니다. 매우 간단한 예제입니다. 

이처럼 브라우저의 크기를 확인하여 특정 함수를 실행하는 resize()는 매우 자주 사용되므로 알아두는 것이 좋습니다. 특히 반응형 웹페이지를 구현하는데 더 많이 사용됩니다. CSS만을 사용하기에 한계가 있거나 애니메이션 등을 추가로 구현해야할 경우 CSS의 미디어쿼리와 자바스크립트를 함께 사용하기도 하기 때문이죠.

! 자바스크립트만 사용하는 방법

어떻게 보면 resize() 메소드는 자바스크립트 resize 이벤트를 간단하게 랩핑만 해주는 구조입니다. resize 이벤트는 아래처럼 자바스크립트 만으로 구현이 가능합니다.

아니면 window객체에 onresize를 사용할 수도 있습니다.

둘 다 브라우저 크기에 따라서 'Resizing'을 출력하게 될 것 입니다.

! 참고사항. 스크립트로 DOM 조작시 성능 이슈

제이쿼리의 resize() 이벤트는 브라우저 크기에 따라 계속해서 구문을 실행하므로 사용이 빈번한 경우 브라우저의 성능을 크게 저하 시킬 수 있습니다. 이런 이벤트 등은 성능을 최적화하는 방법 역시 고려해야합니다. 예를들어 debounce를 사용하여 이벤트 간격을 100ms 단위로 제한하는 방법 등이 고려되면 더욱 좋습니다.