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.

Sign up for GitHub

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

Jump to bottom

[김휘송] Sprint1 #27

Merged
merged 4 commits into from
Oct 28, 2024
Merged

[김휘송] Sprint1 #27

merged 4 commits into from
Oct 28, 2024

Conversation

qpalkim
Copy link
Collaborator

@qpalkim qpalkim commented Oct 26, 2024 •
edited
Loading

요구사항

기본

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

심화

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

주요 변경사항

스크린샷

멘토에게

@qpalkim qpalkim requested a review from Lanace October 26, 2024 11:33
@qpalkim qpalkim added the 순한맛🐑 마음이 많이 여립니다.. label Oct 26, 2024
@qpalkim qpalkim changed the title [김휘송] sprint1 [김휘송] Sprint1 Oct 26, 2024
Lanace
Lanace approved these changes Oct 28, 2024
View reviewed changes
Copy link
Collaborator

@Lanace Lanace left a comment

Choose a reason for hiding this comment

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

첫 과제라 어려우셨을텐데 고생 많으셨습니다ㅎㅎ!
잘 해주셔서 감사합니다~

index.html
Comment on lines +5 to +7
<meta charset="UTF-8">
<title>판다마켓</title>
<link rel="stylesheet" href="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.

meta tag중에 viewport 라는 태그가 있는데
화면에 보여지는 크기가 얼만큼인지를 미리 브라우저한테 알려주는 속성이에요

미리 이런걸 브라우저에게 알려주어서 어떻게 화면이 보여야 하는지 지정해주면 좋아요!
특히 모바일 화면에서요ㅎㅎ

https://developer.mozilla.org/ko/docs/Web/HTML/Viewport_meta_tag

index.html
@@ -0,0 +1,98 @@
<!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.

언어 설정도 잘 해주셨네요ㅎㅎ!

index.html
Comment on lines +24 to +26
<div class="shortcut"><a href="/items.html">
구경하러 가기</a>
</div>
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="shortcut">
    <a href="/items.html">구경하러 가기</a>
</div>

index.html
Comment on lines +36 to +39
<h1>
인기 상품을<br>
확인해 보세요
</h1>
Copy link
Collaborator

Choose a reason for hiding this comment

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

한 페이지에 h1은 가급적 1개만 있는게 좋긴 해요!
그리고 이부분은 h1보단 h2나 그 이하로 내려가는게 좋을것같아요...!

https://codingeverybody.kr/html-heading-tags/ 이 글 보시면 좋을것같네요~

index.html
Comment on lines +40 to +43
<p>
가장 HOT한 중고거래 물품을
판다 마켓에서 확인해 보세요
</p>
Copy link
Collaborator

Choose a reason for hiding this comment

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

아마 줄바꿈이 잘 안나왔을텐데, 줄바꿈은
을 명시적으로 지정해주어야 해요

코드가 길어져서 줄을 바꾼건지, 화면에 노출되는게 줄바꿈된건지 모르기떄문에
같은 태그로 줄바꿈을 명시적으로 표현해주거든요!

index.html
Comment on lines +85 to +86
<p><a href="/privacy.html">Privacy Policy</a></p>
<p><a href="/faq.html">FAQ</a></p>
Copy link
Collaborator

Choose a reason for hiding this comment

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

절대경로로 잘 표현해주셨네요ㅎㅎ!
굳굳

style.css
margin: 0 auto;
padding: 0;
list-style: none;
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.

폰트는 폰트파일을 받아와야 정상적으로 노출될꺼에요!

https://stackoverflow.com/a/2237558/5949460 여기 있는것처럼 불러올수도 있구요.

pretendard 폰트 사용은 여기 있는것처럼 적용 가능해요!

<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

style.css

body {
width: 100%;
min-width: 1080px;
Copy link
Collaborator

Choose a reason for hiding this comment

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

최소 간격을 주게되면 화면이 점점 작아졌을때 또는 모바일에서 문제가 생길 수 있어요!
차라리 안에 있는 요소로 사이즈를 결정시켜주는게 좋을 수 있어요...!

style.css
Comment on lines +27 to +31
.logo {
float: left;
width: 200px;
height: 51px;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

float 속성으로 처리하실 수 있긴 한데, 가급적이면 flex나 다른 속성을 통해서 스타일링 하는게 좀더 좋을것같긴 해요ㅠ

https://stackoverflow.com/a/9777248/5949460 이거 참고하시면 좋을것같아요!ㅎㅎ

style.css
margin-top: 10px;
}

.log-in>a {
Copy link
Collaborator

Choose a reason for hiding this comment

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

오? 이렇게 지정하는것도 배우셨군요ㅎㅎ

이런 selector 들 많이 알고계시면 스타일링할떄 도움 많이 되실꺼에요!

@Lanace Lanace merged commit ead4ecc into codeit-bootcamp-frontend:Basic-김휘송 Oct 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Lanace Lanace Lanace approved these changes

Assignees
No one assigned
Labels
순한맛🐑 마음이 많이 여립니다..
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@qpalkim @Lanace