[이나경] sprint3 #125
[이나경] sprint3 #125
Conversation
dongqui
left a comment
dongqui
left a comment
There was a problem hiding this comment.
css 경험은 많았는데 미디어 쿼리를 제대로 해본 건 처음이라 이렇게 하는게 맞는지 잘 모르겠네요 ㅠㅠ 생각보다 처음에 html 구조를 복잡하게 여러번 래핑해서 짜놔서 많이 바꾼 것 같습니다. 불필요하거나 중복된 부분 혹은 더 추가했으면 하는 부분 있으면 말씀해주시면 감사하겠습니다 !!
-> 군더더기 없이 깔끔하게 잘 하셨는데요!? 🤣 디자인 시안만 조금 더 꼼꼼하게 봐주시면 좋을 거 같습니다 :)
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <meta name="description" content="일상의 모든 물건을 거래해보세요" /> | ||
| <meta property="og:title" content="판다 마켓" /> |
| <span class="highlight__keyword">Search</span> | ||
| <p class="highlight__title align-right"> | ||
| 구매를 원하는<br />상품을 검색하세요 | ||
| <p class="highlight__title"> |
There was a problem hiding this comment.
여기도 반응형 폰트 크기를 확인해 주세요~! :)
| <div class="highlight__content"> | ||
| <span class="highlight__keyword">Hot item</span> | ||
| <p class="highlight__title">인기 상품을<br />확인해 보세요</p> | ||
| <p class="highlight__title"> |
| display: none; | ||
| } | ||
|
|
||
| .footer { |
There was a problem hiding this comment.
좌우 픽셀이 너무 많이 들어갔습니다! 디자인 시안을 다시 확인해 주세요 :)
| } | ||
|
|
||
| /* 태블릿 + 모바일 */ | ||
| @media (max-width: 1199px) { |
There was a problem hiding this comment.
이렇게 따로 구분 하셔도 되긴 하지만..
아래있는 /* 태블릿 */ 미디어 쿼리와 합쳐도 좋을 거 같아요 :)
데스크탑 -> 태블릿 -> 모바일 혹은
모바일 -> 태블릿 -> 데스크탑 이런식으로 점진적으로 반응형을 수정하면 좀 더 수월합니다!
| cursor: pointer; | ||
| } | ||
|
|
||
| @media (max-width: 767px) { |
There was a problem hiding this comment.
모바일일 때 내부 폰트 사이즈가 다릅니다 :) 디자인 시안을 확인해 주세요~!
| padding: 52px 15px; | ||
| } | ||
|
|
||
| .highlight:nth-child(3) .highlight__container { |
There was a problem hiding this comment.
태블릿과 중복이네요~ 위 말씀드린 것처럼 점진적으로 바뀌는 부분만 처리하시면 조금 더 중복 찾기가 좋을 거에요 :)
2 participants
요구사항
기본
공통
랜딩 페이지
로그인, 회원가입 페이지 공통
심화
/) 공유 시 좌측 예시와 같은 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정해 주세요.주소와 이미지는 자유롭게 설정하세요.
주요 변경사항
스크린샷
멘토에게