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 #55

Conversation

SHAKALOHANA
Copy link
Collaborator

@SHAKALOHANA SHAKALOHANA commented Aug 24, 2024

요구사항

기본

공통

  • 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
    PC: 1200px 이상
    Tablet: 768px 이상 ~ 1199px 이하
    Mobile: 375px 이상 ~ 767px 이하
    375px 미만 사이즈의 디자인은 고려하지 않습니다.

랜딩페이지

  • Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
  • Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.

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

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

심화

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

주요 변경사항

스크린샷

pc

tablet

mobile

멘토에게

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

@SHAKALOHANA SHAKALOHANA added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성🫠 죄송합니다.. labels Aug 24, 2024
Copy link
Collaborator

@JaeSang1998 JaeSang1998 left a comment

Choose a reason for hiding this comment

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

태훈님 고생하셨습니다!
이전 리뷰들도 다 반영이 되었군요. 좋습니다 :)

<p class="section_content_p2">인기 상품을<br> 확인해보세요</p>
<p class="section_content_p3">가장 HOT한 중고거래 물품을<br> 판다 마켓에서 확인해보세요</p>
<img class="section-content" src="images/Img_home_01.png" alt="Hot item 그림">
<div class="section-content-p-box">
Copy link
Collaborator

Choose a reason for hiding this comment

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

kebab-case 로 잘 변경해주셨군요! 좋습니다.

@@ -84,25 +85,25 @@
@codeit - 2024
</div>
<div class="footer-kid2">
<a class="footer-kid-a cursor_pointer" href="privacy.html">
<a class="footer-kid-a cursor-pointer" href="/privacy">
Copy link
Collaborator

Choose a reason for hiding this comment

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

오 이것도 반영 잘해주셨군요 너무 좋습니다 :)

Privacy Policy
</a>
<a class="footer-kid-a cursor_pointer" href="faq.html">
<a class="footer-kid-a cursor-pointer" href="/FAQ">
Copy link
Collaborator

Choose a reason for hiding this comment

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

폴더 이름은 소문자로 해주셔도 좋습니다!

<link
rel="stylesheet"
as="style"
crossorigin
href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
/>
<link rel="stylesheet" href="styles/global.css" />
<link rel="stylesheet" href="../styles/home.css" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

👍

@@ -0,0 +1,19 @@
:root {
Copy link
Collaborator

Choose a reason for hiding this comment

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

오 이것도 잘 반영해주셨네요~ 좋습니다! 이렇게 분리해서 사용하는 습관 좋습니다.

}


@media (min-width: 375px) and (max-width: 766px) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

미디어 쿼리를 잘 써주셌네요 좋습니다!

반응형이 이런부분이 조금 복잡합니다. 그래도 잘 넣어주셨네요 :)

padding: 32px 10px;
}

.footer-kid1 {
Copy link
Collaborator

Choose a reason for hiding this comment

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

kid 보다는 child 가 더 많이 쓰이는 명명입니다!

@JaeSang1998 JaeSang1998 merged commit de85c97 into codeit-bootcamp-frontend:Basic-김태훈 Aug 28, 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