Conversation
| @@ -0,0 +1,133 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
There was a problem hiding this comment.
현재 사용자가 보는 문서의 언어는 ko로 지정하시는게 적절할 것 같습니다!
| <h1 class="name"> | ||
| <a href="https://10-sprintmission1.netlify.app/">판다마켓</a> | ||
| </h1> |
There was a problem hiding this comment.
h1, a 태그 적절하게 사용하셨네요. 잘 하셨습니다. 👍
| <div class="title"> | ||
| <img src="panda.png"> | ||
| <h1 class="name"> | ||
| <a href="https://10-sprintmission1.netlify.app/">판다마켓</a> |
There was a problem hiding this comment.
배포 도메인을 직접 기재하시면 개발 단계에서는 다소 확인이 어려울 수 있습니다~!
현 시점에서는 상대 경로로 넣어주시는게 좋을 것 같네요. :)
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="empty_space"></div> |
There was a problem hiding this comment.
빈 공간을 별도로 생성하신 이유가 있을까요?
| <h1> | ||
| 인기 상품을<br> | ||
| 확인해 보세요 | ||
| </h1> | ||
| <h2> | ||
| 가장 HOT한 중고거래 물품을<br> | ||
| 판다 마켓에서 확인해 보세요 | ||
| </h2> |
There was a problem hiding this comment.
heading 태그는 해당 영역의 제목을 나타냅니다. 제목 이외의 요소는 상황에 맞게 <p/>, <span/>, <div/> 등을 사용하셔서 나타내시면 될 것 같습니다.
| </h2> | ||
| </div> | ||
| </div> | ||
| <img class="img" src="2.png"> |
There was a problem hiding this comment.
아마 피그마에서 export한 이미지를 그대로 사용하셔서 2.png와 같은 명칭을 사용 중이시겠지만,
네임 스페이스 중복을 막으면서도 어떤 요소인지 명확하게 드러나도록 수정하셔서 사용하시는게 좋을 것 같습니다. :)
| <a href="https://www.facebook.com/" target="_blank"><img src="ic_facebook.png" class="icon"></a> | ||
| <a href="https://www.twitter.com/" target="_blank"><img src="ic_twitter.png" class="icon"></a> | ||
| <a href="https://www.youtube.com/" target="_blank"><img src="ic_youtube.png" class="icon"></a> | ||
| <a href="https://www.instagram.com/" target="_blank"><img src="ic_instagram.png" class="icon"></a> |
There was a problem hiding this comment.
이미지만 있는 요소는 alt 속성으로 이미지가 불러오지 않았거나, 화면을 볼 수 없는 스크린 리더 사용자들이 읽을 수 있도록 텍스트 콘텐츠를 함께 제공해주시면 더 좋습니다. :)
| } | ||
|
|
||
| body { | ||
| width: 1920px; |
There was a problem hiding this comment.
고정 너비로 1920px을 넣으시면 반응형 대응이 안됩니다! 참고해 주세요.
| h1 { | ||
| font-weight: 700; | ||
| font-size: 40px; | ||
| line-height: 56px; | ||
| } | ||
|
|
||
| h2 { | ||
| font-weight: 500; | ||
| font-size: 24px; | ||
| color: #374151; | ||
| } | ||
|
|
||
| h3 { | ||
| font-size: 16px; | ||
| font-weight: 400; | ||
| color: #e5e7e8; | ||
| } |
There was a problem hiding this comment.
style.css를 홈 랜딩 화면에서만 사용하시면 태그 단위로 지정하셔도 되지만,
추후에 공통으로 사용하시는 경우 다른 화면에도 영향을 줄 수 있습니다.
가급적이면 서비스 전반적으로 해당 요소의 공통 스타일인 경우가 아니면 태그 단위로 스타일 적용하는 방식은 지양해 주세요. :)
(ex. 크로스 브라우징을 위해 요소의 스타일을 동일하게 초기화하는 CSS)
| .part3 .information > div { | ||
| width: 159px; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
| .headimage, .footimage { | ||
| width: 746px; | ||
| height: 340px; | ||
| } |
There was a problem hiding this comment.
다양한 CSS Selector 사용해보시는 것 너무 좋네요. 👍
| border-radius: 40px; | ||
| background-color: #3682ff; | ||
| color: white; | ||
| padding: 16px 120px; /*124px로 하면 마지막 글자가 자꾸 내려가요 */ |
There was a problem hiding this comment.
해당 요소의 박스 너비가 357px로 고정되어 있고, 좌우 여백이 124px이어서 그렇습니다.
박스 내에 콘텐츠가 그려질 수 있는 영역은 357 - 124 * 2 밖에 안되서 컨텐츠 너비를 초과한 요소에 줄바꿈이 적용되시는 것 같네요.
| position: absolute; | ||
| top: 138px; | ||
| left: 360px; |
There was a problem hiding this comment.
position: absolute를 사용하신 이유가 있을까요?
| height: 20px; | ||
| } | ||
|
|
||
| .icons { |
There was a problem hiding this comment.
아이템을 가지는 리스트 요소에 고정 너비를 주시면, 아이템이 추가 또는 제거되었을 때 너비 스타일까지 같이 조정해주셔야 합니다.
이 경우에는 flex layout은 유지하되, 아이템 간에 마진을 주어서 간격 처리를 하시는게 나을 것 같네요.
|
첫 번째 위클리 과제 고생 많으셨습니다! 반응형 작업도 함께 진행해보시면 좋을 것 같네요. 👍 |
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게