[문주영] sprint1 #36
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,91 @@ | ||||||
| <!DOCTYPE html> | ||||||
| <html> | ||||||
|
Collaborator
There was a problem hiding this comment. ❗️ 수정요청 html lang 속성은 스크린리더, 검색 엔진등에게 해당 사이트가 어떤 언어 기반으로 작성되었는지 설명하는 속성입니다.
Suggested change
|
||||||
| <head> | ||||||
| <meta charset="UTF-8"> | ||||||
| <title>판다마켓</title> | ||||||
| <link rel="stylesheet" href="style.css"> | ||||||
| <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" /> | ||||||
| </head> | ||||||
| <body> | ||||||
| <header> | ||||||
| <div> | ||||||
| <a href="/"> | ||||||
| <img src="images/logo_lg.png"> | ||||||
|
Collaborator
There was a problem hiding this comment. 💊 제안
Suggested change
|
||||||
| </a> | ||||||
| <a class="login" href="/login">로그인</a> | ||||||
|
Collaborator
There was a problem hiding this comment. ❗️ 수정요청 /login의 의미는 root 폴더의 login으로 접근하라는 의미라서, 만약 login.html 파일이 root 파일에 위치해있고
Suggested change
|
||||||
| </div> | ||||||
| </header> | ||||||
| <section class="banner top"> | ||||||
| <div> | ||||||
| <div class="banner-explain"> | ||||||
| <h1>일상의 모든 물건을<br>거래해 보세요</h1> | ||||||
|
Collaborator
There was a problem hiding this comment. ❗️ 수정요청 h1 태그는 heading 1이라는 의미의 태그입니다. 이러한 h1~h6까지의 태그들은 시멘틱한 작성에 중요한 역할을 합니다. |
||||||
| <a href="/items">구경하러 가기</a> | ||||||
| </div> | ||||||
| <img src="images/Img_home_top.png"> | ||||||
| </div> | ||||||
| </section> | ||||||
| <main> | ||||||
| <article> | ||||||
| <div class="left"> | ||||||
| <img src="images/Img_home_01.png"> | ||||||
| <div class="article-text"> | ||||||
| <div class="article-top">Hot item</div> | ||||||
| <h1>인기 상품을<br>확인해 보세요</h1> | ||||||
| <div class="article-explain">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</div> | ||||||
| </div> | ||||||
| </div> | ||||||
| </article> | ||||||
| <article> | ||||||
| <div class="right"> | ||||||
|
Collaborator
There was a problem hiding this comment. 💊 제안 classname을 지으실때 위치에 대한 이름은 추천드리지 않습니다. |
||||||
| <img src="images/Img_home_02.png"> | ||||||
| <div class="article-text"> | ||||||
| <div class="article-top">Search</div> | ||||||
| <h1>구매를 원하는<br>상품을 검색하세요</h1> | ||||||
| <div class="article-explain">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</div> | ||||||
| </div> | ||||||
| </div> | ||||||
| </article> | ||||||
| <article> | ||||||
| <div class="left"> | ||||||
| <img src="images/Img_home_03.png"> | ||||||
| <div class="article-text"> | ||||||
| <div class="article-top">Register</div> | ||||||
| <h1>판매를 원하는<br>상품을 등록하세요</h1> | ||||||
| <div class="article-explain">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</div> | ||||||
| </div> | ||||||
| </div> | ||||||
| </article> | ||||||
| </main> | ||||||
| <section class="banner bottom"> | ||||||
| <div> | ||||||
| <div class="banner-explain"> | ||||||
| <h1>믿을 수 있는<br>판다마켓 중고 거래</h1> | ||||||
| </div> | ||||||
| <img src="images/Img_home_bottom.png"> | ||||||
| </div> | ||||||
| </section> | ||||||
| <footer> | ||||||
| <div> | ||||||
| <div class="footer-copyright">@codeit - 2024</div> | ||||||
| <div class="footer-link"> | ||||||
| <a href="/privacy">Privacy Policy</a> | ||||||
| <a href="/faq">FAQ</a> | ||||||
| </div> | ||||||
| <ul class="footer-sns"> | ||||||
| <li> | ||||||
| <a href="https://www.facebook.com" target="_blank"><img src="images/ic_facebook.svg"></a> | ||||||
| </li> | ||||||
| <li> | ||||||
| <a href="https://twitter.com" target="_blank"><img src="images/ic_twitter.svg"></a> | ||||||
| </li> | ||||||
| <li> | ||||||
| <a href="https://www.youtube.com" target="_blank"><img src="images/ic_youtube.svg"></a> | ||||||
| </li> | ||||||
| <li> | ||||||
| <a href="https://www.instagram.com" target="_blank"><img src="images/ic_instagram.svg"></a> | ||||||
| </li> | ||||||
| </ul> | ||||||
| </div> | ||||||
| </footer> | ||||||
| </body> | ||||||
| </html> | ||||||
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,195 @@ | ||||||
| * { | ||||||
| box-sizing: border-box; | ||||||
| } | ||||||
|
|
||||||
| html { | ||||||
| font-family: Pretendard; | ||||||
| } | ||||||
|
|
||||||
| body { | ||||||
| margin: 0; | ||||||
| } | ||||||
|
|
||||||
| a { | ||||||
| text-decoration: none; | ||||||
| cursor: pointer; | ||||||
| } | ||||||
|
Comment on lines
+1
to
+16
Collaborator
There was a problem hiding this comment. 💊 제안 간략한 reset css 속성들이라 따로 분리하지 않으시고 한 파일에 작성하셨나봐요~ |
||||||
|
|
||||||
| h1 { | ||||||
| display: block; | ||||||
| margin: 0; | ||||||
| color: #374151; | ||||||
| font-size: 40px; | ||||||
| font-weight: 700; | ||||||
| line-height: 140%; | ||||||
| } | ||||||
|
Comment on lines
+18
to
+25
Collaborator
There was a problem hiding this comment. 💊 제안 |
||||||
|
|
||||||
|
|
||||||
| header { | ||||||
| height: 70px; | ||||||
| background-color: #FFFFFF; | ||||||
| border-bottom: 1px solid #dfdfdf; | ||||||
| padding: 0 200px; | ||||||
| justify-content: center; | ||||||
| align-content: center; | ||||||
| } | ||||||
|
|
||||||
| header div { | ||||||
| max-width: 1120px; | ||||||
| margin: 0 auto; | ||||||
| display: flex; | ||||||
| justify-content: space-between; | ||||||
| align-items: center; | ||||||
| } | ||||||
|
|
||||||
| header img { | ||||||
| height: 51px; | ||||||
| } | ||||||
|
|
||||||
| header .login { | ||||||
| width: 128px; | ||||||
| height: 48px; | ||||||
| border-radius: 8px; | ||||||
| background-color: #3692FF; | ||||||
| color: #F3F4F6; | ||||||
| font-size: 16px; | ||||||
| font-weight: 600; | ||||||
| text-align: center; | ||||||
| align-content: center; | ||||||
| } | ||||||
|
|
||||||
|
|
||||||
| .banner { | ||||||
| height: 540px; | ||||||
| background-color: #CFE5FF; | ||||||
| align-content: end; | ||||||
| } | ||||||
|
|
||||||
| .banner.bottom { | ||||||
| margin-top: 138px; | ||||||
| } | ||||||
|
|
||||||
| .banner > div { | ||||||
| width: 1110px; | ||||||
| margin: 0 auto; | ||||||
| display: flex; | ||||||
| justify-content: space-between; | ||||||
| align-items: center; | ||||||
| } | ||||||
|
|
||||||
| .banner .banner-explain { | ||||||
| margin-bottom: 60px; | ||||||
| } | ||||||
|
|
||||||
| .banner a { | ||||||
| width: 357px; | ||||||
| height: 56px; | ||||||
| margin-top: 32px; | ||||||
| border-radius: 40px; | ||||||
| background-color: #3692FF; | ||||||
| color: #F9FAFB; | ||||||
| font-size: 20px; | ||||||
| font-weight: 600; | ||||||
| text-align: center; | ||||||
| align-content: center; | ||||||
| display: block; | ||||||
| } | ||||||
|
|
||||||
| .banner img { | ||||||
| width: 746px; | ||||||
| } | ||||||
|
|
||||||
|
|
||||||
|
Comment on lines
+101
to
+102
Collaborator
There was a problem hiding this comment. 💊 제안 |
||||||
| main { | ||||||
| background-color: #FFFFFF; | ||||||
| } | ||||||
|
|
||||||
| article { | ||||||
| height: 720px; | ||||||
| align-content: center; | ||||||
| } | ||||||
|
|
||||||
| article > div { | ||||||
| display: flex; | ||||||
| gap: 64px; | ||||||
| justify-content: center; | ||||||
| align-items: center; | ||||||
| } | ||||||
|
|
||||||
| .article-top { | ||||||
| color: #3692FF; | ||||||
| margin-bottom: 12px; | ||||||
| font-size: 18px; | ||||||
| font-weight: 700; | ||||||
| } | ||||||
|
|
||||||
| .article-explain { | ||||||
| color: #374151; | ||||||
| margin-top: 24px; | ||||||
| font-size: 24px; | ||||||
| font-weight: 500; | ||||||
| line-height: 133.33%; | ||||||
|
Collaborator
There was a problem hiding this comment. 💊 제안 해당 값이 어디서 나온 것인지 모르겠지만, 소수점 단위의 사용은 의도를 파악하기 어려울 수 있어 추천하지 않습니다.
Suggested change
|
||||||
| } | ||||||
|
|
||||||
| article img { | ||||||
| height: 444px; | ||||||
| } | ||||||
|
|
||||||
| article .right { | ||||||
| flex-direction: row-reverse; | ||||||
| } | ||||||
|
|
||||||
| article .right .article-text { | ||||||
| text-align: right; | ||||||
| } | ||||||
|
|
||||||
|
|
||||||
| footer { | ||||||
| height: 160px; | ||||||
| padding-top: 32px; | ||||||
| background-color: #111827; | ||||||
| font-size: 16px; | ||||||
| font-weight: 400; | ||||||
| text-align: center; | ||||||
| } | ||||||
|
|
||||||
| footer > div { | ||||||
| width: 1120px; | ||||||
| margin: 0 auto; | ||||||
| display: flex; | ||||||
| justify-content: space-between; | ||||||
| } | ||||||
|
|
||||||
| .footer-copyright { | ||||||
| color: #9CA3AF; | ||||||
| } | ||||||
|
|
||||||
| .footer-link { | ||||||
| display: flex; | ||||||
| gap: 30px; | ||||||
| justify-content: center; | ||||||
| } | ||||||
|
|
||||||
| .footer-link a { | ||||||
| color: #E5E7EB; | ||||||
| } | ||||||
|
|
||||||
| .footer-sns { | ||||||
| margin: 0; | ||||||
| padding: 0; | ||||||
| gap: 12px; | ||||||
| list-style: none; | ||||||
| } | ||||||
|
|
||||||
| .footer-sns > li { | ||||||
| margin-left: 12px; | ||||||
| display: inline-block; | ||||||
| } | ||||||
|
|
||||||
| .footer-sns :first-child { | ||||||
| margin: 0; | ||||||
| } | ||||||
|
|
||||||
| .footer-sns img { | ||||||
| height: 20px; | ||||||
| } | ||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💊 제안
한 레포안에서는 동일한 룰을 따르는 것이 좋습니다.
따라서 img_home_01.png와 같은 식으로 같은 네이밍 룰을 따르시는 것을 추천드려요~