0Pricing
JavaScript Academy · 강의

속성과 클래스 수정하기

setAttribute와 classList API를 사용합니다.

속성과 클래스 수정하기은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

속성과 클래스

요소에는 href나 data-id 같은 속성과 CSS 클래스가 있습니다. JavaScript는 이 둘을 읽고 변경할 수 있는 정밀한 API를 제공합니다.

getAttribute

getAttribute는 속성 값을 문자열로 읽으며, 속성이 없으면 null을 반환합니다.

const link = document.querySelector("a");
console.log(link.getAttribute("href"));

setAttribute

setAttribute는 속성을 만들거나 업데이트합니다. 값은 항상 문자열입니다.

link.setAttribute("href", "https://example.com");
link.setAttribute("target", "_blank");

removeAttribute와 hasAttribute

removeAttribute로 속성을 삭제하고, hasAttribute로 존재 여부를 확인합니다.

if (link.hasAttribute("target")) {
  link.removeAttribute("target");
}

프로퍼티와 속성 비교

많은 속성은 요소 프로퍼티로도 존재합니다(element.id나 input.value 등). 프로퍼티는 현재 상태를 반영하지만, 속성에는 대개 초기 HTML 값이 저장됩니다.

input.value;                 // current value
input.getAttribute("value"); // original default

data-* 데이터 속성 모음

사용자 지정 data-* 속성은 dataset 객체를 통해 camelCase 키로 노출됩니다.

const card = document.querySelector(".card");
console.log(card.dataset.userId); // from data-user-id
card.dataset.state = "open";       // sets data-state

classList 개요

classList는 className 문자열을 직접 편집하지 않고 클래스를 관리할 수 있는 실시간 객체입니다.

const box = document.querySelector(".box");
console.log(box.classList);

classList.add와 remove

add와 remove는 하나 이상의 클래스 이름을 받으며, 중복되거나 존재하지 않는 클래스도 문제없이 처리합니다.

box.classList.add("active", "highlight");
box.classList.remove("hidden");

classList.toggle

toggle은 클래스가 없으면 추가하고 있으면 제거하며, 변경된 상태를 불리언 값으로 반환합니다. 두 번째 인수로 켜거나 끄는 동작을 강제할 수 있습니다.

box.classList.toggle("open");
box.classList.toggle("open", true); // force add

classList.contains와 replace

contains는 포함 여부를 확인하고, replace는 한 클래스를 다른 클래스로 그 자리에서 바꿉니다.

if (box.classList.contains("active")) {
  box.classList.replace("active", "inactive");
}

className보다 classList가 나은 이유

className을 문자열로 편집하면 다른 클래스를 덮어써서 없앨 위험이 있습니다. classList는 지정한 클래스만 안전하게 변경합니다.

box.className = "active"; // wipes all other classes
box.classList.add("active"); // keeps the rest

빠른 확인

toggle 동작을 선택해 보세요.

복습

getAttribute/setAttribute/removeAttribute/hasAttribute로 속성을 읽고 쓰며, dataset을 통해 data-*에 접근합니다. classList의 add, remove, toggle, contains, replace 메서드로 클래스를 관리하면 className을 덮어쓰는 것보다 안전합니다.

자주 묻는 질문

“속성과 클래스 수정하기” 강의는 무료인가요?

네 — “속성과 클래스 수정하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“속성과 클래스 수정하기”에서 뭘 배우나요?

setAttribute와 classList API를 사용합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“속성과 클래스 수정하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 텍스트와 HTML 콘텐츠 변경하기
  2. 요소 생성 및 삽입하기
  3. 속성과 클래스 수정하기
  4. 노드 삭제 및 교체하기
← JavaScript Academy(으)로 돌아가기