[맹은빈]Sprint3

[evaain706]

요구사항

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

https://roaring-malasada-3ba365.netlify.app/

기본

• 브라우저에 현재 보이는 화면의 영역(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 랜딩 페이지(“/”) 공유 시 좌측 예시와 같은 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정해 주세요.
• 미리보기에서 제목은 “판다 마켓”, 설명은 “일상의 모든 물건을 거래해보세요”로 설정합니다.
• 주소와 이미지는 자유롭게 설정하세요.

스크린샷

멘토에게

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

[evaain706]

반응형을 적용하려다 보니 css코드가 너무 길어지는 문제가 있었습니다.

이런때에는 한페이지라도 섹션별로 나누어 css를 관리하는것이 더 맞는방법인지궁금합니다.

[GANGYIKIM]

은빈님 3번째 PR 제출 고생하셨습니다!
반응형 작업을 하시다보니 css 코드가 너무 길어지는 문제가 있다고 말씀해주셨는데
이와 관련해서 코멘트를 남겼으니 확인해보시면 좋겠습니다.
간단하게 말하자면 미디어 쿼리문 외부의 스타일들이 유지되는데 이러한 것들도 미디어 쿼리문 내부에서 중복 선언되고 있기 때문이니, 확인해보시고 중복을 줄이신다면
css 양이 굉장히 줄어들겁니다~
그런 다음에도 분리에 대해 고민해보시면 좋겠습니다.
또한 중복을 줄이시고 싶다면 로그인과 회원가입 페이지의 디자인이 유사하니 두 페이지에서 하나의 css 파일을 만드셔서 공용으로 쓰시는 것을 추천드립니다.

4번째 PR 제출도 화이팅입니다!

[GANGYIKIM]

❗️ 수정요청
이러한 og 설정이 제대로 되어 있는지 확인할 수 있는 방법이 여러가지 있습니다~
확인해보시고 meta 태그를 수정해보세요~

[GANGYIKIM]

💊 제안
rem은 루트의 폰트 사이즈가 변경될때 변경되야하는 수치들에 사용하시는 것이 좋아요~
지금 border-width 같은 경우 반응형으로 변경되는 값이 아니니, 이런경우 px를 사용하시는 것이 더 직관적이고 좋습니다.

또한 반응형 단위를 사용하실때 하나의 단위를 골라 그 단위만 사용할 필요는 없습니다!

[GANGYIKIM]

❗️ 수정요청
해당 부분은 PC 의 .header 클래스와 완전히 동일합니다~
1~266까지의 스타일들은 미디어 쿼리문 안에 작성된 것이 아니라서 모든 화면 사이즈에 적용됩니다.
따라서 지금의 스타일 블록은 불필요하게 중복된 것이므로 삭제하시는 것을 추천드려요!

Suggested change

	.header {
	width: 100%;
	height: 7rem;
	position: fixed;
	background-color: #ffffff;
	top: 0;
	}

반응형 작업을 하실때 신경쓰면 좋은 포인트는 PC를 작성하고 타블렛, 모바일을 작성할때 이러한 속성들이 잘 상속되서 중복되지 않게 적는 것입니다~

[GANGYIKIM]

💊 제안
min-width가 조건에 걸려있어 375px 미만으로 화면이 작아지게 되면 PC 스타일이 적용되네요~
body에 min-width: 375px를 추가하셔서 해당 사이즈 미만으로 작아지게 되면 가로 스크롤이 생기게 해주시거나
아니라면 min-width를 조건문에서 빼주시는 것을 추천드려요~

[GANGYIKIM]

💊 제안
해당 요소의 height 속성은 없는 것이 더 좋을 것 같습니다.
요소들은 height 속성을 정해주지 않으면 자연스럽게 내부 컨텐츠 높이를 높이로 가지게 됩니다.
heigth 속성을 정해주게되면 반응형 작업시 내부 요소가 자연스럽게 줄어들고 늘어나는것에 대응하기가 어렵습니다~
따라서 꼭 필요한 경우가 아니라면 빼주시는 것을 추천드립니다~

[GANGYIKIM]

❗️ 수정요청
선언되어있지 않은 css 변수라서 border와 background color가 나오지 않네요!
확인해보시고 디자인대로 나올 수 있게 수정해보세요~