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

Conversation

kim-1997
Copy link
Collaborator

@kim-1997 kim-1997 commented Jan 8, 2025

요구사항

기본

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

심화

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

주요 변경사항

  • 반응형 디자인

스크린샷

fanda1
fanda1_mo

멘토에게

  • 열심히 공부하겠습니다

@kim-1997 kim-1997 requested a review from dongqui January 8, 2025 10:12
@kim-1997 kim-1997 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Jan 8, 2025
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.

성빈님 고생 많으셨습니다.

html css가 상당히 능숙하신 거 같네요 :)
앞으로가 더 기대되는군요!! 💯

@@ -0,0 +1,168 @@
<!DOCTYPE html>
<html lang="ko">
Copy link
Collaborator

Choose a reason for hiding this comment

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

lang을 잘 챙겨주셨네요! 👍

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="src/assets/css/style.css" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

css를 분리하셨군요! 👍

<span class="blind">판다마켓</span>
</a>
</h1>
<button>
Copy link
Collaborator

Choose a reason for hiding this comment

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

상호작용이 가능한 요소(button, a, input...)를 중첩하는것은 표준에 맞지 않습니다!

button, a 태그 둘 중에 하나만 써주세요~!

margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
Copy link
Collaborator

Choose a reason for hiding this comment

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

image
간격을 확인해주세요 ㅎ

</head>
<body>
<div id="wrap">
<header id="header" class="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>
<div class="main-kv">
<div class="main-kv__wrap">
<div class="main-kv__contents">
Copy link
Collaborator

Choose a reason for hiding this comment

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

클래스명을 짜임새 있게 잘 구성해주신 것 너무 좋습니다 👍

}

/* 미디어 쿼리 */
@media screen and (max-width: 1366px) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

반응형도 잘 해주셨네요~! 👍

<div class="main-kv">
<div class="main-kv__wrap">
<div class="main-kv__contents">
<h2>
Copy link
Collaborator

Choose a reason for hiding this comment

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

크게 상관은 없지만 패딩 때문에 h2가 불필요하게 커진 거 같네요! 패딩은 보통 요소의 내부 간격 위해 쓰이고, 위치를 옮기기엔 부적절해 보입니다!
image

@dongqui dongqui merged commit 140f276 into codeit-bootcamp-frontend:Basic-김성빈 Jan 9, 2025
@kim-1997
Copy link
Collaborator Author

kim-1997 commented Jan 9, 2025

감사합니다 부족한 부분은 참고해서 공부해 보겠습니다.

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