[jQuery] 08. addClass(), removeClass(), toggleClass() 사용법

지난 글에서는 jQuery의 attr()와 prop()를 사용해서 HTML 속성과 상태 값을 다루는 방법을 알아봤습니다.

이번 글에서는 jQuery에서 CSS 클래스를 추가하고, 제거하고, 켰다 껐다 할 수 있는 addClass(), removeClass(), toggleClass()에 대해 알아보겠습니다.

이 메서드들은 화면 스타일을 동적으로 바꿀 때 정말 자주 사용됩니다. 버튼을 클릭했을 때 선택된 메뉴 표시, 다크 모드 전환, 카드 강조 효과 같은 기능을 만들 때 유용합니다.

1. class를 왜 jQuery로 다룰까?

HTML 요소의 스타일을 바꿀 때 css()를 사용할 수도 있습니다.

$("#box").css("background", "blue");

하지만 스타일이 많아지면 jQuery 코드가 길어지고 관리하기 어려워집니다.

이럴 때는 CSS에 미리 클래스를 만들어두고, jQuery에서는 그 클래스를 추가하거나 제거하는 방식이 더 깔끔합니다.

$("#box").addClass("active");

즉, 스타일 내용은 CSS에서 관리하고, jQuery는 class를 붙이거나 떼는 역할만 하게 만드는 것입니다.

2. addClass()란?

addClass()는 선택한 요소에 CSS 클래스를 추가하는 메서드입니다.

📌 기본 문법

$("선택자").addClass("클래스명");

주의할 점은 클래스명 앞에 점(.)을 붙이지 않는다는 것입니다.

// 잘못된 예
$("#box").addClass(".active");

// 올바른 예
$("#box").addClass("active");

선택자에서는 class를 찾을 때 .을 붙이지만, addClass() 안에는 클래스 이름만 작성합니다.

3. addClass() 기본 예제

버튼을 클릭하면 박스에 active 클래스를 추가해보겠습니다.

📌 예제 코드

<style>
  .box {
    width: 200px;
    padding: 20px;
    background: #eeeeee;
  }

  .active {
    background: royalblue;
    color: white;
    font-weight: bold;
  }
</style>

<div id="box" class="box">
  클래스가 추가될 박스입니다.
</div>

<br>

<button id="addBtn">클래스 추가</button>

<script>
  $("#addBtn").click(function() {
    $("#box").addClass("active");
  });
</script>

📌 실행 결과

처음에는 회색 박스가 표시됩니다.
클래스 추가 버튼을 클릭합니다.
박스에 active 클래스가 추가됩니다.
배경색, 글자색, 글자 굵기가 변경됩니다.

4. removeClass()란?

removeClass()는 선택한 요소에서 CSS 클래스를 제거하는 메서드입니다.

📌 기본 문법

$("선택자").removeClass("클래스명");

이미 적용되어 있는 클래스를 제거해서 원래 스타일로 되돌릴 때 자주 사용합니다.

5. removeClass() 기본 예제

이번에는 active 클래스가 적용된 박스에서 클래스를 제거해보겠습니다.

📌 예제 코드

<style>
  .box {
    width: 200px;
    padding: 20px;
    background: #eeeeee;
  }

  .active {
    background: royalblue;
    color: white;
    font-weight: bold;
  }
</style>

<div id="box" class="box active">
  active 클래스가 적용된 박스입니다.
</div>

<br>

<button id="removeBtn">클래스 제거</button>

<script>
  $("#removeBtn").click(function() {
    $("#box").removeClass("active");
  });
</script>

📌 실행 결과

처음에는 active 클래스가 적용된 상태로 표시됩니다.
클래스 제거 버튼을 클릭합니다.
active 클래스가 제거됩니다.
박스가 원래 회색 스타일로 돌아옵니다.

6. addClass()와 removeClass() 함께 사용하기

addClass()와 removeClass()를 함께 사용하면 버튼에 따라 스타일을 켜고 끌 수 있습니다.

📌 예제 코드

<style>
  .box {
    width: 220px;
    padding: 20px;
    background: #eeeeee;
    border-radius: 6px;
  }

  .active {
    background: seagreen;
    color: white;
    font-weight: bold;
  }
</style>

<div id="box" class="box">
  상태가 변경될 박스입니다.
</div>

<br>

<button id="onBtn">활성화</button>
<button id="offBtn">비활성화</button>

<script>
  $("#onBtn").click(function() {
    $("#box").addClass("active");
  });

  $("#offBtn").click(function() {
    $("#box").removeClass("active");
  });
</script>

📌 실행 결과

활성화 버튼을 클릭하면 active 클래스가 추가됩니다.
박스의 색상과 글자 스타일이 변경됩니다.
비활성화 버튼을 클릭하면 active 클래스가 제거됩니다.
박스가 원래 스타일로 돌아옵니다.

7. toggleClass()란?

toggleClass()는 클래스가 없으면 추가하고, 이미 있으면 제거하는 메서드입니다.

즉, 하나의 버튼으로 스타일을 켰다 껐다 할 수 있습니다.

📌 기본 문법

$("선택자").toggleClass("클래스명");

토글 버튼, 메뉴 열기/닫기, 다크 모드 전환 같은 기능을 만들 때 자주 사용합니다.

8. toggleClass() 기본 예제

버튼 하나로 박스의 active 클래스를 추가했다가 제거해보겠습니다.

📌 예제 코드

<style>
  .box {
    width: 220px;
    padding: 20px;
    background: #eeeeee;
    border-radius: 6px;
  }

  .active {
    background: royalblue;
    color: white;
    font-weight: bold;
  }
</style>

<div id="box" class="box">
  버튼을 누를 때마다 스타일이 바뀝니다.
</div>

<br>

<button id="toggleBtn">클래스 토글</button>

<script>
  $("#toggleBtn").click(function() {
    $("#box").toggleClass("active");
  });
</script>

📌 실행 결과

처음에는 기본 회색 박스가 표시됩니다.
버튼을 한 번 클릭하면 active 클래스가 추가됩니다.
버튼을 다시 클릭하면 active 클래스가 제거됩니다.
클릭할 때마다 스타일이 번갈아 변경됩니다.

9. 여러 요소 중 클릭한 요소만 변경하기

class가 같은 요소가 여러 개 있을 때 클릭한 요소만 변경하고 싶다면 $(this)를 사용합니다.

📌 예제 코드

<style>
  .menu {
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid #cccccc;
    cursor: pointer;
  }

  .selected {
    background: royalblue;
    color: white;
    font-weight: bold;
  }
</style>

<button class="menu">메뉴 1</button>
<button class="menu">메뉴 2</button>
<button class="menu">메뉴 3</button>

<script>
  $(".menu").click(function() {
    $(this).toggleClass("selected");
  });
</script>

📌 실행 결과

메뉴 버튼 3개가 화면에 표시됩니다.
메뉴 1을 클릭하면 메뉴 1만 선택 스타일로 변경됩니다.
메뉴 2를 클릭하면 메뉴 2만 선택 스타일로 변경됩니다.
이미 선택된 메뉴를 다시 클릭하면 선택 스타일이 제거됩니다.

10. 하나만 선택되게 만들기

여러 메뉴 중 하나만 선택되게 만들고 싶을 때가 있습니다.

이럴 때는 먼저 모든 요소에서 selected 클래스를 제거한 뒤, 클릭한 요소에만 selected 클래스를 추가하면 됩니다.

📌 예제 코드

<style>
  .tab {
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid #cccccc;
    cursor: pointer;
  }

  .selected {
    background: black;
    color: white;
    font-weight: bold;
  }
</style>

<button class="tab">HTML</button>
<button class="tab">CSS</button>
<button class="tab">jQuery</button>

<script>
  $(".tab").click(function() {
    $(".tab").removeClass("selected");
    $(this).addClass("selected");
  });
</script>

📌 실행 결과

HTML 버튼을 클릭하면 HTML 버튼만 선택됩니다.
CSS 버튼을 클릭하면 HTML 버튼의 선택은 해제되고 CSS 버튼만 선택됩니다.
jQuery 버튼을 클릭하면 jQuery 버튼만 선택됩니다.
항상 하나의 메뉴만 선택된 상태로 유지됩니다.

11. hasClass()로 클래스가 있는지 확인하기

클래스가 있는지 확인하고 싶을 때는 hasClass()를 사용할 수 있습니다.

hasClass()는 해당 클래스가 있으면 true, 없으면 false를 반환합니다.

📌 기본 문법

$("선택자").hasClass("클래스명");

📌 예제 코드

<style>
  .active {
    background: orange;
    font-weight: bold;
  }
</style>

<p id="text" class="active">클래스 확인용 문장입니다.</p>
<button id="checkBtn">클래스 확인</button>

<script>
  $("#checkBtn").click(function() {
    var result = $("#text").hasClass("active");

    if (result) {
      alert("active 클래스가 있습니다.");
    } else {
      alert("active 클래스가 없습니다.");
    }
  });
</script>

📌 실행 결과

버튼을 클릭하면 active 클래스가 있는지 확인합니다.
active 클래스가 있으므로 alert 창에 "active 클래스가 있습니다."가 표시됩니다.

12. 다크 모드 예제

toggleClass()를 활용하면 간단한 다크 모드 전환도 만들 수 있습니다.

📌 예제 코드

<style>
  .page {
    padding: 20px;
    background: white;
    color: black;
  }

  .dark {
    background: #222222;
    color: white;
  }
</style>

<div id="page" class="page">
  <h3>jQuery 다크 모드</h3>
  <p>버튼을 클릭하면 화면 분위기가 바뀝니다.</p>
</div>

<button id="darkBtn">다크 모드 전환</button>

<script>
  $("#darkBtn").click(function() {
    $("#page").toggleClass("dark");
  });
</script>

📌 실행 결과

처음에는 흰 배경과 검은 글자로 표시됩니다.
다크 모드 전환 버튼을 클릭하면 dark 클래스가 추가됩니다.
배경은 어두운 색, 글자는 흰색으로 변경됩니다.
버튼을 다시 클릭하면 dark 클래스가 제거되고 원래 상태로 돌아옵니다.

13. 전체 예제

이번에는 addClass(), removeClass(), toggleClass(), hasClass()를 함께 사용한 전체 예제를 만들어보겠습니다.

📌 예제 코드

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery class 메서드</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <style>
    .card {
      width: 260px;
      padding: 20px;
      background: #eeeeee;
      border-radius: 8px;
      margin-bottom: 10px;
    }

    .active {
      background: royalblue;
      color: white;
      font-weight: bold;
    }
  </style>
</head>
<body>

  <h2>jQuery class 메서드 공부</h2>

  <div id="card" class="card">
    클래스 상태가 변경될 카드입니다.
  </div>

  <button id="addBtn">추가</button>
  <button id="removeBtn">제거</button>
  <button id="toggleBtn">토글</button>
  <button id="checkBtn">확인</button>

  <script>
    $(function() {
      $("#addBtn").click(function() {
        $("#card").addClass("active");
      });

      $("#removeBtn").click(function() {
        $("#card").removeClass("active");
      });

      $("#toggleBtn").click(function() {
        $("#card").toggleClass("active");
      });

      $("#checkBtn").click(function() {
        if ($("#card").hasClass("active")) {
          alert("현재 active 클래스가 있습니다.");
        } else {
          alert("현재 active 클래스가 없습니다.");
        }
      });
    });
  </script>

</body>
</html>

📌 실행 결과

추가 버튼을 클릭하면 카드에 active 클래스가 추가됩니다.
제거 버튼을 클릭하면 active 클래스가 제거됩니다.
토글 버튼을 클릭하면 active 클래스가 추가되거나 제거됩니다.
확인 버튼을 클릭하면 현재 active 클래스가 있는지 alert 창으로 확인할 수 있습니다.

14. 자주 하는 실수

📌 1. 클래스명 앞에 .을 붙이는 경우

addClass(), removeClass(), toggleClass(), hasClass() 안에는 클래스명만 작성합니다.

// 잘못된 예
$("#box").addClass(".active");

// 올바른 예
$("#box").addClass("active");

📌 2. 선택자와 클래스명을 헷갈리는 경우

선택자로 class를 찾을 때는 .을 붙이고, 메서드 안에서 클래스명을 쓸 때는 .을 붙이지 않습니다.

// class가 box인 요소 선택
$(".box")

// active 클래스 추가
$(".box").addClass("active");

📌 3. css()와 class 메서드를 섞어서 복잡하게 만드는 경우

간단한 스타일 하나만 바꿀 때는 css()도 괜찮습니다.

하지만 여러 스타일을 반복해서 사용한다면 CSS 클래스를 만들어두고 addClass(), removeClass(), toggleClass()로 제어하는 것이 더 관리하기 쉽습니다.

📌 4. jQuery 연결을 빼먹는 경우

class 관련 메서드도 jQuery 기능이므로 jQuery 라이브러리를 먼저 연결해야 합니다.

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

15. 핵심 정리

addClass()는 선택한 요소에 클래스를 추가합니다.
removeClass()는 선택한 요소에서 클래스를 제거합니다.
toggleClass()는 클래스가 없으면 추가하고, 있으면 제거합니다.
hasClass()는 특정 클래스가 있는지 확인합니다.
메서드 안에 클래스명을 작성할 때는 점(.)을 붙이지 않습니다.
여러 스타일을 관리할 때는 css()보다 class 제어 방식이 더 깔끔할 수 있습니다.
하나만 선택되는 탭 메뉴는 removeClass() 후 addClass() 방식으로 만들 수 있습니다.

이번 글에서는 jQuery의 addClass(), removeClass(), toggleClass(), hasClass() 사용법에 대해 알아봤습니다.

class 제어는 실제 웹 화면에서 선택 효과, 강조 효과, 다크 모드, 탭 메뉴를 만들 때 자주 사용됩니다.

다음 글에서는 [jQuery] 09. show(), hide(), toggle() 사용법에 대해 알아보겠습니다.

'Computer Science > JQuery' 카테고리의 다른 글

[jQuery] 10. fadeIn(), fadeOut(), fadeToggle() 사용법 (0)	2026.06.20
[jQuery] 09. show(), hide(), toggle() 사용법 (0)	2026.06.20
[jQuery] 07. attr()와 prop() 사용법 (0)	2026.06.19
[jQuery] 06. css()로 스타일 변경하기 (0)	2026.05.21
jQuery 선택자 개념 정리 한눈에정리(그림포함) (0)	2026.05.13