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