[jQuery] jQuery CSS 변환
CSS 변환은 웹 요소의 모양, 크기 및 위치를 조정하는 데 사용됩니다. jQuery를 사용하여 CSS 변환을 수행하는 방법을 알아보겠습니다.
1. .css() 메서드
jQuery의 .css() 메서드를 사용하여 요소의 CSS 속성을 변경할 수 있습니다.
예를 들어, 아래의 코드는 div 요소의 너비를 300px로, 높이를 200px로 변환합니다.
$("div").css({ "width": "300px", "height": "200px" });
2. 애니메이션과 함께 사용하기
CSS 변환을 부드럽게 만들기 위해 jQuery의 애니메이션 기능을 사용할 수 있습니다.
예를 들어, 아래의 코드는 div 요소를 300px의 크기로 확장하는 애니메이션을 추가합니다.
$("div").animate({ width: "300px", height: "300px" }, 1000);
3. 클래스 추가 및 제거
CSS 변환을 위해 클래스를 추가하고 제거하는 것도 효과적인 방법입니다.
예를 들어, toggleClass() 메서드를 사용하여 클래스를 토글할 수 있습니다.
$("div").toggleClass("big");
위의 코드는 div 요소에 big 클래스를 추가하거나 제거합니다.
jQuery를 사용하여 CSS 변환을 수행하는 방법을 알아보았습니다. 이제 여러분은 웹 요소를 변환하고 동적으로 스타일을 변경할 수 있을 것입니다.