미디어 쿼리는 웹사이트가 다양한 디바이스와 화면 크기에 대응할 수 있도록 하는데 주로 사용됩니다. jQuery를 사용하여 CSS 미디어 쿼리에 의해 화면 크기가 변할 때 특정 작업을 수행하는 방법에 대해 살펴보겠습니다.

1. jQuery의 resize 이벤트

화면 크기가 변화할 때를 감지하기 위해 jQuery의 resize 이벤트를 사용할 수 있습니다. 이를 통해 브라우저 창 크기가 변경될 때마다 원하는 동작을 수행할 수 있습니다.

다음은 resize 이벤트를 이용하여 브라우저 창의 너비가 변경될 때 마다 메시지를 출력하는 예제입니다.

$(window).resize(function() {
  if($(window).width() < 768) {
    console.log("작은 화면입니다!");
  } else {
    console.log("큰 화면입니다!");
  }
});

위 코드에서 $(window).width() 메서드를 이용하여 현재 브라우저 창의 너비를 가져온 후, 해당 값에 따라 메시지를 출력하도록 구현되어 있습니다.

2. CSS 미디어 쿼리와 함께 사용하기

jQuery를 사용하여 CSS 미디어 쿼리의 효과를 구현할 수 있습니다. 예를 들어, 특정 화면 크기에서는 특정 요소의 스타일을 변경하거나 숨기거나 보이도록 설정할 수 있습니다.

다음은 jQuery를 사용하여 CSS 미디어 쿼리의 효과를 구현하는 간단한 예제 코드입니다.

$(document).ready(function() {
  if($(window).width() < 768) {
    $(".menu").hide();
  } else {
    $(".menu").show();
  }
});

위 코드에서는 브라우저 창의 너비를 확인하여, 너비가 768px 미만인 경우 메뉴를 숨기고, 768px 이상인 경우 메뉴를 보이도록 설정하고 있습니다.

3. 정리

이렇게 jQuery를 사용하여 CSS 미디어 쿼리의 효과를 구현할 수 있습니다. 미디어 쿼리로는 CSS만으로는 제한된 동작을 수행할 수 있지만, jQuery를 이용하면 더 다양한 동작을 추가할 수 있게 됩니다.

더 많은 미디어 쿼리와 jQuery를 활용한 다양한 효과들에 대해 관심을 가지고 여러 예제를 통해 실습해 보시기를 권장합니다.

참고 자료 - jQuery Documentation