[조현지]sprint1

[cindycho0423]

요구사항

기본

이거 이렇게 작성하는건지 모르겠지만..!

• “로그인”버튼 클릭 시 로그인 페이지(‘/signin’)로 이동합니다
  “구경하러가기”버튼 클릭 시(’/items’)로 이동합니다.

• 랜딩 페이지의 url path는 루트(‘/’) 입니다.
  title은 “판다마켓”으로 설정해 주세요.
  화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 해주세요.
  화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px“로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 해주세요.
  클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 cursor: pointer를 설정해 주세요.
  “판다마켓” 클릭 시 루트 페이지(‘/’)로 이동시켜주세요.
  “구경하러 가기" 클릭 시 (“/items”)페이지로 이동시켜주세요.(빈 페이지)

• PC사이즈만 고려해 주어진 디자인을 구현합니다.
  HTML, CSS 파일을 Netlify로 배포해 주세요.

• “Privacy Policy”, “FAQ”는 클릭 시 각각 아래 페이지로 이동합니다
- Privacy 페이지(‘/privacy’) 
- FAQ 페이지(‘/faq’)

• 페이스북, 트위터, 유튜브, 인스타그램 아이콘은 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동 합니다.

심화

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

주요 변경사항

• https://hyunjipandamarket.netlify.app/

스크린샷

멘토에게

• 나름 열심히 실습도 하고 했는데,,, 막상 만들어보니까 제가 생각한 그림처럼 나오지 않네요ㅠㅠ 제일 어려웠던 부분은 일단 사이트 크기가 왜이렇게 크게 보이는건지 모르겠습니다😭 해결해보고 싶어서 몇 시간을 고민했는데도 Figma의 디자인과는 거리가 먼 사이트를 구현한 것 같습니다.. 생각했던 것 이상으로 갈 길이 멀게 느껴져서 멘토님의 도움이 너무너무 필요했습니다ㅠㅠ 어떤 부분이 가장 부족하다고 생각하시는지도 궁금해요..!
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[addiescode-sj]

현지님 수고하셨습니다! ㅎㅎ
전체적으로 꼼꼼하게 주석도 넣으시고 잘 작업해주신것같아요!
코드 상으로는 크리티컬하게 문제될만한게 안보여서, 바로 merge해드릴게요.
다만 외부 css를 연결할때 주의할점, background-image 속성 사용 등 꼭 참고해서 다음 미션 제출때 리팩터링해주시면 좋을것같아 코멘트 자세히 남겨드려봤습니다.

수고하셨어요~!!

[addiescode-sj]

멘토의 답변

나름 열심히 실습도 하고 했는데,,, 막상 만들어보니까 제가 생각한 그림처럼 나오지 않네요ㅠㅠ 제일 어려웠던 부분은 일단 사이트 크기가 왜이렇게 크게 보이는건지 모르겠습니다😭 해결해보고 싶어서 몇 시간을 고민했는데도 Figma의 디자인과는 거리가 먼 사이트를 구현한 것 같습니다.. 생각했던 것 이상으로 갈 길이 멀게 느껴져서 멘토님의 도움이 너무너무 필요했습니다ㅠㅠ 어떤 부분이 가장 부족하다고 생각하시는지도 궁금해요..!

네, 동작 확인해보니 figma와 다르게 작업하신 부분이 조금 보이긴하네요 :) ㅎㅎ
우선 하나하나 차근히 고쳐보시면될것같아요.
이미지의 경우, 찌그러지지않게 가로세로 고정 비율을 지키면서 figma와 동일하게 보여지게 만들고싶으면, 그리고 여러 반응형 시나리오에서 유연하게 적용해보고싶으면 (이번 미션은 반응형을 고려하지않아도되는데 반응형을 벌써 고려해보셨군요! 👏) 고정값을 사용하면서도 상대단위를 많이 활용해주는게 용이하겠죠? 예를 들어, 이미지의 크기가 데스크탑 기준으로 588px이고 데스크탑 ui가 현재 반응형 시나리오에서 가장 큰 브레이크포인트라면, 아무리 화면이 커진다해도 588px이상 커지지는 않는다는 뜻이니까 max-width: 588px을 이미지를 감싸고 있는 wrapper div에 적용해주고, 이미지는 항상 컨테이너를 꽉 채우게 만들어주면됩니다. figma에서 보여지는 간격, 이미지 고정 크기등을 이런식으로 바꿔보실래요?

@cindycho0423 이 코멘트도 참고해서 다음주 미션에서 리팩터링 진행해주시면 좋을것같아요 ~! :)