[김이서] sprint3

[arhgap11b741]

요구사항

기본

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

심화

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

주요 변경사항

• input 요소 접근성 향상: form 의 역할에 대해 숙지하고 반영했습니다.
• CSS 분리: global과 home(index) 을 구분하는 기준을 몰라 모호하게 사용했는데 이제 조금 알 것 같아요.
• 클래스이름 변경

스크린샷

배포사이트

https://exquisite-hamster-ca0014.netlify.app/

멘토에게

• 포기할까 하다가 템플릿 코드를 보고 제걸로 만들어봤는데 앞선 PR에서 주신 코멘트가 도움이 되었습니다.
• 코드리뷰는 미션4에서만 해주셔도 됩니다.

[addiescode-sj]

수고하셨습니다!

주요 리뷰 포인트

• 반응형 이미지 리소스 최적화
• 줄바꿈 속성 관련 피드백

[addiescode-sj]

투명 배경을 지원할 필요가 없으면 png보다는 jpg 파일 사용을 권장드립니다.

추천 드리자면:

• 벡터 기반의 장점을 활용할수있거나, path 정보가 간단한 로고, 아이콘등의 파일: svg
• 투명 배경을 지원할 필요가 있는 큰 이미지 파일: png
• 투명 배경을 지원할 필요가 없는 큰 이미지 파일: 최소 2x의 고배율 jpg, jpeg => 고배율 이미지를 써야하므로 png, jpeg보다 압축률이 좋은 webp로 변환해 picture태그와 함께 사용 추천

컨텐츠의 특성 혹은 몇가지 조건에 따라 올바른 파일 포맷을 고르는것도 최적화에 포함됩니다.
제가 추천드린것말고도 여러가지 참고해보시고 적용해보세요 :)

[addiescode-sj]

break-on-desktop 클래스를 따로 만들어 br태그를 표시하지않게끔 하는것보다는, 줄바꿈 문자를 넣어주고 white-space: pre-line 속성을 사용하거나 word-break: keep-all; 을 사용하는 방식은 어떨까요?

[addiescode-sj]

여기 쓰인 이미지도 srcset과 sizes 사용을 고려한다면 반응형 이미지 리소스 최적화가 이루어질수있겠죠? 첫 화면에 보이는 이미지가 아닌 스크롤을 쭉 내려야 보이는 이미지라면 레이지로딩을 적용할수도있고요 :)

참고

[addiescode-sj]

굳굳! 접근성과 서버 데이터 제출을 고려해 잘 작업하셨네요 👍

[addiescode-sj]

미디어쿼리 안에서 컨테이너 요소의 레이아웃과 관련된 속성 (여백, 크기 등) 정도는 관리하기 용이하게끔 CSS 변수로 관리해보시는것도 좋을것같아요 :)