웹 애플리케이션을 개발하다 보면 반응형 디자인을 구현하기 위해 CSS 미디어 쿼리를 사용해야 할 때가 있습니다. 이때 JavaScript 라이브러리인 jQuery를 이용해 CSS 미디어 쿼리 이벤트를 감지하여 추가적인 동작을 수행할 수 있습니다.

CSS 미디어 쿼리 이벤트

CSS 미디어 쿼리는 웹 페이지의 너비, 높이 등과 같은 특정 장치에 대한 화면 크기에 따라 스타일을 조절하기 위해 사용됩니다. 따라서 화면 크기가 변경될 때 일련의 이벤트를 트리거할 수 있습니다.

이를 JavaScript를 이용해 처리하고 싶을 때 jQuery의 resize() 함수를 사용할 수 있습니다. resize() 함수는 브라우저 창의 크기 변경 시 발생하는 이벤트를 감지하고 이를 핸들링할 수 있게 해줍니다.

예시

아래는 jQuery를 사용하여 화면이 특정 크기 이상이 되었을 때 consol에 “화면 크기가 변경되었습니다.”라는 메시지를 출력하는 간단한 예시입니다.

$(window).resize(function() {
  if ($(window).width() > 768) {
    console.log("화면 크기가 변경되었습니다.");
  }
});

이 예시는 화면의 너비가 768px보다 클 때 resize 이벤트를 감지하여 해당 메시지를 출력합니다.

결론

jQuery의 resize() 함수를 이용하면 브라우저 창의 크기 변경에 따른 이벤트를 쉽게 감지하고 처리할 수 있습니다. 이를 이용하면 CSS 미디어 쿼리의 크기 변경에 따른 동작을 JavaScript로 쉽게 제어할 수 있습니다.

위 내용을 보다 상세히 파악하고 싶다면 아래의 참조 자료를 참고하실 수 있습니다.

• jQuery resize() 함수 문서

이렇게 JavaScript를 통해 CSS 미디어 쿼리의 이벤트를 감지하고 처리할 수 있습니다.