웹 개발에서 반응형 디자인은 중요한 요소입니다. 웹 페이지를 다양한 디바이스 크기에 맞게 조정하기 위해 CSS 미디어 쿼리를 사용합니다. jQuery를 사용하여 CSS 미디어 쿼리를 쉽게 다룰 수 있습니다.

1. jQuery의 .css() 메서드

jQuery의 .css() 메서드는 요소의 CSS 속성을 설정하거나 반환하는 데 사용됩니다. 이를 사용하여 미디어 쿼리에서 설정한 CSS 속성을 가져오거나 변경할 수 있습니다.

// CSS 미디어 쿼리에서 설정한 속성 가져오기
var fontSize = $('.element').css('font-size');

// CSS 미디어 쿼리에서 속성 변경하기
$('.element').css('color', 'red');

2. window.resize 이벤트

웹 브라우저의 크기가 변경될 때마다 호출되는 window.resize 이벤트를 사용하여 화면 크기에 따라 원하는 작업을 수행할 수 있습니다.

$(window).on('resize', function() {
    if($(window).width() < 768) {
        // 화면 폭이 768px 미만인 경우 실행되는 코드
    } else {
        // 화면 폭이 768px 이상인 경우 실행되는 코드
    }
});

3. matchMedia() 메서드

matchMedia() 메서드를 사용하여 미디어 쿼리를 JavaScript에서 처리할 수 있습니다.

if (window.matchMedia('(max-width: 768px)').matches) {
    // 화면 폭이 768px 이하인 경우 실행되는 코드
} else {
    // 화면 폭이 768px 초과인 경우 실행되는 코드
}

jQuery를 이용하여 CSS 미디어 쿼리를 다루는 방법은 다양하지만, 주로 .css() 메서드와 window.resize 이벤트를 활용하여 화면 크기에 따른 동적인 스타일 변경 등을 수행할 수 있습니다.

참고 자료

• jQuery .css() 메서드 - jQuery Documentation
• Window resize event - MDN web docs
• matchMedia() 메서드 - MDN web docs