[임귀태] Sprint2

[KorpoQ]

요구사항 (미션 1)

기본

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

심화

• palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.

요구사항 (미션 2)

기본

로그인 페이지, 회원가입 페이지 공통

• “판다마켓" 로고 클릭 시 루트 페이지(“/”)로 이동합니다.
• 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다.
• input 요소에 focus in 일 때, 테두리 색상은 #3692FF입니다.
• input 요소에 focus out 일 때, 테두리는 없습니다.
• SNS 아이콘들은 클릭시 각각 실제 서비스 홈페이지로 이동합니다.

로그인 페이지

• “회원가입”버튼 클릭 시 “/signup” 페이지로 이동합니다.

회원가입 페이지

• “로그인”버튼 클릭 시 “/login” 페이지로 이동합니다.

심화

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

주요 변경사항

• 없음

스크린샷

• 없음

멘토에게

• 아직 질문 없습니다!

[wlgns2223]

section들에게도 max-width를 지정해주면 좀 더 완성도 있는 마크업이 될 것 같습니다 !

[KorpoQ]

현재 .banner에 background-color: #cfe5ff;가 적용되어 있습니다.
페이지 시청 시 width가 1920px 이상일 경우, 여기서 div 추가와 같은 HTML 수정을 거치지 않고 background-color가 적용되지 않는 문제를 다르게 해결할 수 있는 방법이 있을까요?

[wlgns2223]

회원가입 페이지와 로그인페이지는 거의 동일하고 마크업도 비슷하기에 중복해서 피드백을 하지는 않았습니다 !
스프린트 미션 수고하셨습니다 !