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

[옥승현]sprint1 #73

Conversation

SeungHyunOK
Copy link
Collaborator

@SeungHyunOK SeungHyunOK commented Jun 4, 2024

요구사항

기본

  • [x]랜딩 페이지의 url path는 루트(‘/’)로 설정합니다.
  • [x]title은 “판다마켓”로 설정합니다.
  • [x]화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다.
  • [x]화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px“로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면 의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다.
  • 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer 로 설정합니다.
  • “판다마켓” 클릭 시 루트 페이지(‘/’)로 이동합니다.
  • '로그인'버튼 클릭 시 로그인 페이지(‘/login’)로 이동합니다 (빈 페이지)
  • “구경하러가기”버튼 클릭 시(’/items’)로 이동합니다.(빈 페이지)
  • “Privacy Policy”, “FAQ”는 클릭 시 각각 Privacy 페이지(‘/privacy’), FAQ 페이지(‘/faq’)로 이동합니다.(모두 빈 페이지)
  • 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.

심화

  • [] palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.

주요 변경사항

  • none

스크린샷

Capture

멘토에게

-늦게 제출해서 죄송합니다.

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

@SeungHyunOK SeungHyunOK requested a review from JaeSang1998 June 4, 2024 13:52
@SeungHyunOK SeungHyunOK added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Jun 4, 2024
<button class="headline-button">구경하러 가기</button>
</a>
</div>
</section><!--headline END-->
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

@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.

승현님 리뷰가 많이 늦었습니다 ㅠㅠ

컨텐츠가 부족한 페이지들은 꼭 채워보시면 좋을 것 같아요!
+) javascript 를 꼭 써서 동작을 추가해보시는걸 추천드립니다!

고생하셨습니다 :D

Copy link
Collaborator

Choose a reason for hiding this comment

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

이미지 파일을 보기좋게 잘 분리해주셨네요! 이렇게 파일을 보기쉽게 잘 정리하는건 매우매우 좋은 습관입니다!

<a href="/" >
<img class="logo-icon" src="./images/logo/logo.png" alt="판다마켓 로고">
</a>
<a href="./login.html">
Copy link
Collaborator

Choose a reason for hiding this comment

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

태그 안에 태그를 중첩해서 사용하지 않고, 버튼에 클릭 이벤트를 추가하는 방법도 있습니다! 혹은 button 에 as 등을 쓰는 방법도 있어요 :)

color: #E5E7EB;
}

@media(min-width: 1200px) and (max-width: 1920px){/* 데스크톱 뷰포트 설정*/
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

Choose a reason for hiding this comment

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

css 는 한 파일로 되어있는데, 공용과 각각 페이지에 필요한 css 를 따로 분리해서 관리하면 나중에 유지보수, 확장성에 더욱 용이합니다!

</div>
</section><!--headline END-->

<section class="content">
Copy link
Collaborator

Choose a reason for hiding this comment

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

각각의 html 구획을 semantic 하게 잘 나눠주셨네요! 의미 있는 태그로 분리하는건 아주 좋은 습관입니다.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

감사합니다! 수정해서 보완해보겠습니다!

@JaeSang1998 JaeSang1998 merged commit 5641b45 into codeit-bootcamp-frontend:Basic-옥승현 Jun 12, 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