Skip to content

Conversation

@Namgyeon
Copy link
Collaborator

@Namgyeon Namgyeon commented Nov 9, 2024

요구사항

체크리스트 [기본]

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

pandmarket-namgyeon-sprint3.netlify.app

스크린샷

metaTag

멘토에게

  • 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

@Namgyeon Namgyeon added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Nov 9, 2024
@Namgyeon Namgyeon changed the title Basic 남기연 sprint3 [남기연] sprint3 Nov 9, 2024
@Namgyeon Namgyeon changed the base branch from main to Basic-남기연 November 9, 2024 14:35
Copy link
Contributor

@withyj-codeit withyj-codeit left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

스프린트 미션 하느라 수고 많으셨어요~👏🏻
image
반응형 모바일 크기에서 일부 문제가 있는데, 확인하고 수정하시면 좋을 것 같아요.

padding: 10px 24px;
}

@media (width < 767px) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

768px 보다 작다가 돼야 할 것 같아요.

property="og:url"
content="https://pandamarket-namgyeon1.netlify.app"
/>

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

메타 태그 설정 좋아요~👍

<div class="main-section-top-content">
<p class="section-title">
일상의 모든 물건을<br />
일상의 모든 물건을<span class="responsive-br"><br /></span>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

br 태그에 class이름을 설정해도 좋을 것 같아요.

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="ko">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

자잘하게 놓친 부분들 수정해 가는 것 좋아요~👍

@withyj-codeit withyj-codeit merged commit 23f637a into codeit-bootcamp-frontend:Basic-남기연 Nov 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants