[유주민] sprint1

[ghost]

요구사항

기본

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

심화

• palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.

주요 변경사항

• 메인 랜딩 페이지 작업했습니다.

Netlify 주소

https://pandamarket06-1.netlify.app/

스크린샷

멘토에게

• 화면의 너비를 조절했을 때 본문에 있는 요소들이 아래로 내려가지 않고 그대로 잘리는데 왜 이런 현상이 나타나는지 잘 모르겠어요,,
• flex를 사용한 배치가 익숙하지 않아서 마진과 패딩을 큰 값을 사용해서 간격을 최대한 맞추는 방향으로 코드를 작성했는데 그래도 피그마 시안이랑 비교했을 때 요소 위치 차이가 눈에 잘 보여서 어떻게 맞추면 좋을까요 ..??
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다!

[Il9]

전반적으로 잘 하신 것 같습니다 👍
시멘틱태그들도 적극적으로 활용하셨고, class name들 작성도 잘 하셨습니다.
LGTM

---

질문 답변

화면의 너비를 조절했을 때 본문에 있는 요소들이 아래로 내려가지 않고 그대로 잘리는데 왜 이런 현상이 나타나는지 잘 모르겠어요,,

요소들의 컨테이너가 width가 고정값이라서 그렇습니다.
%나 max-width, min-width등을 사용해보시는걸 추천드립니다.

flex를 사용한 배치가 익숙하지 않아서 마진과 패딩을 큰 값을 사용해서 간격을 최대한 맞추는 방향으로 코드를 작성했는데 그래도 피그마 시안이랑 비교했을 때 요소 위치 차이가 눈에 잘 보여서 어떻게 맞추면 좋을까요 ..??

기본적으로는 익숙하지 않아도 그냥 flex로 계속 이것저것 시도해보시면서 꾸준히 해보시는걸 추천드립니다.
flex는 고정값이 아닌 비율로 동작하기 때문에 마진과 패딩으로 똑같이 구현하려면 고정값이아닌 비율 %로써 작동하도록 만드셔야 될 것 같습니다.
하지만 저는 어떻게든 넓은 레이아웃을 잡으실 때는 flex를 좀더 활용해보시는 걸 추천드릴게요.

[Il9]

gnb의 경우 다른 페이지에서도 사용될 가능성이 높으니 공용으로 사용될 수 있게 home 같은 접두사는 제외시키고 만드시면 좋을 것 같습니다.

[Il9]

다른 class name들 처럼 logo와 login-btn이 gnb-logo 이런식으로 위계가 들어가면 css파일에서 알아보기 더 좋겠네요.
아니면 한개만 존재할 것 같으니 id를 사용하셔도 좋습니다.

[Il9]

같은 모양의 컨텐츠들을 같은 클래스로 묶어서 처리하신 점 잘하셨습니다

[Il9]

img에 alt를 빼먹지 않으신 것도 👍

[Il9]

텍스트가 오른쪽정렬되는 부분을 search로 구분하여 사용하신걸로 보입니다.
밑에 컨텐츠가 하나 더 추가될 경우 재활용하기 좋도록 search보다는 좀더 범용적인 이름으로 오른쪽 정렬을 나타내는 명칭이 사용되면 좋을 것 같습니다.