과제(웹 개발 프로젝트2 - 랜딩페이지)

📂 자료 다운로드

1. 디자인(피그마 링크)

멋사_프론트엔드스쿨

Created with Figma

https://www.figma.com/file/Gn6gQJdYwImYsEYSzBXhud/%EB%A9%8B%EC%82%AC_%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%8A%A4%EC%BF%A8?node-id=49%3A1791

2. 요구사항 명세

1. 피그마를 참고하여 페이지 구현을 합니다.

2. 모바일 화면도 고려하여 페이지 구현을 합니다.

3. 스크롤시 헤더가 고정되게 합니다. (단, 처음에는 고정된 상태가 아닙니다.)

4. 스크롤 탑 버튼을 구현합니다.
1. 스크롤 탑 버튼은 스크롤시 나타납니다.
2. 스크롤 탑 버튼은 푸터 아래로 내려가지 않습니다.
3. 스크롤 탑 버튼을 누르면 스크롤이 최상단으로 올라갑니다. (단, 부드럽게 올라가야 합니다.)

5. 구독하기 모달창
1. 이메일을 입력하고 Subscribe 버튼을 클릭하면 모달창이 나타납니다.
2. 이메일 유효성 검사를 진행해야 합니다. (값이 들어가지 않거나 이메일 형식이 유효하지 않으면 alert 창으로 경고 문구가 떠야합니다.)
3. 이메일이 잘 입력되었다면 모달창이 뜹니다. 이때 모달창의 OK! I love HODU 버튼을 클릭하면 form이 제출되고 모달창이 닫힙니다.