[jQuery] jQuery CSS 클래스 추가

26 Dec 2023

웹 개발에서 jQuery를 사용하면 동적으로 HTML 요소에 CSS 클래스를 추가할 수 있습니다. 여기에서는 jQuery를 이용하여 CSS 클래스를 추가하는 방법에 대해 알아보겠습니다.

1. jQuery 라이브러리 추가하기

jQuery 라이브러리를 사용하려면 먼저 해당 라이브러리를 HTML 문서에 추가해야 합니다. 일반적으로 다음과 같은 형태로 jQuery를 추가할 수 있습니다:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

jQuery를 사용하여 특정 이벤트가 발생했을 때 CSS 클래스를 추가하는 방법은 아래와 같습니다:

$(document).ready(function(){
  $("#myElement").click(function(){
    $("#myElement").addClass("highlight");
  });
});

위의 코드에서, #myElement는 CSS 클래스를 추가할 HTML 요소의 선택자이고, highlight는 추가할 CSS 클래스의 이름입니다.

이제 #myElement를 클릭하면 highlight 클래스가 동적으로 추가됩니다.

이렇게 jQuery를 사용하여 HTML 요소에 CSS 클래스를 추가할 수 있습니다. 이를 통해 웹 페이지의 인터랙티브한 요소를 동적으로 변경할 수 있습니다.