[김대영]Sprint1&2 미션 제출

[daeyeong1573]

요구사항

배포주소 : https://fs13kdysprint.netlify.app/

기본

• [0] React 등 UI 라이브러리 사용 없이 순수 HTML/CSS로 구현
• [0] PC 사이즈 기준 디자인 구현
• [0] Netlify 배포 (참고)
• [0] 랜딩 페이지 URL: /
• [0] <title> = 판다마켓
• [0] 로고 클릭 → /
• [0] 로그인 버튼 클릭 → /login (빈 페이지)
• [0] "구경하러 가기" 버튼 클릭 → /items (빈 페이지)
• [0] Privacy Policy 클릭 → /privacy, FAQ 클릭 → /faq (모두 빈 페이지)
• [0] SNS 아이콘(페이스북·트위터·유튜브·인스타그램) 클릭 → 새 창으로 각 홈페이지 이동
• [0] GNB(로고 + 로그인 버튼) 스크롤 시 상단 고정
• [0] 너비 ≥ 1920px: 배경은 꽉 채우고, 내부 요소 위치 고정, 여백만 증가
• [0] 너비 < 1920px: 로고 왼쪽 여백 200px / 로그인 버튼 오른쪽 여백 200px 유지, 두 요소 간 거리 좁아짐
• [0] 너비 ≥ 1920px: 내부 요소 동일 간격 유지하며 가운데 정렬
• [0] 너비 < 1920px: 하단 "codeit-2024" 왼쪽 200px / SNS 아이콘 오른쪽 200px 유지, Privacy·FAQ와 균등 간격 유지
• [0] 클릭 가능한 요소에 cursor: pointer 적용

[0] "판다마켓" 로고 클릭 시 루트 페이지("/")로 이동합니다.
[0] SNS 아이콘들은 클릭 시 각각 "https://www.google.com/", "https://www.kakaocorp.com/page/" 으로 이동합니다.
[0] input 요소에 focus in 일 때, 테두리 색상은 ##3692FF입니다.
[0] input 요소에 focus out 일 때, 테두리는 없습니다.
로그인 페이지
[0] "회원가입"버튼 클릭 시 "/signup" 페이지로 이동합니다.
회원가입 페이지
[0] "로그인"버튼 클릭 시 "/login" 페이지로 이동합니다

심화

[0] palette에 있는 color값들을 css 변수로 등록해서 사용합니다.
[0] 구글 애널리틱스로 방문자 수 확인하기 할 수 있도록 설정합니다.
로그인 페이지, 회원가입 페이지 공통
[0] 비밀번호, 비밀번호 확인 input 요소 오른쪽에 비밀번호를 확인할 수 있는 눈 모양 아이콘을 추가합니다.

주요 변경사항

sprint1&2 misson 첫 제출
비밀번호, 비밀번호 확인 input 요소 오른쪽에 비밀번호를 확인할 수 있는 눈 모양 아이콘 추가 완료
css.color 파일 변수명 renamed
login.html 및 sign-up.html class 및 id 명 중복 제거, Renaming
눈 모양 아이콘 클릭시 비밀번호 type text/password 변경 js 추가 했습니다.

스크린샷

멘토에게

• 구조를 좀 더 간소화 할 수 있는 부분이 있으면 알려주시면 감사하겠습니다.
• 시맨틱 태그 및 div 태그의 사용이 적절한지 평가해주시면 감사하겠습니다.