웹 디자인에서 반응형 웹사이트는 다양한 디바이스에서 일관된 사용자 경험을 제공하는 데 중요합니다. CSS 미디어 쿼리를 사용하면 특정 디바이스나 화면 크기에 따라 스타일을 조정할 수 있습니다. 이번 글에서는 jQuery를 사용하여 CSS 미디어 쿼리를 쉽게 다룰 수 있는 방법에 대해 살펴보겠습니다.

1. jQuery의 $(window).resize() 이벤트

jQuery에서는 $(window).resize() 이벤트를 사용하여 브라우저의 크기가 변경될 때마다 코드를 실행할 수 있습니다. 이를 활용하여 화면 크기에 따라 특정 CSS 스타일을 적용할 수 있습니다.

예를 들어, 다음 코드는 브라우저 너비에 따라 특정 div 요소의 배경색을 변경하는 방법을 보여줍니다.

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

2. jQuery의 matchMedia() 함수

matchMedia() 함수를 사용하면 CSS 미디어 쿼리와 유사한 방식으로 화면 크기에 따른 조건을 판별할 수 있습니다. 이를 통해 특정 조건에 따라 JavaScript 코드를 실행할 수 있습니다.

아래 예시는 matchMedia()를 사용하여 특정 화면 크기에 따라 div 요소의 가시성을 조절하는 방법을 보여줍니다.

var mediaQuery = window.matchMedia('(max-width: 768px)');
if(mediaQuery.matches) {
  $("#myDiv").hide();
} else {
  $("#myDiv").show();
}

이렇게 jQuery를 사용하여 CSS 미디어 쿼리의 방향성을 다룰 수 있습니다. 이를 통해 웹사이트의 반응형 디자인을 보다 유연하게 구현할 수 있습니다.

참고문헌:

• jQuery 공식 문서: https://api.jquery.com/
• Mozilla Developer Network: https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Media_Queries