JS LAB
    JS 4.4 · 4부. 브라우저와 DOM

    스타일과 클래스 제어

    classList 와 style 로 모양을 바꿉니다.

    예상 학습 시간 14분 실행 단추가 있는 예제는 고쳐서 실행해 볼 수 있습니다 난이도 초급
    개념 설명

    모양은 CSS 에 맡깁니다

    JavaScript 로 색과 크기를 직접 적을 수도 있지만, 대개는 그러지 않습니다. 모양은 CSS 에 적어 두고 JavaScript 는 class 를 붙였다 뗍니다.

    그래야 모양을 고칠 때 CSS 만 보면 되고, 상태가 여러 곳에 흩어지지 않습니다.

    최소 예제 · 편집 가능

    class 붙였다 떼기

    script.js 
    const card = document.querySelector("#card");

console.log(card.className);

card.classList.add("active");
console.log(card.className);

card.classList.remove("active");
console.log(card.className);
    출력
    card card active card

    마지막 줄에서 다시 뗐으므로 미리보기에는 원래 모양이 보입니다. remove 를 지우고 다시 실행해 보세요.

    상세 사용법

    toggle 과 contains

    toggle 은 있으면 떼고 없으면 붙입니다. 켜고 끄는 자리에 그대로 맞습니다.

    script.js 
    const card = document.querySelector("#card");

console.log(card.classList.contains("active"));

card.classList.toggle("active");
console.log(card.classList.contains("active"));

card.classList.toggle("active");
console.log(card.classList.contains("active"));
    출력
    false true false

    toggle 은 붙인 뒤인지도 돌려줍니다. 그 값을 그대로 조건에 사용할 수 있습니다.

    상세 사용법

    여러 요소에 한꺼번에

    script.js 
    const items = document.querySelectorAll(".item");

items.forEach((item, i) => {
	if (i % 2 === 0) {
		item.classList.add("done");
	}
});

console.log(document.querySelectorAll(".done").length);
    출력
    2
    상세 사용법

    style 로 직접 적기

    값이 계산되어 나오는 것(위치·너비 등)은 CSS 에 미리 적어 둘 수 없습니다. 그럴 때만 style 을 사용합니다.

    script.js 
    const bar = document.querySelector("#bar");
const percent = 40;

bar.style.width = `${percent}%`;
bar.style.backgroundColor = "tomato";

console.log(bar.style.width);
console.log(bar.style.backgroundColor);
    출력
    40% tomato

    CSS 에서 background-color 인 것이 JavaScript 에서는 backgroundColor 입니다. 하이픈이 사라지고 다음 글자가 대문자가 됩니다 — dataset 과 같은 규칙입니다(4.3).

    흔한 실수

    처음에 자주 걸리는 것

    1. className 에 값을 덮어씁니다

    card.className = "active" 는 원래 있던 class 를 모두 지웁니다. 하나만 더하려면 classList.add 입니다.

    2. 단위를 빠뜨립니다

    style.width = 40 은 듣지 않습니다. CSS 값이므로 "40px" 이나 "40%" 처럼 단위까지 적은 글자여야 합니다.

    3. 하이픈을 그대로 적습니다

    style.background-color 는 문법 오류입니다. style.backgroundColor 입니다.

    실습 문제

    직접 해보기

    1. 다크 모드 켜기 난이도 하

    #card 에 dark class 를 붙였다 뗀 뒤, 지금 붙어 있는지를 출력하세요.

    const card = document.querySelector("#card"); card.classList.add("dark"); card.classList.remove("dark"); console.log(card.classList.contains("dark"));
    2. 완료 표시하기 난이도 중

    목록에서 글자가 세 글자인 항목에만 done class 를 붙이고, 붙은 개수를 출력하세요.

    const items = document.querySelectorAll(".item"); items.forEach(item => { if (item.textContent.length === 3) { item.classList.add("done"); } }); console.log(document.querySelectorAll(".done").length);
    요약

    이 단원의 정리

    • 모양은 CSS 에 적어 두고 JavaScript 는 class 를 붙였다 뗍니다.
    • classList 의 add · remove · toggle · contains 를 사용합니다.
    • className 에 값을 넣으면 원래 class 가 모두 지워집니다.
    • 계산되어 나오는 값만 style 로 직접 적습니다.
    • CSS 의 하이픈 이름은 JavaScript 에서 대문자로 바뀝니다.