[정지원] sprint2

[Jiw0nJ]

요구사항

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

기본

- 공통

• 아래로 스크롤 해도 상단 네비게이션 바(Global Navigation Bar)가 최상단에 고정됩니다.
• "판다마켓" 클릭 시 루트 페이지("/")로 이동합니다.(새로고침)
• 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다.
• SNS 아이콘들은 클릭시 각각 실제 서비스 홈페이지로 이동합니다.

- 로그인 페이지

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

- 회원가입 페이지

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

심화

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

주요 변경사항

• 상단 네비게이션 바 최상단 고정 (index.html)
• 로그인 페이지 완성 (login.html)
• 회원가입 페이지 완성 (signup.html)

스크린샷

멘토에게

• 로그인 페이지와 회원가입 페이지를 만들면서 margin-bottom을 통해 간격을 조절해나갔는데 다 만들고 난 생각이 아예 전체를 flex로 감싸고 gap 속성을 통해 간격을 조절했다면 한번에 조절 가능하지 않았을까 하는 생각이 들었습니다. 배치를 할 때 margin을 사용하는 상황과 flex를 사용하는 상황이 어떤 점에서 다른지(어떤 상황에서 주로 사용되는지), margin과 flex를 꼭 사용해야 하는 특별한 상황들이 있는지 궁금합니다.
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[dongqui]

지원님! 요구 사항도 꼼꼼하게 챙겨주셨고, 코드도 군더더기 없이 깔끔하게 잘 작성해 주셨네요~! 💯

로그인 페이지와 회원가입 페이지를 만들면서 margin-bottom을 통해 간격을 조절해나갔는데 다 만들고 난 생각이 아예 전체를 flex로 감싸고 gap 속성을 통해 간격을 조절했다면 한번에 조절 가능하지 않았을까 하는 생각이 들었습니다. 배치를 할 때 margin을 사용하는 상황과 flex를 사용하는 상황이 어떤 점에서 다른지(어떤 상황에서 주로 사용되는지), margin과 flex를 꼭 사용해야 하는 특별한 상황들이 있는지 궁금합니다.
->

• 여러 요소들간에 일정한 간격, 배치가 필요할 때는 flex!
• 단일 요소만 간격을 주거나 레이아웃 흐름과 관계 없이 공간을 조절할 때는 margin을 쓰시면 좋습니다 :)

일단 잘 구현하셨으니 사실 크게 상관은 없습니다 🤣 지금 마진을 썼을 때 약간 아쉬운 점은, 만약 다른 요소가 추가될 경우 새 요소의 마진도 신경 써야 되겠죠~!

[dongqui]

라벨을 잘 적용해 주셨네요! 👍

[dongqui]

이미지에 기능이 있다면, button으로 감싸거나 aria-label 등을 활용하시면 접근성에 좋습니다 :)

[dongqui]

글로벌 스타일은 태그에 스타일을 넣을 때 주의하셔야 합니다~!
적용 범위가 넓어, 예기치 못한 버그가 발생하고 유지 보수가 힘들어져요!

[dongqui]

나중에 하시겠지만, 로그인은 a 가 아니라 submit 기능을 가진 버튼이 되겠네요~! :)

[dongqui]

전반적으로 깔끔합니다~! 👍