[김수영] sprint3

[swim-kim]

요구사항

기본

랜딩

• Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
• Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
• 화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다.

로그인/회원가입

• Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
• Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
• Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.

심화

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

sprint3 소스 배포주소

https://pandamarket-swimkim.netlify.app/

멘토에게

• 코드상에 따로 속성을 주지 않았는데 section-text-detail에 16px 상하 마진이 생기는 이유를 모르겠습니다
• 미디어쿼리를 적용할때 기존코드를 활용할 수 있는부분은 최대한 활용하고 변경되는 부분만 수정하는게 좋은지, 아예 다 새로 짜는게 좋은지 궁금합니다

[GANGYIKIM]

수영님 3번째 스프린트 미션 고생하셨습니다.
PR을 굉장히 자세하게 적어주셔서 좋았습니다.
아래는 전반적인 리뷰사항입니다.

---

• 동일한 사항에 대해서는 한번만 코멘트를 답니다. 비슷한 경우를 찾아서 변경해보세요~
• 코드상에 따로 속성을 주지 않았는데 section-text-detail에 16px 상하 마진이 생기는 이유를 모르겠습니다 : 검사탭에서 해당 요소를 확인해보시면 사용자 에이전트 스타일이라고 명시되어서 margin 상하에 1rem이 적용된 것을 보실 수 있습니다. 이는 브라우저에서 자체적으로 가지고 있는 스타일이므로 이를 초기화해주는 reset css 를 작성하시면 될 것 같습니다.
• 미디어쿼리를 적용할때 기존코드를 활용할 수 있는부분은 최대한 활용하고 변경되는 부분만 수정하는게 좋은지, 아예 다 새로 짜는게 좋은지 궁금합니다 : 저는 전자가 좋다고 생각합니다. 후자의 경우 새로 작성하는 것이고, 전자의 경우 기존 스타일을 살리면서 필요한 경우 속성을 overriding 하거나 추가하는 것인데 전자가 더 유지보수하기 좋다고 생각합니다.