Skip to content

Conversation

@yujin0408
Copy link
Collaborator

요구사항

  • Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
  • 피그마 디자인에 맞게 페이지를 만들어 주세요.
  • React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.

기본

  • 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
  • Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
  • Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
  • 화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다.
  • Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
  • Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
  • Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.

심화

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

주요 변경사항

  • css 페이지별 소스 분리

스크린샷

스크린샷 2025-01-27 134643
스크린샷 2025-01-27 134655
스크린샷 2025-01-27 134711
스크린샷 2025-01-27 134716

멘토에게

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

@yujin0408 yujin0408 added the 순한맛🐑 마음이 많이 여립니다.. label Jan 27, 2025
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.

유진님 고생 많으셨습니다!

군더더기 없이 깔끔하게 잘 해주셨네요! 요구 사항도 꼼꼼하게 챙겨주셨고 css에 능숙하신 거 같습니다 👍

<div class="inner">
<div class="head-logo">
<h1><a href="./"><img src="./resource/img/head_logo.png" alt="판다마켓 로고"></a></h1>
<h1><a href="./"><img class="pc tablet" src="./resource/img/head_logo.png" alt="판다마켓 로고"><img class="mobile" src="./resource/img/head_logo_mo.png" alt="판다마켓 로고"></a></h1>
Copy link
Collaborator

Choose a reason for hiding this comment

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

반응형 이미지로 picture를 사용해보시면 좋아요!

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture



/* 반응형 */
.mobile {
Copy link
Collaborator

Choose a reason for hiding this comment

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

늘 재사용성이나 공통 부분을 생각하고 정의 하시려는 게 코드에 나타나는 거 같아요💯

반응형
*/
/* tablet */
@media (width < 1200px) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

요구 사항을 꼼꼼하게 잘 챙겨주셨네요! 👍

}
.contents .main-cont {
padding: 24px;
background: #fcfcfc;
Copy link
Collaborator

Choose a reason for hiding this comment

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

잘 정의 해주신 변수를 활용하시면 이후에 유지 보수에 좋습니다 :)

width: 100%;
height: auto;
padding: 0;
order: 0;
Copy link
Collaborator

Choose a reason for hiding this comment

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

flex 활용이 능숙하시네요 👍

@dongqui dongqui merged commit 4145b38 into codeit-bootcamp-frontend:Basic-이유진 Jan 27, 2025
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