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

Conversation

Exit-c
Copy link
Collaborator

@Exit-c Exit-c commented Apr 27, 2024

요구사항

기본

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

심화

  • [] palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.
  • [] 사용자의 브라우저가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 보세요.(설정값은 자유입니다)

주요 변경사항

스크린샷

image

멘토에게

  • 심화요구사항이 디바이스 화면에 따른 반응형을 구현하는 것인지, 브라우저의 너비에 따른 요소들의 값을 vw, vh 단위로 설정하는 것인지 아니면 다른 의미가 따로 있는지 정확하게 모르겠습니다.
  • 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

@Exit-c Exit-c requested a review from danmin20 April 27, 2024 04:55
@Exit-c Exit-c added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Apr 27, 2024
<h1 class="header-logo">
<a href="/"
><img
src="images/logo.png"
Copy link
Collaborator

Choose a reason for hiding this comment

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

보니까 2배, 3배로 추출한 이미지를 따로 사용하지 않는 것 같은데, 파일을 추가하신 이유가 있으실까요?

Comment on lines +121 to +122
<a href="https://www.facebook.com/" target="_blank" rel="noopener"
><img
Copy link
Collaborator

Choose a reason for hiding this comment

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

들여쓰기가 전체적으로 이상한 것 같아요~
a태그와 img태그에 대해서 이상하게 작성된 것 같네요.

height="51"
/></a>
</h1>
<a href="pages/login.html">로그인</a>
Copy link
Collaborator

Choose a reason for hiding this comment

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

a 태그는 보통 anchor나 다른 외부 하이퍼링크에 사용되어요. 커스텀한 스타일의 버튼은 button 태그를 사용하는 게 더 좋아보입니다~

Comment on lines +21 to +32
header > a {
display: block;
width: 128px;
height: 48px;
padding: 12px 20px;
border-radius: 8px;
color: #fff;
background-color: #3692FF;
font-weight: 600;
text-align: center;
white-space: nowrap;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

보니까 button에 대한 스타일링인 것 같은데,
피그마로 보면 btn_large, btn_small 로 정의되어 있어요. 디자인 시스템과 명칭을 일치시키는 것도 좋은 방법이에요~
그리고 hover, active 에 대한 css도 추가하면 좋을 것 같아요.

color: #374151;
}

header {
Copy link
Collaborator

Choose a reason for hiding this comment

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

보통 header는 fixed 되는 게 일반적이기는 합니다!


.section1 > .bg-img {
position: absolute;
top: 93px; left: 36.51vw;
Copy link
Collaborator

Choose a reason for hiding this comment

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

엔터가 빠져있네요!


.section1 > .container a {
padding: 16px 124px;
border-radius: 40px;;
Copy link
Collaborator

Choose a reason for hiding this comment

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

세미콜론이 하나 더 들어가있어요~

@danmin20 danmin20 merged commit eec65f3 into codeit-bootcamp-frontend:Basic-김당찬 Apr 29, 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