소개
이 단계별 프로젝트에서는 HTML, CSS 및 JavaScript 를 사용하여 Task Timer 웹 애플리케이션을 만드는 방법을 배웁니다. 이 웹 앱을 통해 사용자는 작업을 추가하고, 각 작업에 대한 타이머를 시작 및 중지하고, 작업을 삭제할 수 있습니다. 이 프로젝트가 끝나면 현대적이고 사용자 친화적인 인터페이스를 갖춘 완벽하게 작동하는 Task Timer 웹 앱을 갖게 됩니다.
👀 미리보기
🎯 작업
이 프로젝트에서는 다음을 배우게 됩니다.
- Task Timer 웹 앱의 기본 HTML 구조를 만드는 방법
- CSS 를 사용하여 웹 앱의 스타일을 지정하여 시각적으로 매력적으로 만드는 방법
- JavaScript 기능을 구현하여 앱에 작업을 추가하는 방법
- 각 작업에 대한 타이머를 시작하고 중지하는 타이머 기능을 추가하는 방법
- 앱에서 작업을 삭제하는 기능을 구현하는 방법
🏆 성과
이 프로젝트를 완료하면 다음을 수행할 수 있습니다.
- 웹 양식에서 사용자 입력 및 유효성 검사 처리
- JavaScript 를 사용하여 동적으로 타이머 시작 및 중지
- 사용자 친화적인 형식으로 시간 업데이트 및 표시
- JavaScript 를 사용하여 DOM (Document Object Model) 에서 요소 삭제
- 간단한 웹 애플리케이션 프로젝트 구조화 및 구성
- 버튼을 만들고 이벤트 리스너를 연결
- 사용자 상호 작용 후 입력 필드 지우기
- 사용자 작업에 따라 버튼 활성화 및 비활성화
- 데이터 속성 (data attributes) 을 사용하여 HTML 요소에 정보 저장
