[정소망] sprint3

[mangmang1004]

기본

공통

• 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.

랜딩 페이지

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

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

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

심화

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

멘토에게

• 항상 열심히 코드 리뷰해주셔서 감사합니다 👍

[arthurkimdev]

소망님 지난번 리뷰 사항도 반영해주시고, 마지막 반응형 작업까지 정말 수고 많으셨습니다! 🙏

[arthurkimdev]

meta 태그로 값 잘 설정해주셨어요! 여기에 작성되지 않았지만 더 추가할 수 있는 값들이 있어요.
공부도 하실 겸 참고 문서 남겨드립니다!

https://developers.facebook.com/docs/sharing/webmasters?locale=ko_KR

[arthurkimdev]

리뷰 반영 굳! 👍

[arthurkimdev]

보통 반응형을 작업할 때 같은 결과물이라도 코드는 아래처럼 모바일 first로 작업을 많이해요.
작업하기도 조금 더 수월하고, 의식의 흐름대로 mobile -> tablet -> desktop 이다보니 코드 가독성 & 유지보수에도 좋습니다.

main {
  padding: 0 16px;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 태블릿 */
@media (min-width: 768px) {
  main {
    max-width: 640px;
    padding: 0;
  }
}

/* 데스크톱 */
@media (min-width: 1024px) {
  main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 640px;
    max-width: none;
  }
}

[arthurkimdev]

mobile first 장점으로는

1. 모바일에서 데스크톱으로 확장하는 것이 그 반대의 경우보다 코드를 작성하고 관리하기 쉽습니다.
2. 모바일에서 시작해 확장하면, 다양한 디바이스에서 더 일관된 사용자 경험을 제공하기 쉽습니다.
3. SEO 이점으로, mobile first 접근은 검색 엔진 최적화에 도움이 될 수 있습니다.

[arthurkimdev]

이전과 다르게 가독성이 훨씬 좋아졌습니다! 😸