엄해진 sprint1,2,3

[UIanonymity]

요구사항

기본

스프린트 미션1

• PC사이즈만 고려해 주어진 디자인을 구현합니다. HTML, CSS 파일을 Netlify로 배포해 주세요.
• “로그인”버튼 클릭 시 로그인 페이지(‘/login)로 이동합니다
• “구경하러가기”버튼 클릭 시(’/items’)로 이동합니다.
• 아래로 스크롤 해도 “판다 마켓” 로고와 “로그인” 버튼이 있는 상단 네비게이션 바가 최상단에 고정되게 해주세요.
• 화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px, “로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다.
• 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다.
• 화면의 너비가 1920px 이상이면 내부에 있는 요소간 동일한 간격을 유지하며 가운데 정렬해야 합니다.
• 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer 로 설정합니다.
• Privacy Policy는 클릭 시 Privacy 페이지(‘/privacy’) 이동합니다. (빈 페이지)
• FAQ는 클릭 시 FAQ 페이지(‘/faq’)로 이동합니다. (빈페이지)
• 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.
• 화면의 너비가 1920px 보다 작아질 때“codeit-2024”의 왼쪽 여백 200px과 SNS 아이콘들의 오른쪽 여백 200px을 유지하면서 가운데 있는 “Privacy Policy”, “FAQ” 요소와 각각 동일한 간격을 유지하며 가까워져야 합니다.

스프린트 미션2

• 로그인 페이지 “회원가입”버튼 클릭 시 “/signup” 페이지로 이동합니다.
• PC사이즈만 고려해 주어진 디자인을 구현합니다. HTML, CSS 파일을 Netlify로 배포해 주세요.
• “판다마켓" 로고 클릭 시 루트 페이지(“/”)로 이동합니다.
• 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다.
• SNS 아이콘들은 클릭 시 각각 “https://www.google.com/”, “https://www.kakaocorp.com/page/” 으로 이동합니다.
• 로그인 페이지, 회원가입 페이지 공통 input 요소에 focus in 일 때, 테두리 색상은 ##3692FF입니다. input 요소에 focus out 일 때, 테두리는 없습니다.
• “로그인”버튼 클릭 시 “/login” 페이지로 이동합니다.

스프린트 미션3

• 로그인 및 회원가입 페이지의 이메일, 비밀번호, 비밀번호 확인 input에 필요한 유효성 검증 함수를 만들고 적용해 주세요.
• 이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
• 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다.
• 비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다
• [x]비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다.
• input 에 빈 값이 있거나 에러 메세지가 있으면 ‘로그인’ 버튼은 비활성화 됩니다.
• [] Input 에 유효한 값을 입력하면 ‘로그인' 버튼이 활성화 됩니다.
  활성화된 ‘로그인’ 버튼을 누르면 “/items” 로 이동합니다

심화

스프린트 미션1

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

스프린트 미션2

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

스프린트 미션3

• [] 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다. (참고: https://www.codeit.kr/topics/responsive-web-publishing)
• PC: 1200px 이상
• Tablet: 744px 이상 ~ 1199px 이하
• Mobile: 375px 이상 ~ 743px 이하
• 375px 미만 사이즈의 디자인은 고려하지 않습니다.
• [] Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
• [] Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.
• [] 비밀번호 및 비밀번호 확인 입력란에 눈 모양 아이콘 클릭 시 비밀번호 표시/숨기기 토글이 가능합니다. 기본 상태는 비밀번호 숨김으로 설정합니다.

주요 변경사항

• 미션 적용 외 특별히 없습니다.

스크린샷

멘토에게

• 이전에 스프린트 3에서 조금 막힌 탓에 과제 작업이 많이 늦어지고 있습니다.
  가능한 빨리 4까지 따라잡아보도록 하겠습니다. ... ....

[wseungjin]

이번주 수고 많으셨습니다~ 적잘하게 코드를 작성해주신거 같습니다~