[나예진] Sprint 3

[NaYejin94]

요구사항

• Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
• 피그마 디자인에 맞게 페이지를 만들어 주세요.
• React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.

기본

공통

• 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
  • PC: 1200px 이상
  • Tablet: 768px 이상 ~ 1199px 이하
  • Mobile: 375px 이상 ~ 767px 이하
  • 375px 미만 사이즈의 디자인은 고려하지 않습니다

랜딩 페이지

• Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록
  “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
• Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록
  “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
• 화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다.

로그인, 회원가입 페이지 공통

• Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
• Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
• Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.

심화

• 페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 Linkbrary 랜딩 페이지(“/”) 공유 시
  좌측 예시와 같은 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정해 주세요.
• 미리보기에서 제목은 “판다 마켓”, 설명은 “일상의 모든 물건을 거래해보세요”로 설정합니다.
• 주소와 이미지는 자유롭게 설정하세요.

주요 변경사항

• index.html 에 메타태그 설정
• resposive.css 에 반응형 디자인 적용

---

• 루트페이지 요소들을 gird에서 flex로 변경
• 공통된 디자인을 위한 root.css 추가

스크린샷

margin 16px

margin 24px

mobile

최대 너비 400px

미리보기

멘토에게

• 반응형 디자인을 할 때 min-width, max-width, 혼용하여 쓰는것, 3가지 중 어떤것을 쓰는게 권장되는 걸까요?

여기에사 원래는 줄바꿈을 하는 부분에 <br>을 썼는데 반응형 디자인을 하다보니 줄바꿈을 하면 어색한 부분이 생기더라구요...
그렇다고 기준이 되는 코드에서 <br>을 빼려고 하니 텍스트가 깔끔하게 나오지 않아서요..😢 이럴땐 어떻게 해야할까요?

• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[dongqui]

예진님 미션3도 잘 마무리 해주셨네요! 👍

대체로 잘 구현해 주셨고, 요구 사항을 조금 더 꼼꼼하게 봐주시면 더욱 좋을 거 같습니다 :)

반응형 디자인을 할 때 min-width, max-width, 혼용하여 쓰는것, 3가지 중 어떤것을 쓰는게 권장되는 걸까요?
->
어떻게 하셔도 크게 상관은 없는데, 서비스가 어떤 성격을 가지느냐 조금씩 달라질 수 있습니다 :)

예를 들어 모바일 화면이 더 중요하거나 복잡한 서비스라면 모바일 화면을 기본으로 잡고 이후에 점진적으로 큰 화면을 작업하시는 게 좀 더 수월합니다.(모바일 퍼스트 전략) 이런 경우라면 min-width를 사용하시는 것이 편하실 거에요 :)
반대로 데스크탑 퍼스트라면 max-width를 주로 사용하시게 되겠죠!
혼용하는 경우는 세밀한 적용이 필요한 경우에 쓰시면 좋구요 :)

여기에사 원래는 줄바꿈을 하는 부분에
을 썼는데 반응형 디자인을 하다보니 줄바꿈을 하면 어색한 부분이 생기더라구요...
그렇다고 기준이 되는 코드에서
을 빼려고 하니 텍스트가 깔끔하게 나오지 않아서요..😢 이럴땐 어떻게 해야할까요?
-> 반응형에 맞춰 <br>에 display 속성을 써보시는 것은 어떨까요!? 🤔

[dongqui]

vh의 경우 뷰포트 기준이라 화면에 따라 많이 달라질 수 있습니다~!

[dongqui]

og도 넣어주셨군요! 👍

[dongqui]

같은 목적의 코드를 모아두시려는 의도는 너무 좋습니다~! 👍
다만 다른 페이지의 소스를 한 곳에 담게 되어 페이지마다 불필요한 css를 다운 받게 됩니다 🤔

[dongqui]

요구 사항을 다시 확인해주세요~! :)

[dongqui]

radius가 안 들어가고 있네요 🤣

[dongqui]

margin: 0 auto; 

이렇게 표현할 수도 있습니다~!