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

Conversation

kim-hye-sun
Copy link
Collaborator

요구사항

기본

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

심화

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

주요 변경사항

  • main 화면 퍼블리싱

스크린샷

image

@kim-hye-sun kim-hye-sun marked this pull request as draft March 15, 2024 11:40
@kim-hye-sun kim-hye-sun changed the title Part1 김혜선 sprint1 [김혜선] Sprint1 Mar 15, 2024
@kim-hye-sun kim-hye-sun marked this pull request as ready for review March 15, 2024 11:44
@kim-hye-sun kim-hye-sun requested a review from airman5573 March 15, 2024 12:13
@kim-hye-sun kim-hye-sun added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Mar 15, 2024
Copy link
Collaborator

@airman5573 airman5573 left a comment

Choose a reason for hiding this comment

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

안녕하세요 혜선님, 미션 진행하느라 수고 하셨습니다.
전반적으로 코드가 잘 짜여져있고 실행해봤을때 브라우저에서도 잘 나오네요 👍

커밋 메세지만 약간 더 상세하게 작성해주시면 좋을것 같아요 :D
수고하셨습니다 ~

@@ -0,0 +1,158 @@
/*초기 설정*/
*{
font-family: "Pretendard";
Copy link
Collaborator

Choose a reason for hiding this comment

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

모든 요소의 font-family를 통일해주셨군요 👍

padding: 0;
}
.container{
width: 100%;
Copy link
Collaborator

Choose a reason for hiding this comment

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

wow width와 max-width, margin 패턴을 아주 잘 활용해 주셨어요 👍

position: absolute;
left: 15%;
top: 50%;
transform: translateY(-50%);
Copy link
Collaborator

Choose a reason for hiding this comment

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

세로 정렬을 하기 위해 top과 transform을 활용해 주셨군요 👍

}
.main_con2 .main_con_text{text-align: right;}

.btm_banner{width: 100%;
Copy link
Collaborator

Choose a reason for hiding this comment

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

여기는 줄바꿈으로 코드를 조금 정리해주세요 :D

<a href="/sub/item.html">구경하러 가기</a>
</div>
<div class="banner_img">
<img src="/image/main_banner.png" alt="메인 배너 이미지" class="img_responsive">
Copy link
Collaborator

Choose a reason for hiding this comment

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

이미지에 alt를 설정해 주셨군요 👍

<img src="/image/maincon2.png" alt="인기 상품 이미지" class="img_responsive">
</div>
</section>
<section class="main_con3 main_con">
Copy link
Collaborator

Choose a reason for hiding this comment

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

class명을 보고 혜선님인줄 이제 알았네요 ㅋㅋ
역시 경력자 시군요!


.main_con{padding: 138px 0;}
.main_con .container {
display: grid;
Copy link
Collaborator

Choose a reason for hiding this comment

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

grid를 잘 활용해 주셨네요 👍

@airman5573 airman5573 merged commit 49845a0 into codeit-bootcamp-frontend:part1-김혜선 Mar 17, 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