개요

웹 개발에서 CSS 미디어 쿼리를 사용하여 반응형 디자인을 구현하는 것은 중요합니다. 하지만 때로는 jQuery를 사용하여 스크린 크기에 따라 다른 동작을 수행하고 싶을 때가 있습니다. 이 포스트에서는 jQuery를 이용하여 CSS 미디어 쿼리 스크린 크기를 감지하고 처리하는 방법에 대해 살펴보겠습니다.

jQuery로 스크린 크기 감지하기

jQuery를 사용하여 뷰포트의 크기를 확인하고 필요한 동작을 수행할 수 있습니다. $(window).width()와 $(window).height() 함수를 사용하여 뷰포트의 너비와 높이를 가져올 수 있습니다.

$(document).ready(function(){
    // 스크린 크기 변경 시 실행되는 함수
    function checkScreenSize(){
        var width = $(window).width();
        var height = $(window).height();
        
        if (width < 768) {
            // 스크린 너비가 768px보다 작을 때 실행되는 코드
        } else {
            // 그 외의 경우 실행되는 코드
        }
    }
    
    // 초기화
    checkScreenSize();
    
    // 창 크기가 변경될 때 실행
    $(window).resize(checkScreenSize);
});

위 코드에서 $(window).resize() 함수는 창의 크기가 변경될 때마다 checkScreenSize 함수를 실행합니다. 그리고 checkScreenSize 함수 내에서 현재 스크린 크기를 확인하고, 그에 따라 다른 동작을 구현할 수 있습니다.

마치며

이렇듯 jQuery를 사용하여 스크린 크기에 따라 다른 CSS 또는 JavaScript 동작을 구현할 수 있습니다. 이를 통해 사용자 경험을 향상시키고 반응형 웹 디자인을 보다 잘 구현할 수 있습니다.

참고문헌

추가 읽을거리

• jQuery 공식 문서
• MDN Web Docs