[채종민]Sprint1

[JayChae]

요구사항

UI 디자인 기초 토픽을 수강해 보세요.
피그마 디자인에 맞게 페이지를 만들어 주세요.
React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.
HTML, CSS 파일을 Netlify로 배포해 주세요. (참고: https://www.codeit.kr/learn/5309)
PC사이즈만 고려해 주어진 디자인으로 구현합니다.

기본

• 랜딩 페이지의 url path는 루트(‘/’)로 설정합니다. ( https://chipper-starship-026cef.netlify.app/ )
• title은 “판다마켓”로 설정합니다.
• 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다.
• 화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px“로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다.
• 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer 로 설정합니다.
• “판다마켓” 클릭 시 루트 페이지(‘/’)로 이동합니다.
• '로그인'버튼 클릭 시 로그인 페이지(‘/login’)로 이동합니다 (빈 페이지)
• “구경하러가기”버튼 클릭 시(’/items’)로 이동합니다.(빈 페이지)
• “Privacy Policy”, “FAQ”는 클릭 시 각각 Privacy 페이지(‘/privacy’), FAQ 페이지(‘/faq’)로 이동합니다.(모두 빈 페이지)
• 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.

심화

• palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.
• 비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 아이콘을 추가해 주세요.

주요 변경사항

스크린샷

멘토에게

구경하러 가기 버튼 세로 중앙정렬이 안 맞는 것 같은데 어떻게 해결해야 할까요?

• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[leejyart]

image 의 alt 속성이 빠져있네요! alt 속성은 이미지가 렌더링되지 못할 때 나타날 문자열을 지정하기 위한 값으로 웹 접근성과 SEO 에 영향을 줄 수 있습니다. 웹 표준기관 WHATWG 의 대체 텍스트 제공 가이드라인 에도 다음과 같은 문구가 있습니다.

"Except where otherwise specified, the alt attribute must be specified and its value must not be empty"
달리 지정된 경우를 제외하고 alt 특성을 지정해야만 하며 해당 값은 비워 둘 수 없습니다.

alt 속성과 관련된 문서도 첨부드리니 참고해보세요 : )
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt

[leejyart]

사용자 지정 css 를 잘 사용해주셨습니다!

[leejyart]

이 파일은 사용되는 곳이 없다면 지워주세요!

[leejyart]

해당 파일명을 이미지 파일 이름 규칙에 맞게 수정해주세요. ex) logo.png

[leejyart]

1. 구경하러 가기 버튼 세로 중앙정렬이 안 맞는 것 같은데 어떻게 해결해야 할까요?
   
   align-items: center속성으로 세로 중앙에 잘 정렬된 것으로 보입니다! 혹시 이 부분에 대한 질문이 아니셨던 걸까요?

종민님, 첫 과제를 너무 잘 수행해주셨습니다 : )
앞으로도 화이팅입니다!