Colin's Blog
[jQuery] jQuery CSS 미디어 쿼리 동적 컨텐츠

웹 디자인을 개발할 때, 반응형 디자인은 중요한 부분입니다. CSS 미디어 쿼리를 사용하여 브라우저의 너비에 따라 스타일을 다르게 적용할 수 있습니다. 때로는 너비가 아닌 다른 조건에 따라 동적으로 스타일을 적용해야 할 수도 있습니다. jQuery를 사용하여 CSS 미디어 쿼리에 따라 동적인 컨텐츠를 관리하는 방법을 알아보겠습니다.

라이브러리 추가

먼저, jQuery를 HTML 파일에 추가합니다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

CSS 설정

다음으로, CSS 파일에 미디어 쿼리를 설정합니다. 예를 들어, 너비가 768px 이하일 때와 768px 이상일 때에 따라 다른 스타일을 적용하고 싶다고 가정해보겠습니다.

/* 768px 이하일 때 */
@media (max-width: 768px) {
    .responsive-content {
        font-size: 14px;
    }
}

/* 768px 이상일 때 */
@media (min-width: 768px) {
    .responsive-content {
        font-size: 16px;
    }
}

jQuery로 스타일 변경

이제 jQuery를 사용하여 브라우저의 너비에 따라 동적으로 스타일을 변경하는 방법을 살펴보겠습니다.

$(document).ready(function() {
    // 초기 로드시 실행
    if ($(window).width() <= 768) {
        $('.responsive-content').css('font-size', '14px');
    } else {
        $('.responsive-content').css('font-size', '16px');
    }

    // 윈도우 리사이즈 시 실행
    $(window).resize(function() {
        if ($(this).width() <= 768) {
            $('.responsive-content').css('font-size', '14px');
        } else {
            $('.responsive-content').css('font-size', '16px');
        }
    });
});

위의 예제에서는 responsive-content 클래스를 가진 요소의 글꼴 크기를 미디어 쿼리에 따라 동적으로 변경합니다. 화면이 로드되거나 리사이즈될 때마다 실행됩니다.

결론

이제 jQuery를 사용하여 CSS 미디어 쿼리에 따라 동적으로 컨텐츠를 관리하는 방법을 알게 되었습니다. 이를 통해 웹 페이지를 더 유연하고 사용자 친화적으로 만들 수 있습니다.

추가 참고 자료

© 2018 Colin. All rights reserved.