CSS 미디어 쿼리는 브라우저에서 화면의 폭, 높이, 방향, 해상도 등과 같은 속성을 기준으로 스타일을 적용하는 기술입니다. 이러한 CSS 미디어 쿼리를 jQuery에서 사용할 수 있는 방법에 대해 알아보겠습니다.

1. jQuery CSS 메서드

jQuery에는 .css() 메서드를 사용하여 요소에 CSS 속성을 설정할 수 있는 기능이 내장되어 있습니다. 이 메서드를 사용하면 미디어 쿼리와 관련된 CSS 속성을 동적으로 변경할 수 있습니다.

$(window).resize(function() {
  if ($(window).width() < 768) {
    $('.element').css('background-color', 'blue');
  } else {
    $('.element').css('background-color', 'red');
  }
});

위의 예제에서는 브라우저의 너비가 768px 미만일 때 .element의 배경색을 파란색으로 변경하고, 그 이상일 때는 빨간색으로 변경하는 방법을 보여줍니다.

2. jQuery matchMedia 플러그인

jQuery matchMedia 플러그인을 사용하면 CSS 미디어 쿼리와 유사한 방식으로 브라우저의 상태를 감지하고 처리할 수 있습니다.

if (window.matchMedia('(max-width: 768px)').matches) {
  $('.element').css('background-color', 'blue');
} else {
  $('.element').css('background-color', 'red');
}

이 예제에서는 window.matchMedia() 메서드를 사용하여 브라우저의 너비가 768px 미만일 때 .element의 배경색을 파란색으로 변경하고, 그 이상일 때는 빨간색으로 변경하는 방법을 보여줍니다.

결론

jQuery를 사용하여 CSS 미디어 쿼리를 적용하는 방법에 대해 알아보았습니다. 이를 통해 동적으로 요소의 스타일을 변경하거나 상태를 감지하여 처리하는 등 다양한 기능을 구현할 수 있습니다.

더 자세한 내용은 jQuery 공식 문서를 참고하시기 바랍니다.