[박연희] sprint3

[pyeonh8]

요구사항

기본

공통

• 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.

랜딩 페이지

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

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

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

심화

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

주요 변경사항

• 피드백 반영

멘토에게

• 같은 문자가 5개 반복되는 컬러코드의 경우 이렇게 축약형으로 쓸 수도 있다고 하셨는데 축약형으로 쓸 수 있다면 축약형으로 쓰는 편이 나을까요?
• img 속성에 srcset와 sizes를 쓰면 반응형 이미지를 사용할 수 있다고 저번에 피드백에서 말씀해주셔서 적용을 했었는데... 적용하고 보니까 srcset는 창 크기를 바꿀 때마다 즉각적으로 다시 이미지를 고르는 기능이 없다고 하더라고요. 그래서 더 찾아보니 picture의 태그를 사용하면 미디어쿼리 기반으로 사용할 수 있다길래 사용해봤는데... 이것을 사용해도 문제가 없을까요?

[addiescode-sj]

수고하셨습니다!

주요 리뷰 포인트

• 브레이크 포인트 사용 관련 피드백
• 반응형 이미지 리소스 최적화

[addiescode-sj]

Suggested change

	.fl{float: left}
	.fl { float: left }

포맷팅 조금만 더 신경써볼까요?

[addiescode-sj]

max-width만 단독으로 쓰는것보다는 width: 100% 를 함께 써주시는게 좀더 명시적이고 디자인 의도에 맞아보이는데요!

max-width: 400px만 단독으로 사용하는 경우:
요소의 최대 너비를 400px로 제한하지만,

max-width: 400px; width: 100%를 함께 사용하는 경우:
width: 100%는 부모 요소의 전체 너비를 차지하도록 강제하고,
max-width: 400px는 400px를 넘지 않도록 제한하다보니
부모 요소의 전체 너비를 차지하되, 그 크기를 최대 400px까지 제한하게됩니다.

디자인 의도에 따라 이런 조합을 사용하시면 좋다고 팁을 드린거니까 참고해보세요! :)

[addiescode-sj]

flex의 order 속성을 사용해서 배치 순서를 바꾸셨군요! 굳굳 👍

[addiescode-sj]

다만, 브레이크포인트(분기점) 숫자가 조금 애매한 화면 사이즈인것같은데
타블렛(768px) 이하는 모바일 기준으로 삼고, 기본 스타일은 모바일 기준으로 일관되게 작성해보시는건 어떨까요?

[addiescode-sj]

해당 파일의 용도는 기본 스타일을 초기화하는 목적으로만 (e.g input태그의 border 스타일 없애기) 맞춰서 사용하시면 좋을것같아요.

전역에서 쓰이는 스타일을 처리하기위한 목적이라면 reset.css가 아닌 common.css에서 정의해두시는게 좋겠죠?

[addiescode-sj]

picture태그를 사용하지않고도 화면 크기에 대응하는 이미지 옵션을 제공하고 현재 뷰포트 크기에 가장 적합한 이미지를 선택하게끔 만들 수 있습니다. 아래 코드처럼 바꿔볼까요?

Suggested change

	<picture>
	<source media="(min-width: 767px)" srcset="images/img_logo.png">
	<img class="header__logo-img" src="images/img_logo_m.png" alt="판다마켓" width="153" height="51">
	</picture>
	<img class="header__logo-img"
	src="images/img_logo_m.png"
	srcset="images/img_logo_m.png 153w, images/img_logo.png 198w"
	sizes="(max-width: 767px) 153px, 198px"
	alt="판다마켓" />

[addiescode-sj]

질문에 대한 답변

멘토에게

• 같은 문자가 5개 반복되는 컬러코드의 경우 이렇게 축약형으로 쓸 수도 있다고 하셨는데 축약형으로 쓸 수 있다면 축약형으로 쓰는 편이 나을까요?
• img 속성에 srcset와 sizes를 쓰면 반응형 이미지를 사용할 수 있다고 저번에 피드백에서 말씀해주셔서 적용을 했었는데... 적용하고 보니까 srcset는 창 크기를 바꿀 때마다 즉각적으로 다시 이미지를 고르는 기능이 없다고 하더라고요. 그래서 더 찾아보니 picture의 태그를 사용하면 미디어쿼리 기반으로 사용할 수 있다길래 사용해봤는데... 이것을 사용해도 문제가 없을까요?

네, 축약형으로 쓰면 코드가 더 간결해보이겠죠?
img의 srcset과 sizes만 사용하더라도 창 크기가 바뀌면 즉각적으로 가장 적합한 이미지를 선택하게 만들 수 있어요.
오히려 picture태그를 사용하게되면 미디어쿼리 조건평가 등 불필요한 오버헤드를 발생시킬 수 있어서 이 방법을 더 권장드립니다. 본문 내에 상세히 피드백 드렸습니다 :)