Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[이형준]sprint3 #78

Conversation

leehj322
Copy link
Collaborator

@leehj322 leehj322 commented Jun 7, 2024

요구사항

기본 요구사항

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

체크리스트 (기본)

공통

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

피드백 반영

  • 모든 색 변수로 수정
  • h3와 p 태그에 class 적용
  • 이미지 이름 변경

주요 변경사항

  • 로그인/회원가입 페이지 밑 메인 페이지 반응형 구현
  • sprint mission2 피드백 반영

사이트 배포 링크

스크린샷

main_tablet
main_mobile

signup_tablet
signup_mobile

멘토에게

  • header의 로고 이미지를 모바일로 넘어가면서 typo만 있는 이미지로 교체하게 되는데 html상에서 img 태그를 2개 놓고 교체하는게 좋을까요 css에서 url로 교체하는게 좋을까요? (현재는 html에서 img태그 2개 사용했습니다.)

@leehj322 leehj322 requested a review from jyh0521 June 7, 2024 04:04
@leehj322 leehj322 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Jun 7, 2024
Copy link
Collaborator

@jyh0521 jyh0521 left a comment

Choose a reason for hiding this comment

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

과제하느라 고생하셨습니다!

Comment on lines +7 to +17
<meta property="og:title" content="판다마켓"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://leehj322-codeit.netlify.app/"/>
<meta property="og:discription" content="일상의 모든 물건을 거래해보세요"/>
<meta property="og:image" content="https://leehj322-codeit.netlify.app/images/preview_img.png"/>

<meta name="twitter:title" content="판다마켓"/>
<meta name="twitter:card" content="summary"/>
<meta name="twitter:url" content="https://leehj322-codeit.netlify.app/"/>
<meta name="twitter:description" content="일상의 모든 물건을 거래해보세요"/>
<meta name="twitter:image" content="https://leehj322-codeit.netlify.app/images/preview_img.png"/>
Copy link
Collaborator

Choose a reason for hiding this comment

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

메타태그 적용 잘 해주셨네요!

@@ -37,7 +51,7 @@
<div class="main-page1">
<div class="main-page left-main">
<div>
<img class="main-page-img" src="/images/img_home_01.png" alt="홈 이미지 1" />
<img class="main-page-img" src="/images/img_home_items.png" alt="홈 이미지 1" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

이미지 이름들 더 명시적으로 수정해주신 점 좋네요!

@@ -17,7 +17,7 @@
<body>
<header>
<div class="logo-block">
<a href="../index.html">
<a href="/">
Copy link
Collaborator

Choose a reason for hiding this comment

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

경로 더 깔끔하게 바꿔주신 점 좋네요!

.simple-login {
background-color: #e6f2ff;
background-color: var(--simple-login-color);
Copy link
Collaborator

Choose a reason for hiding this comment

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

컬러 변수로 바꿔주신 점 좋네요!

@jyh0521
Copy link
Collaborator

jyh0521 commented Jun 8, 2024

header의 로고 이미지를 모바일로 넘어가면서 typo만 있는 이미지로 교체하게 되는데 html상에서 img 태그를 2개 놓고 교체하는게 좋을까요 css에서 url로 교체하는게 좋을까요? (현재는 html에서 img태그 2개 사용했습니다.)

  • 구현 방식에 따라서 그때그때 다를 것 같습니다. 만약 img 태그를 사용해서 구현하셨다면 형준님께서 하신 방법으로 하시면 되고, css의 url 옵션으로 구현하셨다고 하면, css의 미디어 쿼리를 활용해주시면 될 것 같습니다.

@jyh0521 jyh0521 merged commit 28d83c8 into codeit-bootcamp-frontend:Basic-이형준 Jun 8, 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