소개
이 단계별 프로젝트에서는 HTML, CSS 및 JavaScript 를 사용하여 현대적이고 시각적으로 매력적인 Expense Splitter 웹 애플리케이션을 만들 것입니다. 이 애플리케이션을 통해 여러 사람 간의 비용을 분할하고 누가 누구에게 얼마를 빚지고 있는지 계산할 수 있습니다. 처음부터 시작하여 프로젝트를 점진적으로 구축하기 위한 각 단계를 다룰 것입니다.
👀 미리보기
🎯 작업
이 프로젝트에서 다음을 배우게 됩니다.
- HTML 및 CSS 를 사용하여 반응형 웹 페이지 레이아웃을 만드는 방법
- JavaScript 를 사용하여 비용과 잔액을 계산하는 대화형 기능을 구현하는 방법
- 현대적이고 시각적으로 매력적인 디자인을 갖도록 웹 페이지 스타일을 지정하는 방법
- 비용을 추가하고 결과를 동적으로 표시하기 위한 사용자 입력을 처리하는 방법
- 데이터 정확성을 보장하고 문제를 방지하기 위해 오류 처리를 구현하는 방법
🏆 성과
이 프로젝트를 완료하면 다음을 수행할 수 있습니다.
- 프로젝트 파일을 생성하고 웹 애플리케이션의 기본 구조를 설정합니다.
- 입력 필드와 자리 표시자를 포함하여 Expense Splitter 앱의 HTML 구조를 구축합니다.
- CSS 를 사용하여 현대적이고 다채로운 디자인을 달성하도록 웹 애플리케이션의 스타일을 지정합니다.
- 비용 추가, 비용 목록 업데이트 및 비용 요약 계산을 처리하는 JavaScript 기능을 구현합니다.
- 앱을 대화형으로 만들기 위해 이벤트 리스너를 추가합니다.
- 비용 추가 및 요약 업데이트와 같은 특정 작업을 수행하는 JavaScript 함수를 만듭니다.
