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

Merged
merged 1 commit into from
Nov 14, 2024
Merged

[장호영] Sprint1 #132

merged 1 commit into from
Nov 14, 2024

Conversation

loin99
Copy link
Collaborator

@loin99 loin99 commented Nov 9, 2024

요구사항

기본 - 스프린트 미션 1

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

심화 - 스프린트 미션 1

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

기본 - 스프린트 미션 2

  • Chapter 2부터는 Github에 Pull Request를 만듭니다.
  • Netlify에 파일 배포가 아닌 포크한 Github 레포지토리와 연결합니다.
  • 아래로 스크롤 해도 상단 네비게이션 바(Global Navigation Bar)가 최상단에 고정됩니다.
  • "판다마켓" 클릭 시 루트 페이지("/")로 이동합니다.
  • [] 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다.
  • [] input 요소에 focus in일 때, 테두리 색상은 #3692FF입니다. (pseudo class를 활용해 보세요. 참고)
  • [] input 요소에 focus out일 때, 테두리는 없습니다.
  • [] SNS 아이콘들은 클릭 시 각각 아래 페이지로 이동합니다. - "https://www.google.com/", "https://www.kakaocorp.com/page/"
  • [] "회원 가입" 버튼 클릭 시 ("/signup") 페이지로 이동합니다.
  • [] "로그인" 버튼 클릭 시 ("/login") 페이지로 이동합니다.

심화 - 스프린트 미션 2

  • palette에 있는 color 값들을 css 변수로 등록하고 사용합니다.
  • [] 비밀번호 input 요소 오른쪽에 눈모양 아이콘을 추가합니다. (추후 클릭으로 비밀번호를 보거나 가릴 수 있도록 기능을 만들어 갈 예정입니다.)

주요 변경사항

  • 기존 템플릿 코드만 업로드했던 내용을 reset한 이후 제 코드와 템플릿 코드를 통합했습니다.
  • 기본 html 코드 구조와 css 코드 내용에 있어 파트 1 팀원의 코드를 참고하여 작성하였습니다.

스크린샷

image

URL 배포 사이트 : sprint-mission-hoyeong.netlify.app

멘토에게

  • 스프린트 미션 1, 스프린트 미션 2 당시 타 스프린터들에 비해 발맞춰 따라가지 못해 진도가 많이 늦습니다.
  • 현재 커리큘럼 진행 및 복습을 함과 동시에 천천히 쌓아가보겠습니다.
  • 현재 스프린트 미션 2 내용의 대부분을 충족시키지 못해 최대한 빠른 시일 내에 재정리해서 PR 제출하도록 하겠습니다.
  • 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

@loin99 loin99 requested a review from withyj-codeit November 9, 2024 13:59
@loin99 loin99 added the 순한맛🐑 마음이 많이 여립니다.. label Nov 9, 2024
@loin99
Copy link
Collaborator Author

loin99 commented Nov 9, 2024

웹페이지 구조가 완전하지 못해 더 정리한 뒤 커밋 메시지 남기도록 하겠습니다.

withyj-codeit
withyj-codeit reviewed Nov 14, 2024
View reviewed changes
Copy link
Contributor

@withyj-codeit withyj-codeit left a comment

Choose a reason for hiding this comment

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

스프린트 미션 따라가느라 수고 많으셨어요~👏🏻
스타일 일부가 미완성된 부분이 있는데, 다음 스프린트 미션 할 때 수정해가면서 요구사항에 맞게 맞춰가면 좋을 것 같아요.

css/base.css
gap: 12px;
width: 100%;
height: 2rem;
}
Copy link
Contributor

Choose a reason for hiding this comment

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

vscode에서 end of line 설정해주세요.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

LF로 지정하면 될까요, 아니면 CRLF로 지정하면 될까요? 이전에 설정해본 적이 없어 잘 모르겠습니다.

html/index.html
일상의 모든 물건을 <br>
거래해 보세요
</h2>
<!-- <a href="/html/items.html" class="btn-large banner-btn">구경하러 가기</a> -->
Copy link
Contributor

Choose a reason for hiding this comment

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

필요한 주석이 아니면 제거해주세요.

css/variables.css
--color-grey: #dfdfdf;
--color-black: #4b5563;

--gutter: 2.4rem;
Copy link
Contributor

Choose a reason for hiding this comment

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

반복해서 필요한 CSS 값들 변수화 하는 것 좋아요~👍

html/index.html
<link rel="stylesheet" href="/css/base.css">
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/reset.css">
<link rel="stylesheet" href="/css/variables.css">
Copy link
Contributor

Choose a reason for hiding this comment

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

페이지 별로 공통적으로 필요한 base, reset, variables 파일들 관심사 별로 파일 분리해서 사용하는 것 좋아요~👍

css/base.css

/* layout - header */

.header {
Copy link
Contributor

Choose a reason for hiding this comment

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

header 스타일의 height가 요구사항보다 조금 큰 거 같은데 확인해주세요.

css/main.css
max-width: calc(98.8rem + var(--gutter) * 2);
}

.feature-card {
Copy link
Contributor

Choose a reason for hiding this comment

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

feature-card 안에 있는 스타일이 요구사항하고 달라서 확인해주세요.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

line-height 조절 및 padding-left 추가로 텍스트의 위치를 일정 부분 조정하였습니다.
스프린트 미션 페이지에 있는 템플릿과 비교해보았을 때 텍스트 옆에 있는 이미지 크기가 충분히 크게 설정하지 못하였습니다. 이 부분에 대해 추후 여쭤보고 싶습니다.

css/main.css

/* footer banner */

#footerBanner {
Copy link
Contributor

Choose a reason for hiding this comment

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

푸터 스타일이 요구사항하고 다른 부분이 있어 확인해주세요.

@withyj-codeit withyj-codeit merged commit 2add2db into codeit-bootcamp-frontend:Basic-장호영 Nov 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@withyj-codeit withyj-codeit withyj-codeit left review comments

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

Successfully merging this pull request may close these issues.
2 participants
@loin99 @withyj-codeit