[김은진] Sprint 1, 2

[Eznnni]

요구사항

기본

미션 1️⃣

• "판다마켓" 로고 클릭 시 루트 페이지로 이동합니다.
• 버튼 클릭 시 알맞은 페이지로 이동합니다. (/login, /items, /privacy, /faq)
• 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.
• 최상단에 GNB를 고정 및 레이아웃 반응형 설정을 합니다.
• 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer로 설정합니다.

미션 2️⃣

• 적절한 커밋 메시지를 남깁니다. (type에 따라 작성)
• "판다마켓" 로고 클릭 시 루트 페이지로 이동합니다.
• SNS 아이콘들은 클릭 시 각각 "https://www.google.com/", "https://www.kakaocorp.com/page/" 으로 이동합니다.
• input 요소에 focus in 일 때, 테두리가 생기며 색상은 #3692FF입니다.
• 버튼 클릭 시 알맞은 페이지로 이동합니다. (/signup, /login)

심화

미션 1️⃣

• reset.css를 설정합니다.
• rem 을 사용하여 사용자의 브라우저 설정에 따라 기본 폰트 크기 설정이 변화함에 따라서 페이지의 요소 간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정합니다.

미션 2️⃣

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

주요 변경사항

• 미션2의 요구사항에 따라 root.css 파일에 전역 컬러 팔레트를 정의했으며, 웹 폰트 또한 동일한 위치에 저장되어 있습니다.
• 폴더 구조를 변경하였습니다.
  index.html을 제외한 요소들이 각각 src/assets/icons, src/assets/img, src/pages, src/styles에 저장되어있습니다.
• 🔗Netlify에 배포 완료

스크린샷

멘토에게

• 첫 코드리뷰 잘 부탁드립니다🙏!