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

Conversation

Lee-Dong-Seok
Copy link
Collaborator

@Lee-Dong-Seok Lee-Dong-Seok commented Mar 15, 2024

요구사항

기본

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

심화

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

주요 변경사항

스크린샷

image

멘토에게

  • 아직 실력이 부족하여 전체적으로 많이 부족한 코드입니다 문제가 있는 코드들은 전부 찝어 주시면 감사하겠습니다.
  • 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

@Lee-Dong-Seok Lee-Dong-Seok requested a review from leejyart March 15, 2024 11:12
Copy link
Collaborator

@leejyart leejyart Mar 17, 2024

Choose a reason for hiding this comment

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

사소해보이지만 이미지 파일명 규칙을 일관성있게 적용해주면 좋을것 같습니다.
예컨데, 한글명으로 되어있는 파일도 수정되면 좋을 것 같습니다.

<!-- title -->
<header>
<div class="logo">
<img src="/images/판다 얼굴.png" alt="" />
Copy link
Collaborator

@leejyart leejyart Mar 17, 2024

Choose a reason for hiding this comment

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

image 의 alt 속성은 웹 접근성과 SEO 에 영향을 줄 수 있습니다.
웹 표준기관 WHATWG 의 대체 텍스트 제공 가이드라인에도 아래와 같은 문구가 있습니다.

"Except where otherwise specified, the alt attribute must be specified and its value must not be empty"
달리 지정된 경우를 제외하고 alt 특성을 지정해야만 하며 해당 값은 비워 둘 수 없습니다.

alt 속성과 관련된 문서를 첨부드리니 참고해보세요 : )
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt

@leejyart
Copy link
Collaborator

첫 과제를 하시느라 고생 많으셨습니다 : )
앞으로 성장할 동석님의 모습도 기대할게요!

p.s 타이틀을 판다마켓이 아닌 [[Lee-Dong-Seok] sprint1 로 수정해주세요 : )

@leejyart leejyart merged commit 2338985 into codeit-bootcamp-frontend:part1-이동석 Mar 17, 2024
@Lee-Dong-Seok Lee-Dong-Seok changed the title 판다마켓 [Lee-Dong-Seok] sprint1 Mar 18, 2024
@mayseunghwa mayseunghwa changed the title [Lee-Dong-Seok] sprint1 [이동석] sprint1 Mar 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants