Conversation
There was a problem hiding this comment.
승원님 이번 미션도 잘 마무리 하셨네요 👍
반응형 구현 자체는 대체로 잘 하셨는데, 미디어 쿼리에 중복 코드가 너무 많습니다. 해당 부분을 정리하시고 이미지 비율도 잘 확인해보시면 좋을 거 같아요 :)
반응형을 만들기 위해서 media를 사용하게 되면 한개의 css 파일이 너무 길어지게 되는데 이렇게 길어지게 될 경우, 파일을 여러개로 나누어도 되나요? 나누게 되면 어떤 식으로 나누면 되나요?
-> 나중에는 컴포넌트 단위로 css파일을 만들게 되어 자연스럽게 나눠집니다. 근데 일단 미디어 쿼리에 중복되는 스타일이 너무 많습니다!! 중복부터 일단은 다 제거해도 엄청나게 줄어들 거 같습니다..!
랜딩 페이지의 경우, safari에서 develop 창을 통해서 ios 시뮬레이터를 사용하여 아이패드 미니로 실행을 시켰을 때 전반적으로 사진의 비율이 이상하게 나오는데 왜 그런건지 모르겠습니다. 아이패드 미니만 제외하면 다른 아이패드를 포함한 모든 기기에서 css에서 작성한대로 잘 나오는데 원인을 모르겠습니다.
-> 이미지 전부를 확인 해보지는 못했습니다만, 태블릿 크기에서 이미지에 height이 들어가 비율이 안 맞는 문제가 보였습니다 🤔
실제 이미지 크기와 렌더링되고 있는 img 크기의 비율이 잘 맞는지 확인해주세요.
그리고 시뮬레이터의 경우 추가 디버깅이 더 필요할 수 있습니다! 우선은 시뮬레이터 말고 브라우저 크기만 조절해보시는 게 좋을 거 같습니다 :)
| <span class="Search-title">구매를 원하는 <br> 상품을 검색하세요</span> <br> | ||
| <span class="Search-description"> | ||
| <div> | ||
| <p class="search">Search</p> |
There was a problem hiding this comment.
p는 문단을 나타냅니다!
h tag나 span 태그를 고려해보시는 게 좀 더 나을 거 같네요 🤔
| </div> | ||
| </div> | ||
| </main> | ||
|
|
||
| <footer> | ||
| <div class="foot"> | ||
| <p> | ||
| <p class="foot-start"> |
There was a problem hiding this comment.
전반적으로 p tag가 남용되고 있는 거 같습니다~!
| @@ -19,19 +19,19 @@ | |||
|
|
|||
|
|
|||
| <form action="#"> | |||
| <p>이메일</p> | |||
| <label for="email">이메일</label> | |||
| } | ||
|
|
||
| @media (max-width: 767px) { | ||
| main { |
There was a problem hiding this comment.
미디어 쿼리 사용하실 때 수정이 필요한 스타일만 넣어주시면 됩니다.
예를 들어 main은 화면 크기에 상관 없이 같은 스타일이라면 따로 더 작성해주지 않으셔도 됩니다! 767px 이하일 때 바껴야 하는 스타일만 작성해주세요!
|
|
||
| .landingpage-image01 img { | ||
| width: 100%; | ||
| height: 204px; |
There was a problem hiding this comment.
일단 제일 먼저 보여지는 랜딩페이지 이미지만 봤을 때는 높낮이 비율이 안 맞습니다!
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게