[최권진] Sprint2

[kwonjin2]

요구사항

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

기본

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

심화

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

주요 변경사항

• html 수정, css 미디어쿼리 추가 등 기본적인 구조 변경했습니다.

멘토에게

• 심화 미션의 비밀번호를 확인할 수 있는 아이콘을 추가 했는데, 다른 뷰포트에서 깨질 것 같다는 생각이 들었습니다. 다양한 뷰포트에서 테스트를 해볼 수 있는 좋은 방법이 있는지 궁금합니다.
• 판다마켓 로고 위에 여백을 생성할 때 div태그로 height지정하는 방식과 margin으로 여백을 주는 방식 중 어떤 방식이 더 좋은 방식인지 궁금합니다.
• css 파일을 작성할 때 html코드 순서대로 css 선택자를 정의하면 협업 시 도움이 되나요? 실제 협업에서 css 코드를 html 태그 순서대로 작성하시는지 그냥 순서 상관 없이 작성하시는지 궁금합니다.

[dongqui]

권진님 이번 미션도 깔끔하게 잘 마무리 해주셨네요!

form 관련 태그를 잘 활용해 주셨습니다! 공통 스타일을 따로 정의해 보시면 더욱 좋을 거 같아요 :)

심화 미션의 비밀번호를 확인할 수 있는 아이콘을 추가 했는데, 다른 뷰포트에서 깨질 것 같다는 생각이 들었습니다. 다양한 뷰포트에서 테스트를 해볼 수 있는 좋은 방법이 있는지 궁금합니다.
->

개발자 도구에서 표시된 아이콘을 눌러보세요! :)

판다마켓 로고 위에 여백을 생성할 때 div태그로 height지정하는 방식과 margin으로 여백을 주는 방식 중 어떤 방식이 더 좋은 방식인지 궁금합니다.
-> 불필요하게 추가적인 dom 요소가 만들어지기 때문에 margin이 좀 더 적절해 보입니다 🤔

css 파일을 작성할 때 html코드 순서대로 css 선택자를 정의하면 협업 시 도움이 되나요? 실제 협업에서 css 코드를 html 태그 순서대로 작성하시는지 그냥 순서 상관 없이 작성하시는지 궁금합니다.
->
실제 협업에서는 지금처럼 페이지 단위로 css파일을 만드는 경우가 많지는 않아서 순서를 많이 신경 쓰지는 않았습니다! 조금 더 작은 단위로 스타일 파일을 만들어서 자연스레 코드가 나눠지게 됩니다 :) 스타일 라이브러리를 사용하면서 css파일을 안 만들 때도 있구요!

다만 순서를 맞추거나, 같은 목적을 가진 코드를 모으는 등 코드를 구조화 하는 노력은 많은 경우 도움이 됩니다!

[dongqui]

변수를 잘 정의 해주셨네요 👍

[dongqui]

피그마를 다시 확인해 주세요! 소수점까지 이용하는 경우는 거의 없습니다 :)

[dongqui]

reset css를 활용해 보셔도 좋아요 :)

[dongqui]

공통 스타일은 파일을 따로 빼서 관리하시면 좋습니다 :)

[dongqui]

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

[dongqui]

화면이 커지면 이미지가 뭉개집니다 😢