[전수영] sprint3

[daonJeon]

요구사항

기본

• 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
• Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다
• Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
• 로그인/회원가입 페이지 Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
• 로그인/회원가입 페이지 Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
• 로그인/회원가입 페이지 Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.

심화

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

주요 변경사항

• sprint 2 수정사항 반영
• sprint 3 기본/심화 요건 작업

스크린샷

• 메인 (pc)
  

• 메인 (태블릿)
  

• 메인 (모바일)
  

멘토에게

• 메인 페이지, 태블릿이나 모바일에서 height 를 고정으로 할 때 어떤 수치를 사용하는 게 좋을지 확인 부탁드립니다.
  모바일 기기에서는 vh 를 사용해도 좋을 것 같았는데, 기기 높이가 너무 길어지는 경우에는 화면이 너무 길어지는 것 같아서,
  px 로 사용해야하는 건지 잘 모르겠어서 문의드립니다!

[dongqui]

수영님 이번 미션도 고생 많으셨습니다!

반응형을 점진적으로 잘 구현해 주셨네요! 👍 자바스크립트도 기대하겠습니다!!

메인 페이지, 태블릿이나 모바일에서 height 를 고정으로 할 때 어떤 수치를 사용하는 게 좋을지 확인 부탁드립니다.
모바일 기기에서는 vh 를 사용해도 좋을 것 같았는데, 기기 높이가 너무 길어지는 경우에는 화면이 너무 길어지는 것 같아서,
px 로 사용해야하는 건지 잘 모르겠어서 문의드립니다!
->
서비스 성격이나 디자인 의도에 따라 다를 수 있지만, 저는 웬만한 경우 max-height과 px로 합니다. 혹은 따로 높이를 정하지 않고 화면이 줄어들면서 줄어드는 내부 콘텐츠(이미지 등)의 크기에 맞게 자연스럽게 맞춰지도록 구현하는 편이에요.

%, vh를 사용하는 경우 결과를 예측 하기가 힘든 경우가 많습니다. 따라서 이런 상대 단위를 쓸 때는 정확한 비율이 주어질 때 쓰는 편입니다. 예를 들면 부모의 절반 정도의 크기일 때 50%를 주는 식으로요!
지금 padding-left: 8%로 이런 식으로 수치를 준 코드들이 보이는데, 저는 위의 이유로 그런 방식을 지양하는 편입니다. (그렇다고 틀린 거는 아니에요 🤣 )

추가로, 특히 vh, vw의 경우는 조심하셔야 합니다. vh, vw는 브라우저 창 크기를 나타내는 거라 스크롤이 있을 때와 없을 때 다른 요소에 영향을 줄 수 있고, 특히 모바일의 경우 주소창 까지 크기를 포함하기 때문에 주소창이 중간에 없어지면 UI가 틀어지는 경우도 있습니다.

어느정도로 유동적으로 구현 해야하는지가 피그마에 잘 안 나타날 때도 있습니다! 실무에서는 디자이너분과 의도에 대해 충분히 이야기할 수 있으니 너무 걱정하지 않으셔도 됩니다 :)

[dongqui]

og도 잘 넣어 주셨군요!! 👍

[dongqui]

점진적으로 반응형을 잘 적용해 주셔서 중복이 많이 없는 거 같네요! 👍

[dongqui]

패딩, 갭 같은 부분들도 마찬가지로 %로 주었을 때 애매해질 수 있습니다 :)

[dongqui]

font size, 색을 확인해 주세요!