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

Merged
merged 2 commits into from
Apr 28, 2024
Merged

[김광호] Sprint1 #9

merged 2 commits into from
Apr 28, 2024

Conversation

ouranos1
Copy link
Collaborator

요구사항

기본

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

심화

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

주요 변경사항

  • 상단과 하단의 이미지는 백그라운드로 처리하였습니다.

스크린샷

멘토에게

  • 대부분의 기본 요구사항은 만족하였으나 배포와 4번째 요구사항인 header의 로고와 로그인 사이의 여백 처리는 구현하지 못하였습니다.
  • 심화의 요구사항인 반응형(예상)또한 구현하지 못하였습니다.
  • 리뷰를 통해 질문 이어가겠습니다.
  • 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

ouranos1 added 2 commits April 25, 2024 17:34
@ouranos1
스프린트미션1 수행 1차
683b3f9
@ouranos1
title : header 수정
1832462 
body : nav를 div로 감싸고 widh를 부여해 여백 조절해보려 했으나 실패 및 header의 버튼과 p태그 사이 여백 확보
@ouranos1 ouranos1 requested a review from jlstgt April 26, 2024 02:49
@ouranos1 ouranos1 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Apr 26, 2024
@jlstgt jlstgt changed the title [김광호] sprint 1 [김광호] Sprint1 Apr 27, 2024
jlstgt
jlstgt approved these changes Apr 28, 2024
View reviewed changes
Copy link
Collaborator

@jlstgt jlstgt left a comment

Choose a reason for hiding this comment

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

첫 번째 미션인데도 불구하고 CSS 변수를 이용하는 것, flex를 통한 레이아웃, background 속성 사용 등 잘 수행해주신 것 같습니다. 고생 많으셨습니다!

cssfile.css
body{
padding: 0;
margin: 0;
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는 Pretendard를 사용할 수 없는 환경까지 처리하기 위해서
font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
혹은
font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; 와 같은 값으로 지정하시는 게 좋습니다.

참고 링크: https://github.com/orioncactus/pretendard?tab=readme-ov-file#font-family

cssfile.css
flex-direction: column;
align-items: center;
--button-color: #3692ff;
--backgrount-color: #cfe5ff;
Copy link
Collaborator

Choose a reason for hiding this comment

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

background인데 backgrount라고 오타가 났네요. 이 부분 포함 아래 부분까지 다 수정이 필요할 듯 합니다.

cssfile.css
@@ -0,0 +1,218 @@
body{
Copy link
Collaborator

Choose a reason for hiding this comment

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

보통 { 왼쪽에 띄어쓰기를 넣습니다.
ex) body {

cssfile.css
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 같은 이름이 좋아보입니다. 이미 파일이기 때문에 file이라는 단어는 필요하지 않을 것 같습니다.

mainpage.html
<div class="header-size">
<nav>
<a href="/"><img src="images/logo/panda-market-logo.png"></a>
<a class="button" href="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.

로그인와 같은 형식으로 적으면 버튼에 링크가 걸립니다. 뿐만 아니라, button 태그를 사용했으므로 일부러 pointer: cursor; 같은 속성을 줄 필요가 없습니다. 이는 의미론적으로 HTML을 작성해야 된다는 점에서도 좋은 방법입니다.

mainpage.html
<header>
<div class="header-size">
<nav>
<a href="/"><img src="images/logo/panda-market-logo.png"></a>
Copy link
Collaborator

Choose a reason for hiding this comment

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

img처럼 닫는 태그가 필요 없는 태그는 끝 부분을 />로 작성하셔야 합니다.
ex) <img src="images/logo/panda-market-logo.png" />

mainpage.html
<a href="faq.html"><p>FAQ</p></a>
</div>
<div class="social-img">
<a href="https://www.facebook.com/?locale=ko_KR" target="_blank"><img src="images/social/facebook-logo.svg"></a>
Copy link
Collaborator

@jlstgt jlstgt Apr 28, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

이미지 태그에는 width와 height 속성을 사용해 너비와 높이를 지정해 주는 게 좋습니다(css로 지정해도 해도 무방)
자세한 이유는 멘토링 시간에 말씀드리겠습니다.

mainpage.html
<p>©codeit - 2024</p>
</div>
<div class="p2">
<a href="Privacy.html"><p>Privacy Policy</p></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 태그 안에 p 태그가 없어도 될 것 같습니다.

mainpage.html
</div>
</div>
<div class="page-end">
<div class="p1">
Copy link
Collaborator

Choose a reason for hiding this comment

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

클래스명을 붙일 거라면, 좀 더 의미가 있는 이름을 지정하는 게 좋을 것 같습니다.

Privacy.html
Copy link
Collaborator

Choose a reason for hiding this comment

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

파일명 시작이 소문자가 되는 게 좋을 것 같습니다.

@jlstgt jlstgt merged commit 2a297fc into codeit-bootcamp-frontend:Basic-김광호 Apr 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jlstgt jlstgt jlstgt 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
@ouranos1 @jlstgt