[유서현] sprint1

[ucream]

요구사항

기본

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

심화

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

주요 변경사항

스크린샷

멘토에게

• 배포 주소는 https://voluble-cactus-1b277d.netlify.app/ 입니다.
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[GANGYIKIM]

서현님 첫번째 PR 제출 고생하셨습니다!
리뷰 드린 코멘트는 모두 필수 반영사항은 아니고 코드에 정답은 없으니
보고 마음에 드시는 방향으로 수정하시면 좋겠습니다!
다음 주차도 화이팅입니다~

---

• commit 단위를 쪼개시고 형식에 따라 commit 하신점 좋습니다.
• css랑 html 파일내에서 구조화하려고 하신 점 좋습니다!
• sprint1 폴더를 만드셔서 거기서 작업을 하셨는데, sprint2가 시작하면 어떻게 하실 예정이실까요? sprint[구현주차수] 로 폴더명을 변경하시면서 작업하시는 것은 비추드립니다. 그렇게되면 git 자체적으로 해당 폴더 전체가 변경되었다고 판단하고 제가 변경사항에 대해 파악해 리뷰드리기가 어려워집니다~ 따라서 가능하면 sprint1로 폴더명을 유지하시는 것을 추천드리고, 신경쓰이신다면 sprint1 폴더를 지우시고 나머지 파일들을 root로 빼주시는 것을 추천드려요~

[GANGYIKIM]

💊 제안
주석은 히스토리상 필요하거나 코드설명이 필요한 경우처럼 필요한 경우만 남겨두는 것이 좋습니다.
만약 작업중 확인하시려고 넣으신거면 삭제해주세요~

Suggested change

	/* position: sticky;
	top: 0px; */

[GANGYIKIM]

👍 칭찬
파악하기 쉽게 관련된 css 들을 모아두시고 주석으로 구분해주신점 좋습니다!

[GANGYIKIM]

💊 제안
브라우저 마다 자체적으로 스타일을 가지고 있습니다.
위의 코드에서 a 태그의 text-decoration: none을 적용해주신건, 이미 text-decoration: underline 속성을 가지고 있기 때문이죠~
이런식으로 이미 가지고 있는 스타일을 없애 원하는 스타일을 적용하기 위한 작업이 필요합니다.
주로 이러한 역할을 하는 css 파일을 reset.css 혹은 normalize.css 라는 이름으로 만들어서 관리합니다.
서현님께서는 지금 필요한 태그의 스타일만 초기화하고 사용하셨지만 reset.css 같은 파일을 만드셔서
다른 태그들의 기본 스타일도 초기화하고 작업하시는 것이 예상치 못한 동작도 방지하고 코드 반복을 줄일 수 있어 추천드려요!

혹시 어떤 내용들이 들어가는지 궁금하시다면 reset.css, normalize.css 를 구글에 검색해보시면 다양한 파일이 나오니
확인해보시고 마음에 드는 것을 참고하시면 좋을 것 같습니다.

[GANGYIKIM]

👍 칭찬
메타태그 작성하신 것 좋습니다 👍

[GANGYIKIM]

💊 제안
주석을 다는 것은 좋은 습관이지만, 가장 좋은 코드는 주석 없이도 이해할 수 있는 코드입니다.
현재 코드 구조상 주석 없이도 충분히 이해할 수 있어 보이는데, 오히려 주석이 많아 가독성을 해칠 수 있을 것 같아요.
필요한 부분에만 간결하게 주석을 추가하면 더 좋은 코드가 될 것 같습니다!

[GANGYIKIM]

❓ 질문
앵커 태그에서 button 속성을 주셨는데, 어떤 용도로 사용하시는 건지 궁금합니다~
mdn에 안나와있는데, custom-attribute로 사용하신걸까요?
만약 불필요한 속성이라면 지우시는 것을 추천드려요~

[GANGYIKIM]

💊 제안
이 영역은 로고들의 모음이라고 할 수 있습니다. 관련된 요소들끼리 묶인 목록이니 의미록적인 마크업을 작성한다면 list 관련 태그로 작성하시는 것을 추천드립니다.

        <ul class="icons">
          <li>
              <a href="https://www.facebook.com" target="_blank">
                <i class="fa-brands fa-facebook"></i>
              </a>
          </li>
        </ul>