JQuery 브라우저 이벤트 resize

JQuery 브라우저 이벤트 resize

■ 브라우저는 이벤트가 가장 많이 발생하는 곳 중 하나일겁니다. 대표적으로 브라우저가 열리면서 로드 이벤트가 발생하고, 창의 크기를 조절하거나 스크롤이 발생하는 등의 이벤트가 대표적인데요. 이번 글에서는 브라우저 이벤트 중 "resize"에 대해서 알아보겠습니다. 단어의 뜻에서도 알 수 있듯이 화면의 크기가 변하면 발생하는 이벤트인데요. 

■ 브라우저의 크기를 조절하건, 핸드폰 화면이 가로, 세로로 오리엔테이션이 발생하는 경우에 resize 이벤트가 발생하는데요. 요즘은 웹을 보는 환경이 모바일 위주로 많이 바뀌었기 때문에 이 이벤트는 자주 사용될 겁니다. 

 resize이벤트의 형식은 다음과 같습니다. 

$(window).resize(function(){

실행할 코드 ; 

});

■ 브라우저 이벤트는 document가 아닌 window인 점을 주의하시고요. window 객체를 사용하기 때문에 이 객체의 속성을 모두 사용할 수 있습니다. 혹시 윈도우 객체의 속성을 참고하실 분은 아래글 잠깐 둘러보세요.

  http://kd3302.tistory.com/561 ◀ window 객체의 속성

■ 예를 들어 브라우저의 크기가 변하게 되면 그 크기 값을 구해서 [alert]에 띄운다면 다음과 같이 작성하면 됩니다. 

$(window).resize(function(){

alert($(window).width());

});

 window 속성을 이용해서 다양한 형태로 사용해보세요. 수고하셨습니다.