[jQuery] jQuery CSS 미디어 쿼리 모션 경로
이번 포스트에서는 jQuery와 CSS 미디어 쿼리를 활용하여 모션 경로를 구현하는 방법에 대해 다루겠습니다.
목차
CSS 미디어 쿼리 소개
CSS 미디어 쿼리는 미디어 타입이나 장치의 특성에 따라 스타일을 다르게 적용할 수 있도록 하는 기술입니다. 화면 크기, 해상도 등과 같은 디바이스 특성에 따라 다른 스타일을 적용할 수 있어 responsivity를 확보할 수 있습니다.
jQuery를 사용한 CSS 속성 조작
jQuery는 JavaScript 라이브러리로, HTML 문서를 효율적으로 탐색하고 조작하는 데 사용됩니다. CSS 속성을 동적으로 변경하거나 애니메이션 효과를 추가할 때 특히 효과적으로 사용됩니다.
예를 들어, 아래와 같은 코드로 jQuery를 사용하여 요소의 CSS 속성을 변경할 수 있습니다.
$('.element').css('color', 'red');
CSS 미디어 쿼리와 jQuery를 활용한 모션 경로 구현
이제, CSS 미디어 쿼리와 jQuery를 결합하여 모션 경로를 구현해보겠습니다.
$(function(){
$(window).on('resize', function(){
if($(window).width() < 768){
$('.element').css('transform', 'translateX(100px)');
} else {
$('.element').css('transform', 'translateX(0)');
}
});
});
이 코드는 브라우저의 너비가 768px 미만이면 요소를 오른쪽으로 100px 이동하고, 그 이상이면 원래 위치로 되돌리는 기능을 구현한 것입니다.
이와 같이, CSS 미디어 쿼리와 jQuery를 활용하면 responsivity와 모션 효과를 동시에 구현할 수 있습니다.
이상으로 jQuery CSS 미디어 쿼리 모션 경로에 대해 알아보았습니다. 부족한 내용이 있을 수 있으니 참고 자료를 확인하시기 바랍니다.