Conversation
| @@ -0,0 +1,73 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
There was a problem hiding this comment.
<html lang="ko"> lang에 신경써주세요.
SEO, 접근성에 도움이 됩니다!
| <body> | ||
| <header> | ||
| <div class="header-container"> | ||
| <a href="/" class="logo"><img src="images/logo.svg" alt="판다마켓 로고"></a> |
| <img src="images/landing_02.svg" alt="판다마켓 랜딩 이미지"> | ||
| <div class="texts"> | ||
| <p class="tag">Search</p> | ||
| <h1>구매를 원하는<br>상품을 검색하세요</h1> |
There was a problem hiding this comment.
h tag 는 계층 구조로 사용하시는 것이 접근성에 좋습니다! h1은 페이지에 하나가 되어야합니다 :)
https://developer.mozilla.org/ko/docs/Web/HTML/Element/Heading_Elements#사용_일람
| <section class="land land-normal"> | ||
| <img src="images/landing_01.svg" alt="판다마켓 랜딩 이미지"> | ||
| <div class="texts"> | ||
| <p class="tag">Hot item</p> |
There was a problem hiding this comment.
P는 문단을 나타내기 위해 사용됩니다! 여기서는 부적절한 거 같네요!
| </section> | ||
| </main> | ||
| <footer> | ||
| <div><p style="color: #9CA3AF;">©codeit - 2024</p></div> |
There was a problem hiding this comment.
inline style은 일관성이 떨어지고 유지 보수에 좋지 않아 지양하시는 것이 좋습니다~! :)
| </section> | ||
| </main> | ||
| <footer> | ||
| <div><p style="color: #9CA3AF;">©codeit - 2024</p></div> |
There was a problem hiding this comment.
여기도 위와 마찬가지로 p tag는 부적절합니다!
| overflow-x: hidden; | ||
| } | ||
|
|
||
| header { |
There was a problem hiding this comment.
지금은 css 파일이 하나라 괜찮지만, 태그에 직접 스타일을 주게 되면 페이지 전체에 영향을 주기 때문에 지양하셔야합니다! 되도록 클래스를 이용해주세요~ :)
| <img src="images/landing_top.svg" alt="판다마켓 랜딩 이미지"> | ||
| <div class="texts"> | ||
| <h1 style="margin-bottom: 32px;">일상의 모든 물건을<br>거래해 보세요</h1> | ||
| <a href="/items" class="button">구경하러 가기</a> |
There was a problem hiding this comment.
해당 버튼은 다시 스타일 작성해보세요~!
피그마에서 제공하는 스타일이 늘 제대로 동작하지는 않습니다 :)
| width: 988px; | ||
| height: 444px; | ||
| margin: 138px 100%; | ||
| justify-content: space-between; |
There was a problem hiding this comment.
요소간에 간격을 확인해주세요! space-between은 부적절한 거 같네요!
요구사항
기본
1920px이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다.1920px보다 작아질 때, "판다마켓" 로고의 왼쪽 여백200px"로그인" 버튼의 오른쪽 여백200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다.cursor: pointer로 설정합니다.심화
주요 변경사항
스크린샷
멘토에게