정새론 sprint1

[Squarecat-meow]

요구사항

기본

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

심화

• 사용자의 브라우저가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 보세요.(설정값은 자유입니다)

스크린샷

멘토에게

• 심화과정은 Margin을 %나 auto로 설정해서 적용해야 하나요?
• 만들면서 Grid를 한 번도 안 쓰고 전부 Flexbox로 위치를 줬는데, 이렇게 해도 맞게 된 건가요?
• 중간에 카드 3개의 너비가 약간 다른 것을 알 수 있습니다. 어떻게 수정해야 할 지 모르겠습니다ㅠㅠ

[addiescode-sj]

전반적으로 깔끔하게 잘 작성하셨네요. 수고하셨습니다! 👍
NIT는 리뷰를 반영하실필요없고 학습적인 목적으로 작성된 코멘트라 참고해보시면됩니다.

주요 리뷰 포인트

• 접근성을 고려한 언어 설정
• 모호한 클래스명 수정하기
• 시맨틱 태그 활용도 높이기
• 불필요한 div 중첩 줄여보기
• 디폴트 값 사용 줄이기
• 전역 스타일 정의하고, css 변수 만들어서 재사용성 높이기 (코드 중복 줄이기)

[addiescode-sj]

불필요한 div 중첩이 발생되는것 같아요.
div class ="card card-content-rev" 이렇게 한단계로 줄여볼까요?

[addiescode-sj]

질문에 대한 답변

심화과정은 Margin을 %나 auto로 설정해서 적용해야 하나요?

margin말고도 다른 속성에도 가변 단위를 꼭 사용할 필요는 없지만 반응형을 고려했을때는 가변 단위를 사용하시는게 좀 더 적합합니다.
아래 아티클 읽어보시고 상대적으로 변할 수 있는 단위의 종류에 대해 미리 학습해보시면 좋을 것 같네요 :)

참고

만들면서 Grid를 한 번도 안 쓰고 전부 Flexbox로 위치를 줬는데, 이렇게 해도 맞게 된 건가요?

CSS Grid/ Flexbox를 어떤 이유로 어느때 더 사용하기 적절한지 찾아보시면 좋을 것 같아요 :)
Grid는 행과 열 모두를 고려해야하고, 특정 위치에 어떤 크기만큼의 요소를 정확히 배치해야할때 사용하기 좋습니다.
즉, 각 요소들이 다양한 크기와 다양한 셀에 걸쳐서 배치되어야할때 유용합니다.
Flex는 단일 행이나 열로 요소를 배치할 때, 컨테이너 기준으로 공간 배치와 정렬이 중요할때 사용하기 좋습니다.

중간에 카드 3개의 너비가 약간 다른 것을 알 수 있습니다. 어떻게 수정해야 할 지 모르겠습니다ㅠㅠ

카드의 최대 너비(max-width)를 지정하고,
이미지를 최대 크기를 지정한 div 아래에 두시면서 해당 div영역을 항상 꽉 채우는 크기를 가질수있게끔 해보세요!