Conversation
There was a problem hiding this comment.
PNG -> SVG로 바꾸셨네요. 잘 하셨습니다. 👍
| <link rel="stylesheet" href="style.css"> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" |
There was a problem hiding this comment.
�외부 CDN에 올려져 있는 파일을 직접 가져오셔도 되지만, 이 경우 해당 CDN에 문제가 생겼을 때 대응이 어렵습니다!
가능하면 직접 가져오셔서 사용해 주세요~!
| <p>일상의 모든 물건을</p> | ||
| <p>거래해 보세요</p> |
There was a problem hiding this comment.
Paragraph 요소는 문단 구분을 위해 사용하는데요. 일상의 모든 물건을 거래해 보세요는 하나의 문단으로 보여지네요.
공백 문자열을 넣고 white-space 속성으로 줄바꿈 처리를 하시거나, 정 어려우시다면<br/>을 사용하시는 걸 권장드립니다.
| <div class="card-text even"> | ||
| <h1 class="card-header">Search</h1> | ||
| <h2 class="card-title">구매를 원하는<br>상품을 검색하세요</h2> | ||
| <h3 class="card-explain">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</h3> |
There was a problem hiding this comment.
Heading은 제목 요소에 해당하는 요소입니다. 모든 요소를 heading으로 처리하실 필요는 없어요!
해당 영역 내에서 제목에 해당되는 요소만 적용하시고, 나머지는 <p>, <span> 등을 사용하셔도 됩니다.
There was a problem hiding this comment.
파일을 분기점으로 나누시면, import 순서에 따라 스타일 적용이 의도하지 않게 적용될 수도 있을 것 같네요. (그리고 관리 차원에서도 어려워 보이고요.)
|
전반적으로 잘 해주셨습니다. 👍 다만 반응형 디버깅 시 모바일 디바이스에 필요한 메타 정보가 누락되어 있어 올바르게 그려지지 않는데요. |
요구사항
기본
브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다.
Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.
심화
주요 변경사항
스크린샷
태블릿 랜딩페이지
모바일 랜딩페이지
모바일 로그인페이지
멘토에게