jQuery에서는 CSS 스타일을 동적으로 조작하기 위한 다양한 메소드를 제공합니다. 이 포스트에서는 jQuery의 CSS 메소드를 소개하고 활용하는 방법에 대해 다루겠습니다.

1. css() 메소드

css() 메소드는 선택한 요소의 CSS 속성 값을 가져오거나 설정할 수 있습니다. 다음은 기본적인 사용 예시입니다.

// CSS 속성 값 가져오기
var color = $("p").css("color");
console.log(color); // 현재 p 요소의 color 속성 값 출력

// CSS 속성 값 설정하기
$("p").css("color", "red"); // p 요소의 color 속성을 빨간색으로 변경

2. addClass() 및 removeClass() 메소드

addClass() 및 removeClass() 메소드를 사용하여 요소에 클래스를 추가하거나 제거할 수 있습니다. 다음은 사용 예시입니다.

// 클래스 추가
$("p").addClass("highlight");

// 클래스 제거
$("p").removeClass("highlight");

3. toggleClass() 메소드

toggleClass() 메소드를 사용하여 요소에 클래스를 토글(켜고 끄기)할 수 있습니다. 다음은 사용 예시입니다.

// 클래스 토글
$("p").toggleClass("highlight");

4. css() 메소드의 객체 인자 활용

css() 메소드에 객체를 전달하여 여러 CSS 속성을 한 번에 설정할 수도 있습니다. 다음은 사용 예시입니다.

// 여러 CSS 속성 한 번에 설정
$("p").css({
  "color": "red",
  "font-size": "16px"
});

이러한 jQuery의 CSS 메소드들을 활용하여 동적으로 요소의 스타일을 조작할 수 있습니다.

• 참고: jQuery 공식 문서
• 참고: MDN 웹 문서

Markdown 포맷을 사용하여 jQuery의 CSS 메소드를 설명하는 블로그 포스트를 작성했습니다. 필요에 따라 코드 예시와 관련 참고 자료를 추가하여 독자들이 더 쉽게 이해할 수 있도록 하였습니다.