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

스프린트미션1 #5

Conversation

songmijin824
Copy link
Collaborator

@songmijin824 songmijin824 commented Jan 7, 2025

요구사항

기본

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

심화

  • 사용자의 브라우저가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 -
    설정해 보세요.(설정값은 자유입니다)

주요 변경사항

스크린샷

판다마켓

멘토에게

  • 첫 미션이라 어떻게 하고 있는지도 모르고 한거 같아요.. 하지만 나름대로 꼼꼼하게 했습니다! 잘부탁드립니다!!
  • 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

@songmijin824 songmijin824 requested a review from dongqui January 7, 2025 18:02
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도 능숙하신 거 같고 벌써 공통 스타일을 정의하거나 모듈화 하시는 모습이 인상적이었습니다 :) 접근성을 조금 더 신경써주시면 더욱 좋을 거 같습니다.
앞으로가 더 기대되네요! 👍


.inner,.box_inner { margin:0 auto; min-width:325px; max-width:1120px; }

:root {
Copy link
Collaborator

Choose a reason for hiding this comment

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

css 변수를 활용하셨네요! 👍


.font_1 { font-size:40px; }
.font_2 { font-size:24px; }
.font_3 { font-size:18px; }
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,10 @@



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,110 @@

<html>
Copy link
Collaborator

Choose a reason for hiding this comment

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

을 써주시면 SEO, 접근성에 도움이 됩니다! :)


<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="robots" content="noindex">
<meta name="Keywords" content="판다마켓,쇼핑몰" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

메타 태그도 챙겨주셨네요...! 😮

<header>
<div class="inner">
<a href="/" class="logo_top">
<img src="/images/logo_01.png">
Copy link
Collaborator

Choose a reason for hiding this comment

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

img를 쓰실 때 alt를 넣어주시는 것이 접근성에 좋습니다!

<div class="box">
<img src="/images/Img_home_01.png" alt="Hot item">
<div>
<h4 class="font_3">Hot item</h4>
Copy link
Collaborator

Choose a reason for hiding this comment

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

h tag 는 계층 구조로 사용하시는 것이 접근성에 좋습니다! h1은 페이지에 하나가 되어야합니다 :)
https://developer.mozilla.org/ko/docs/Web/HTML/Element/Heading_Elements#사용_일람

.btn:active { background-color: #1251AA; color:#fff; }
.btn.n_act { background-color: #9CA3AF; color:#fff; }

.btn._a { display:inline-block; padding:16px 124px; border-radius: 50px; }
Copy link
Collaborator

Choose a reason for hiding this comment

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

._a 보다는 rounded 등 좀 더 유의미한 이름이면 더 좋을 거 같습니다 :)

.section._4 .text_box { width:100%; padding:0 24px; text-align: center; top:10%; }
.section._4 .text_box { top:20%; }
}
@media (max-width: 780px) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

벌써 반응형을 구현해주셨군요!! 👍

.section._4 .text_box { width:100%; padding:0 24px; text-align: center; top:10%; }
.section._4 .text_box { top:20%; }
}
@media (max-width: 780px) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

image

미션 1 내용은 아니지만, 모바일 화면에서 요소 간격이 멀어지는 현상이 있습니다~! 이후 다시 진행하실 때 참고 해주세요 ㅎㅎ

@dongqui dongqui merged commit 8a38fc8 into codeit-bootcamp-frontend:Basic-송미진 Jan 8, 2025
@songmijin824
Copy link
Collaborator Author

오 감사합니다!!

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