classList 2

JavaScript: DOM 총정리! 나만의 인터랙티브 투두 리스트(To-Do List) 만들기 📝

안녕하세요, 독자 여러분! 개발자의 삶입니다. 😊20일차에는 스타일을 바꾸는 classList, 21일차에는 요소를 만드는 createElement, 그리고 22일차에는 요소를 지우는 remove를 배웠습니다. 이 3일간의 여정은 바로 오늘을 위한 준비운동이었습니다.오늘은 웹 개발 입문의 꽃이라 불리는 '인터랙티브 투두 리스트(To-Do List)'를 직접 만들어보겠습니다. 할 일을 추가하고, 다 한 일은 줄을 그어 표시하고, 필요 없으면 삭제하는 기능까지! 지금까지 배운 모든 DOM 조작 기술을 총동원해 봅시다.1. 도입단순히 화면에 글자를 띄우는 것을 넘어, 사용자가 직접 데이터를 추가하고 관리하는 애플리케이션을 만드는 것은 개발자로서 큰 즐거움입니다. 오늘 만들 투두 리스트는 작지만, 실제 웹 서..

IT/Javascript 2025.12.25

JavaScript: 스타일 제어의 정석, classList (add, remove, toggle) 사용법 🎨

안녕하세요, 독자 여러분! 개발자의 삶입니다. 😊19일차 포스팅에서는 비교 연산자와 논리 연산자를 사용해 조건에 따라 다르게 동작하는 계산기를 만들어 보았습니다. 당시 성공과 실패 메시지의 색상을 바꾸기 위해 display.style.color = "blue"처럼 자바스크립트에서 직접 색상을 지정했었죠.하지만 코드가 길어지고 디자인이 복잡해지면, 자바스크립트 안에서 일일이 스타일을 지정하는 것은 매우 비효율적입니다. 오늘은 CSS의 힘을 빌려 스타일을 훨씬 깔끔하고 스마트하게 관리하는 방법인 classList에 대해 알아보겠습니다.1. 도입자바스크립트로 element.style.backgroundColor = "black"이라고 작성하는 것은 마치 인형의 머리카락을 그때그때 매직으로 칠하는 것과 같습니..

IT/Javascript 2025.12.14