[박준현] sprint3

[llmojoll]

요구사항

기본

• 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
• Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
• Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
• [x ] 화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다.
• Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
• Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
• Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.

심화

• [] 페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 Linkbrary 랜딩 페이지(“/”) 공유 시 좌측 예시와 같은 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정해 주세요.
• [] 미리보기에서 제목은 “판다 마켓”, 설명은 “일상의 모든 물건을 거래해보세요”로 설정합니다.
• [] 주소와 이미지는 자유롭게 설정하세요.

스크린샷

https://brilliant-liger-335e1c.netlify.app/

멘토에게

• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[addiescode-sj]

수고하셨습니다!

주요 리뷰 포인트

• 미디어 쿼리 사용 관련 피드백
• 포맷팅

[addiescode-sj]

현재 CSS파일에서 max-width: 1199px -> max-width: 7687px 순서로 미디어쿼리가 작성되어있어 specificity 문제가 발생할수있습니다. 기본 스타일은 모바일에 맞추고, (작은 화면에서부터) 큰 화면으로 점차 확장해나가는 순서로 작성하시면 불필요한 스타일 재정의 및 코드 중복을 효과적으로 줄일 수 있습니다.

또, 미디어쿼리 조건 평가 시 max-width를 사용하게되면 max-width: 767px 이하의 화면에서는 두가지 미디어쿼리가 모두 적용됩니다. 이때 첫번째로 얘기한 specificity(특이성) 문제가 생길 수 있는데요! 두 미디어쿼리의 특이성이 동일하므로 나중에 선언된 스타일이 적용됩니다. 따라서 767px 이하 스크린에서 동일한 선택자의 속성을 재정의하지않으면 1199px이하에 적용되어있는 스타일이 동시에 적용됩니다. 관리에 그닥 좋지 않겠죠?

[addiescode-sj]

반응형을 고려하면서 스크린 사이즈 변경에도 유연하게 대응하고싶다면 width를 쓰는것보다는 max-width, min-width 등으로 크기를 조절하면 좋습니다 :)

[addiescode-sj]

여기 공백은 엄청 많이 띄우셨네요!
포맷팅이 작업 퀄리티를 너무 쉽게 떨어지게 만드는 요소라서 다음부터는 포맷팅도 조금 신경써볼까요? :)

[addiescode-sj]

이 파일에서도 panda.css 에서 드린 코멘트 참고해서 리팩토링해보세요! :)

[addiescode-sj]

파일 이름이 panda.css라서 어떤 역할의 파일인지가 짐작이 안되네요!
index.html (메인페이지)의 css파일이라면 index.css 혹은 main.css와 같이 페이지 이름이 들어가게끔 네이밍 변경해볼까요?

[addiescode-sj]

picture태그를 사용하셔도 괜찮지만 뷰포트에 따라 같은 이미지소스를 해상도만 다르게 최적화해서 보여주는 방식은 srcset, sizes 만으로도 충분합니다 :)

덧붙여, 첫 화면에 보이는 이미지가 아닌 스크롤을 쭉 내려야 보이는 이미지라면 레이지로딩을 적용할수도있고요 :)
아래 아티클 참고해보시고 리팩토링해볼까요?

참고