CSS 미디어 쿼리는 웹페이지가 특정 장치나 화면 크기에 따라 다른 스타일을 사용할 수 있도록 해줍니다. jQuery를 사용하여 CSS 미디어 쿼리를 통해 다양한 디바이스나 뷰포트 크기에 따라 동적으로 스타일을 변경하는 방법을 알아보겠습니다.

준비물

• jQuery 라이브러리
• CSS 파일

방법

1. jQuery를 사용하여 미디어 쿼리 확인하기

먼저, jQuery를 사용하여 현재 뷰포트의 너비를 가져와서 원하는 범위에 해당하는지 확인해야 합니다.

var viewportWidth = $(window).width();
if(viewportWidth < 768){
   // 뷰포트 너비가 768px 미만인 경우
} else {
   // 뷰포트 너비가 768px 이상인 경우
}

2. 스타일 변경

미디어 쿼리에 해당하는 조건을 확인한 후에는 스타일을 변경할 수 있습니다.

if(viewportWidth < 768){
   $('selector').css('property', 'value');
} else {
   $('selector').css('property', 'value');
}

예시

아래는 뷰포트가 768px 미만인 경우와 768px 이상인 경우에 따라 배경색을 변경하는 예시입니다.

var viewportWidth = $(window).width();
if(viewportWidth < 768){
   $('body').css('background-color', 'lightblue');
} else {
   $('body').css('background-color', 'lightgreen');
}

결론

이제 jQuery를 사용하여 CSS 미디어 쿼리에 따라 동적으로 스타일을 변경할 수 있는 방법에 대해 알아보았습니다. 이를 통해 웹페이지를 다양한 디바이스에 맞게 최적화하는 데 도움이 될 것입니다.