Skip to content

Conversation

@dkozowlk
Copy link
Collaborator

@dkozowlk dkozowlk commented May 14, 2025

요구사항

기본

공통

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

주요 변경사항

  • 원래는 absolute로 배너에 이미지의 위치를 조정했었는데 지금은 다르게 이미지 위치를 조정했습니다.

스크린샷

캡처
모바일 버젼 랜딩페이지

캡처2
타블렛 버젼 랜딩페이지

캡처3
캡처4
모바일 버젼 로그인페이지 와 회원가입 페이지

멘토에게

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

@dongqui dongqui changed the base branch from main to Basic-김태욱 May 15, 2025 00:07
Copy link
Collaborator

@dongqui dongqui left a comment

Choose a reason for hiding this comment

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

태욱님! 프로젝트 이후에도 불태워 주시는군요! 👍

기본적인 반응형에 대한 이해는 잘 하고 계신 거 같습니다! 요구 사항을 좀 더 꼼꼼하게 봐주시면 더욱 좋을 거 같아요 :)

@media (max-width: 767px) {
#top-banner-text {
font-size: 32px;
line-height: 140%;
Copy link
Collaborator

Choose a reason for hiding this comment

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

버튼도 영향을 받습니다 :) 너무 커지고 있어요!
image

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

수정했습니다!

}

.feature img {
width: 696px;
Copy link
Collaborator

Choose a reason for hiding this comment

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

image
width를 유연하게 하는 것이 좀 더 자연스러운 UI가 될 거 같네요 :)

Copy link
Collaborator

Choose a reason for hiding this comment

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

유연하게 대처하면서 뭔가 애매해진다 싶으면, 실무에서는 디자이너분과 상의하실 수 있습니다 :) 너무 어렵게 생각하지 않으셔도 괜찮아요!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

감사합니다!

line-height: 140%;
}

br {
Copy link
Collaborator

Choose a reason for hiding this comment

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

image
요구 사항을 다시 확인해 주세요~!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

수정 완료했습니다!

white-space: nowrap;
}

@media (max-width: 1199px) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

점진적으로 반응형을 잘 적용해 주셨네요~! 👍 👍

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

감사합니다!!

color: #cfcfcf;
}

#footer-codeit {
Copy link
Collaborator

Choose a reason for hiding this comment

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

색상을 챙겨주세요 🤣

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

확인했습니다!

justify-self: start;
}

#footer-Menu {
Copy link
Collaborator

Choose a reason for hiding this comment

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

image
FAQ는 가운데로 와야 합니다 :)

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

여기 부분 grid 방식으로 줬어가지고 유연하게 반응형을 구현 할려면 이렇게 하는게 좋을거 같아 이렇게 했습니다 다만 faq 구역에 갭이 12px이라 이걸 더 늘려서 시안과 비슷하게 만들었습니다!

@dongqui dongqui merged commit d7b9803 into codeit-bootcamp-frontend:Basic-김태욱 May 15, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants