상세 컨텐츠

본문 제목

JavaScript에서 CSS 클래스를 다루는 방법: classList.toggle() 활용하기

공부/WEB

by micalcomanie 2025. 2. 17. 22:55

본문

728x90
반응형
SMALL

 

 

안녕하세요! 오늘은 JavaScript에서 CSS 클래스를 보다 유용하게 다루는 방법을 배운 내용을 정리해보겠습니다.
특히, classList.toggle()을 활용하여 스타일을 동적으로 변경하는 방법을 집중적으로 살펴보겠습니다.

1. classList.toggle()이란?

기본적으로 classList.toggle()은 특정 클래스를 추가하거나 제거하는 기능을 합니다.

📌 기본 문법

element.classList.toggle("class-name");
  • element: 클래스를 추가/제거할 HTML 요소
  • class-name: 추가 또는 제거할 클래스명
  • 요소에 해당 클래스가 없다면 추가, 있다면 제거하는 기능을 합니다.

2. JavaScript로 CSS 스타일 변경하기

아래 코드에서는 사용자가 <h1> 요소를 클릭할 때마다 파란색(cornflowerblue)과 토마토색(tomato) 으로 번갈아 변경됩니다.

🔹 HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Momentum</title>
</head>
<body>
    <div class="hello">
        <h1 class="sexy-font">grap me</h1>
    </div>
    <script src="app.js"></script>
</body>
</html>

🔹 CSS 코드 (style.css)

body {
    background-color: #f5f5dc;
}

h1 {
    color: cornflowerblue;
    transition: color 0.5s ease-in-out;
}

.active {
    color: tomato;
}

.sexy-font {
    font-style: italic;
}

🔹 JavaScript 코드 (app.js)

const h1 = document.querySelector("div.hello:first-child h1");

function handMouseenter() {
    h1.classList.toggle("active");
}

h1.addEventListener("click", handMouseenter);

📝 코드 설명

  1. document.querySelector("div.hello:first-child h1")를 사용하여 <h1> 요소를 선택합니다.
  2. handMouseenter() 함수에서 h1.classList.toggle("active")을 사용하여 클래스를 추가/제거합니다.
  3. h1.addEventListener("click", handMouseenter);를 사용하여 <h1>을 클릭할 때 색상이 변경되도록 합니다.

실행 결과

  • 클릭 전: 텍스트 색상이 cornflowerblue (파란색)
  • 클릭 후: 텍스트 색상이 tomato (빨간색)
  • 다시 클릭: 원래 색상으로 돌아감

3. classList.toggle()의 장점

기존의 classList.add()와 classList.remove()를 사용하면 다음과 같이 코드가 길어질 수 있습니다.

function handMouseenter() {
    const clickedClass = "active";
    if (h1.classList.contains(clickedClass)) {
        h1.classList.remove(clickedClass);
    } else {
        h1.classList.add(clickedClass);
    }
}

하지만, classList.toggle()을 사용하면 이 모든 과정을 한 줄로 줄일 수 있습니다!

function handMouseenter() {
    h1.classList.toggle("active");
}

✅ 더 깔끔하고 직관적인 코드 작성이 가능해집니다.

4. classList.toggle()을 활용한 추가 기능

🔹 배경색 변경 기능 추가하기

아래 코드를 활용하면 버튼 클릭 시 전체 배경색을 변경하는 기능을 추가할 수 있습니다.

const body = document.body;
const toggleBtn = document.createElement("button");
toggleBtn.innerText = "Change Background";
document.body.appendChild(toggleBtn);

toggleBtn.addEventListener("click", function() {
    body.classList.toggle("dark-mode");
});

🔹 추가할 CSS (style.css)

.dark-mode {
    background-color: black;
    color: white;
}

실행 결과

  • 버튼 클릭 시 배경색이 검은색(black)으로 변경됨
  • 다시 클릭하면 원래 색상으로 돌아감

오늘 배운 내용을 정리하면:

✅ classList.toggle()을 사용하면 CSS 클래스를 간단하게 추가/제거할 수 있다.
✅ 기존 classList.add() / classList.remove() 방식보다 코드가 간결하다.
✅ 클릭 이벤트를 활용하여 동적인 스타일 변경이 가능하다.
✅ 버튼을 추가하여 배경색을 변경하는 등 다양한 기능을 적용할 수 있다.

 

728x90
반응형
LIST

'공부 > WEB' 카테고리의 다른 글

JavaScript를 활용한 간단한 로그인 기능 구현하기  (1) 2025.03.03
JavaScript로 CSS 스타일 변경하기  (1) 2025.02.17
자바스크립트 이벤트 리스너 심화: window 객체 활용하기  (1) 2025.02.16
자바스크립트 이벤트 리스너(Event Listener) 기초 배우기  (1) 2025.02.16
자바스크립트로 HTML 제목(title) 변경하기  (2) 2025.02.10

관련글 더보기

티스토리툴바