[이유진] sprint2

[yujin0408]

요구사항

• Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
• Netlify에 파일 배포가 아닌 포크한 Github 레포지토리로 연결합니다.
• 피그마 디자인에 맞게 페이지를 만들어 주세요.
• React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.

기본

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

심화

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

주요 변경사항

• css 변수 추가 및 공통 스타일 시트 분리

스크린샷

멘토에게

• disabled 스타일을 적용할 때 css 선택자 [disabled], [disabled="disabled"], :disabled 등 여러 종류가 있는데 어떤 것을 사용하는게 좋을까요?
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[dongqui]

유진님 이번 미션도 잘 마무리 해주셨네요! 💯

css를 구조화 하신 게 특히 인상 깊어요. 앞으로가 더 기대됩니다 👍

disabled 스타일을 적용할 때 css 선택자 [disabled], [disabled="disabled"], :disabled 등 여러 종류가 있는데 어떤 것을 사용하는게 좋을까요?
-> 크게 상관은 없는데, :disabled가 가장 무난한 거 같네요~!

[dongqui]

background-image 같은 경우 시각적인 효과만 적용 됩니다! img, alt나 aria-label 등을 통해서 접근성을 높여주시면 좋습니다 :)

[dongqui]

label을 잘 적용해주셨네요! 👍

[dongqui]

page 별로 스타일 css를 나누어 필요한 소스만 받아오면 좋습니다~! :)

[dongqui]

컴포넌트 단위로 정의해주셨군요..! 👍