[김승민] Sprint3

[sngminn]

요구사항

기본

공통

• 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
• PC: 1200px 이상
• Tablet: 768px 이상 ~ 1199px 이하
• Mobile: 375px 이상 ~ 767px 이하
• 375px 미만 사이즈의 디자인은 고려하지 않습니다

랜딩 페이지

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

로그인, 회원가입 페이지 공통

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

심화

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

주요 변경사항

• 요구사항 이외에 css 파일을 분리하고 다듬었습니다.

스크린샷

멘토에게

• 클래스 재사용성을 늘리기 위해 스타일을 기능에 따라 분리 시켰는데(이게 atomic css 맞나요..?) 좋은 방법일까요?
• 이로 인해 반응형을 만들 때 일부 클래스는 JS로 스위치되게 만들었습니다. 이것도 좋은 코드가 될 수 있을지 여쭤봅니다.

[dongqui]

승민님 이번 미션도 고생 많으셨습니다!

css를 구조화 하고 재사용성을 늘린점이 너무 좋습니다! js 활용은 다시 고민해보시면 좋을 거 같아요 :)

클래스 재사용성을 늘리기 위해 스타일을 기능에 따라 분리 시켰는데(이게 atomic css 맞나요..?) 좋은 방법일까요?
-> 넵 좋습니다~! 👍 👍 가장 인기있는 라이브러리 중 하나인 tailwind css 같은 것들 참고해 보셔도 좋아요! :)

이로 인해 반응형을 만들 때 일부 클래스는 JS로 스위치되게 만들었습니다. 이것도 좋은 코드가 될 수 있을지 여쭤봅니다.
-> js로 처리해야할 때도 있지만, 가능하다면 css로 처리하시는 것이 좋습니다! section--normal에 flex 스타일을 넣는 것도 괜찮을 거 같네요 :) 아니면 위에 언급드린 tailwind 처럼 md: 형태의 클래스를 정의할 수도 있습니다. (다만, 일이 커지기 때문에 학습용이 아니라면 트레이드 오프를 잘 따져봐야겠죠!)

[dongqui]

🤣