[jQuery] jQuery CSS 미디어 쿼리 텍스트 반응

26 Dec 2023

jQuery

CSS 미디어 쿼리는 웹 페이지가 여러 종류의 디바이스와 화면 크기에 반응하도록 하는 데 유용합니다. jQuery를 사용하여 미디어 쿼리 기능을 확장하여 특정 텍스트의 스타일을 동적으로 조절할 수 있습니다.

1. jQuery CSS 메소드

jQuery의 css() 메소드를 사용하면 특정 요소의 CSS를 변경할 수 있습니다. 미디어 쿼리 조건에 따라 텍스트의 스타일이 변경되도록 하는 방법을 살펴보겠습니다.

$(document).ready(function() {
    if($(window).width() < 768) {
        $('#textElement').css('font-size', '14px');
    } else {
        $('#textElement').css('font-size', '16px');
    }
});

위 코드는 textElement라는 아이디를 가진 요소의 폰트 크기를 미디어 쿼리에 따라 동적으로 변경합니다.

2. resize 이벤트 사용

브라우저의 창 크기가 변경될 때마다 텍스트의 스타일을 조정하려면 resize 이벤트를 사용해야 합니다.

$(window).on('resize', function() {
    if($(this).width() < 768) {
        $('#textElement').css('font-size', '14px');
    } else {
        $('#textElement').css('font-size', '16px');
    }
});

3. jQuery를 활용한 미디어 쿼리 텍스트 반응의 장점

이 방법을 사용하면 CSS 미디어 쿼리보다 더 많은 제어권을 갖게 됩니다. JavaScript 조건에 따라 더 다양한 동작을 구현할 수 있으며, 더 복잡한 동작이 필요할 때 유용하게 사용할 수 있습니다.

요약

jQuery를 사용하여 CSS 미디어 쿼리에 따라 텍스트의 스타일을 동적으로 조절했습니다. JavaScript를 이용하면 CSS 미디어 쿼리보다 더 다양하고 동적인 스타일 변화를 구현할 수 있습니다.

참고문헌:

jQuery 공식 문서: https://jquery.com/
MDN 웹 문서: https://developer.mozilla.org/ko/