[이도요] Sprint1

[doh-yo]

요구사항

기본

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

심화

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

주요 변경사항

스크린샷

멘토에게

• 심화 부분인 반응형 웹 퍼블리싱은 아직 방법을 모르겠습니다.
• 기본 요소를 맞추려고 노력했으나, 의도대로 알맞게 구현했는지 헷갈립니다.
• 전체적인 구성(특히 )을 깔끔하고 효율적으로 짜보고 싶어요.
  elaborate-parfait-510e61.netlify.app

[Il9]

구조에 알맞게 잘 작성하신 것 같습니다 👍
시멘틱태그들도 적절하게 잘 활용하셨습니다.
LGTM

---

질문 답변

심화 부분인 반응형 웹 퍼블리싱은 아직 방법을 모르겠습니다.

멘토링 때 말씀드렸듯이 너비나 높이등을 고정값이 아닌 비율%를 이용해서 만들어보시면 도움이 되실 것 같습니다.

기본 요소를 맞추려고 노력했으나, 의도대로 알맞게 구현했는지 헷갈립니다.

기본요소를 맞추려고 하셨다는게 정확히 어떤 것인지 모르겠으나,
딱히 문제되어보이는 부분은 없었던 것 같습니다.

전체적인 구성(특히 )을 깔끔하고 효율적으로 짜보고 싶어요.

복잡한 페이지가 아니라서 크게 비효율적인 부분은 없는 것 같습니다.
그래도 좀더 효율적으로 해보시고 싶으시다면 css를 최대한 재사용 가능한 형태로 만들어서 반복을 줄이는 정도가 있을 것 같습니다. (예를 들자면 section같은 부분)
이정도는 쪼개서 재사용해도 되겠다 싶은 부분들을 스스로 찾아보시면 도움이 되실겁니다.

[Il9]

이부분 전부 태그가 잘못 닫혀있네요

[Il9]

당장 큰 문제는 없긴하지만
section, content등 겹치기 쉬운 형태의 class name들이 많은 것 같습니다.
class name 충돌을 피하기위해 최대한 특화된 이름으로 지어주는게 좋습니다.
부모의 class name을 붙여서 footer_bottom-banner 이런식으로 지어주는것도 방법입니다.

추가로 gnb나 logo같은 한개만 존재하는 요소의 경우 id를 넣어주면 겹치는 실수를 어느정도 방지할 수 있습니다.