DOM 조작 — 페이지 제어하기

// 요소 선택 — CSS 셀렉터와 동일!
const title = document.querySelector("h1");
const btn = document.querySelector("#myBtn");
const cards = document.querySelectorAll(".card");

// 텍스트 변경
title.textContent = "새 제목!";

// 스타일 변경
title.style.color = "#4ECDC4";
title.style.fontSize = "2rem";

// 클래스 추가/제거/토글
btn.classList.add("active");
btn.classList.remove("hidden");
btn.classList.toggle("dark");

// 1. 새 요소 생성
const newCard = document.createElement("div");

// 2. 내용과 스타일 설정
newCard.textContent = "새로 추가된 카드!";
newCard.classList.add("card");
newCard.style.background = "#E8FAF7";

// 3. 페이지에 추가
const container = document.querySelector("#list");
container.appendChild(newCard);

// 또는 innerHTML로 한번에 (주의: 보안 위험)
container.innerHTML += '<div class="card">HTML 직접 삽입</div>';