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

[김준완] Sprint2 #68

Merged

Conversation

kjw0412c
Copy link
Collaborator

@kjw0412c kjw0412c commented Jun 1, 2024

요구사항

기본

  • Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
  • 피그마 디자인에 맞게 페이지를 만들어 주세요.
  • React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.
  • 아래로 스크롤 해도 상단 네비게이션 바(Global Navigation Bar)가 최상단에 고정됩니다.
  • HTML, CSS 파일을 Netlify로 배포해 주세요. (MISSION 1까지의 내용)
  • 랜딩 페이지의 url path는 루트(‘/’) 입니다.
  • title은 “판다마켓”으로 설정해 주세요.
  • 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 해주세요.
  • 화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px“로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 해주세요.
  • 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 cursor: pointer를 설정해 주세요.
  • “판다마켓” 클릭 시 루트 페이지(‘/’)로 이동시켜주세요.
  • “구경하러 가기" 클릭 시 (“/items”)페이지로 이동시켜주세요.(빈 페이지)
  • “로그인”버튼 클릭 시 로그인 페이지(‘/login’)로 이동합니다
  • “구경하러가기”버튼 클릭 시(’/items’)로 이동합니다
  • 아래로 스크롤 해도 상단 네비게이션 바(Global Navigation Bar)가 최상단에 고정됩니다.
  • “판다마켓" 클릭 시 루트 페이지(“/”)로 이동합니다.
  • 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다.
  • input 요소에 focus in 일 때, 테두리 색상은 #3692FF입니다.

  • input 요소에 focus out 일 때, 테두리는 없습니다.
  • SNS 아이콘들은 클릭시 각각 페이지로 이동합니다.
(“https://www.google.com/”,“https://www.kakaocorp.com/page/”)
  • “회원 가입”버튼 클릭 시 “/signup” 페이지로 이동합니다.

심화

  • 사용자의 브라우저가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 보세요.(설정값은 자유입니다)
  • 비밀번호 input 요소 오른쪽에 눈모양 아이콘을 추가합니다.
(추후 클릭으로 비밀번호를 보거나 가릴 수 있도록 기능을 만들어 갈 예정입니다.)

주요 변경사항

  • MISSION 1,2 의 기본 요구사항 및 심화 요구사항
  • MISSION 2의 페이지에서 JS파일 추가하여 인풋 박스에 적절한 내용이 채워져야만 버튼이 활성화되도록 구현

스크린샷

https://pandamarket-jw.netlify.app/ (MISSION 1까지의 내용만 있습니다.)

image
image

멘토에게

  • JS파일을 금주에 배운 내용을 토대로 추가해보았습니다. 한 파일에 작성해보려고 노력해봤는데, 좋은 노력이었는지는 확신이 없습니다. 한 번 봐주시고 문제가 되는 부분이 있다면 짚어주시면 감사드리겠습니다.
  • CSS와 HTML은 정말 보이는 것과 기능에만 문제가 없게 1차적으로 작성하였습니다. 부족한 부분 많이 지적 부탁드립니다.
  • 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

@kjw0412c kjw0412c requested a review from JaeSang1998 June 1, 2024 16:55
@kjw0412c kjw0412c changed the title Junwan [김준완] Sprint2 Jun 3, 2024
@kjw0412c kjw0412c added the 순한맛🐑 마음이 많이 여립니다.. label Jun 3, 2024
Copy link
Collaborator

@JaeSang1998 JaeSang1998 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 js 의 분리를 잘 해 주신것 같아요! 너무 고생하셨습니다. 작은 오타나 tag 들이 미숙한 것 빼고는 매우 잘해주셨습니다 :)

추가적으로 불필요한 파일들이나 비어있는 파일들은 git 에 제외해주시면 더 좋습니다!

고생하셨습니다~~!

index.html Show resolved Hide resolved
index.html Show resolved Hide resolved
index.html Show resolved Hide resolved
login.html Show resolved Hide resolved
signup.html Show resolved Hide resolved
script.js Show resolved Hide resolved
sign_style.css Show resolved Hide resolved
index.html Show resolved Hide resolved
sign_style.css Show resolved Hide resolved
script.js Show resolved Hide resolved
@JaeSang1998 JaeSang1998 merged commit 7c434d8 into codeit-bootcamp-frontend:Basic-김준완 Jun 5, 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