[jQuery] jQuery CSS 미디어 쿼리 해상도

26 Dec 2023

jQuery

이번 포스트에서는 jQuery를 사용하여 해상도에 따라 다른 CSS 스타일을 적용하는 방법에 대해 알아보겠습니다.

해상도에 따른 CSS 적용

웹 페이지가 다양한 디바이스와 해상도에서 확인될 수 있기 때문에, 미디어 쿼리를 사용하여 다른 화면 크기에 맞는 다양한 스타일을 적용하는 것이 중요합니다.

jQuery를 사용하면 동적으로 스타일을 변경할 수 있으며, 해상도에 따라 스타일을 적용하는 것도 가능합니다.

jQuery를 사용한 미디어 쿼리 해상도 적용 방법

$(document).ready(function(){
    function applyStylesForResolution() {
        if ($(window).width() < 768) {
            // 모바일용 스타일 적용
            $('.element').css('color', 'red');
        } else if ($(window).width() >= 768 && $(window).width() < 1200) {
            // 태블릿용 스타일 적용
            $('.element').css('color', 'blue');
        } else {
            // 데스크탑용 스타일 적용
            $('.element').css('color', 'green');
        }
    }
    
    // 초기 로딩 시 적용
    applyStylesForResolution();
    
    // 윈도우 리사이징 시에도 적용
    $(window).resize(function(){
        applyStylesForResolution();
    });
});

위 코드는 $(document).ready()를 사용하여 페이지 로딩이 완료된 후, 화면 해상도에 따라 다른 스타일을 적용하는 함수를 실행하도록 구성되어 있습니다.

해상도에 따라 다른 스타일을 적용하기 위해 $(window).width()를 사용하여 현재 창의 너비를 가져와 조건에 따라 스타일을 적용하고 있습니다.

마치며

이렇게 jQuery를 사용하여 해상도에 따라 다른 CSS 스타일을 적용하는 방법을 알아보았습니다. 이와 같은 기술을 사용하여 웹 페이지가 다양한 디바이스 및 화면 크기에서 최적의 사용자 경험을 제공할 수 있습니다.

참고: jQuery 공식문서, 미디어 쿼리(MDN web docs)

jquery css 미디어쿼리 해상도 웹개발 반응형디자인