[권새롬] Sprint22 스프린트 미션 3

[rhdtls3562]

진행한 미션 버전

• 초급 (Ver 1)
• 중급 (Ver 2)

---

미션 요구사항

기본

• 브라우저에 현재 보이는 화면의 영역(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 랜딩 페이지("/") 공유 시 좌측 예시와 같은 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정해 주세요.
• 미리보기에서 제목은 "판다 마켓", 설명은 "일상의 모든 물건을 거래해보세요"로 설정합니다.
• 주소와 이미지는 자유롭게 설정하세요.

---

주요 변경사항 및 학습 포인트

• 반응형 디자인 적용: PC(1200px+), Tablet(768px1199px), Mobile(375px767px) 브레이크포인트 설정 및 각 사이즈별 스타일 조정
• SNS 공유 최적화: Open Graph와 Twitter Card 메타 태그 추가로 페이스북, 카카오톡 등에서 미리보기 표시
• 반응형 레이아웃 기법: min-width/max-width 조합, width: 100%와 max-width로 유연한 반응형 구현

---

주강사에게

집중적으로 봐줬으면 하는 부분

• 없습니다.

해결하지 못한 문제 / 궁금한 점

• 없습니다.