간단한 HTML과 JavaScript를 사용한 To-Do 앱 개발
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 웹 개발 초보자 또는 HTML/CSS/JavaScript 기초 학습자
- 단순한 앱 개발 예제를 통해 DOM 조작 및 이벤트 처리 개념을 이해하고자 하는 개발자
- 난이도: 초급 (기본적인 HTML/CSS/JavaScript 지식 필요)
핵심 요약
- HTML은 앱의 구조(입력 필드, 버튼, 리스트)를 담당
- JavaScript는 이벤트 처리(버튼 클릭, 태스크 삭제) 및 DOM 조작(리스트 아이템 생성, 스타일 변경)을 수행
- CSS를 통해 시각적 피드백(완료 상태 표시) 제공
- 핵심 코드 예시:
```javascript
document.getElementById('addTaskBtn').addEventListener('click', function() { ... });
```
섹션별 세부 요약
1. HTML 구조 생성
요소: 사용자가 태스크를 입력할 수 있는 필드 제공
요소: "Add" 버튼을 통해 태스크 추가 기능 활성화
요소: 생성된 태스크를 표시하는 리스트 컨테이너
2. JavaScript 로직 구현
- 이벤트 리스너 설정: "Add" 버튼 클릭 시
addTaskBtn.addEventListener
실행 - 입력 검증:
taskText.trim()
을 통해 빈 입력 시alert
표시 - DOM 조작:
- document.createElement('li')
: 태스크 아이템 생성
- li.appendChild(deleteBtn)
: 삭제 버튼 추가
- taskList.appendChild(li)
: 리스트에 아이템 추가
- 태스크 삭제:
deleteBtn.addEventListener
로taskList.removeChild(li)
실행
3. CSS 스타일링
.done
클래스:
- text-decoration: line-through
로 완료 상태 표시
- color: gray
로 시각적 구분 제공
결론
- 실무 팁: localStorage를 사용해 태스크를 영구 저장하거나, 드래그 앤 드롭 기능을 추가해 UX 개선
- 핵심 구현 방법: HTML, CSS, JavaScript 분리 원칙 준수하며, 이벤트 처리와 DOM 조작을 체계적으로 설계
- 예제 실행:
index.html
파일을 브라우저에서 열어 태스크 추가, 삭제, 완료 상태 변경 기능 테스트 가능