-
Notifications
You must be signed in to change notification settings - Fork 39
[김성주] Sprint1 #8
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
The head ref may contain hidden characters: "Basic-\uAE40\uC131\uC8FC"
Changes from 5 commits
0cae056
d8335a0
58266ef
98a048d
3f7c036
4d2ae15
b686638
b01aebf
054b6f3
e0d4e3f
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>판다마켓</title> | ||
|
|
||
| <link rel="icon" href="./images/favi.ico"> | ||
| <link rel="stylesheet" href="reset.css"> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="wrap"> | ||
| <header> | ||
| <nav class="nav-side-margin"> | ||
| <a href="./"> | ||
| <img class="logo" src="./images/logo.png" alt="판다마켓로고"> | ||
| </a> | ||
| <a class="login-btn" href="./login">로그인</a> | ||
| </nav> | ||
| </header> | ||
| <main> | ||
| <section class="main-img-area"> | ||
| <article class="main-img-wrap w1120"> | ||
|
||
| <div class="main-text"> | ||
| <h2>일상의 모든 물건을<br> 거래해 보세요</h2> | ||
| <a href="./items"> | ||
| <button type="button"> | ||
| <span> | ||
| 구경하러 가기 | ||
| </span> | ||
| </button> | ||
| </a> | ||
| </div> | ||
| <img class="main-img" src="./images/top_main.png" alt="판다마켓메인이미지"> | ||
| </article> | ||
| </section> | ||
| <section class="hot-item"> | ||
| <article class="contents"> | ||
| <img src="./images/hot_item.png" alt="핫아이템"> | ||
| <div class="hot-item-text"> | ||
| <span>Hot item</span> | ||
| <h2> | ||
| 인기 상품을<br> | ||
| 확인해 보세요 | ||
| </h2> | ||
| <p> | ||
| 가장 HOT한 중고거래 물품을 판다 마켓에서 확인해 보세요 | ||
| </p> | ||
| </div> | ||
| </article> | ||
| </section> | ||
| <section class="search"> | ||
| <article class="contents"> | ||
| <div class="search-text"> | ||
| <span>Search</span> | ||
| <h2> | ||
| 구매를 원하는<br> | ||
| 상품을 검색하세요 | ||
| </h2> | ||
| <p> | ||
| 구매하고 싶은 물품은 검색해서 쉽게 찾아보세요 | ||
| </p> | ||
| </div> | ||
| <img src="./images/search.png" alt="상품검색"> | ||
| </article> | ||
| </section> | ||
| <section class="register"> | ||
| <article class="contents"> | ||
| <img src="./images/register.png" alt="판매등록"> | ||
| <div class="register-text"> | ||
| <span>Register</span> | ||
| <h2> | ||
| 판매를 원하는<br> | ||
| 상품을 등록하세요 | ||
| </h2> | ||
| <p> | ||
| 어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요 | ||
| </p> | ||
| </div> | ||
| </article> | ||
| </section> | ||
| <section class="ad-banner "> | ||
| <div class="w1120"> | ||
| <div class="ad-text"> | ||
| 믿을 수 있는<br> | ||
| 판다마켓 중고 거래 | ||
| </div> | ||
| <img src="./images/bottom_banner.png" alt="판다마켓광고"> | ||
| </div> | ||
| </section> | ||
| </main> | ||
| <footer> | ||
| <div class="footer-content w1120"> | ||
| <span>©codeit - 2024</span> | ||
| <div> | ||
| <a href="./privacy">Privacy Policy</a> | ||
| <a href="./faq">FAQ</a> | ||
| </div> | ||
| <ul class="sns-list"> | ||
| <li><a target="_blank" href="https://www.facebook.com/?locale=ko_KR"><img src="./images/ic_facebook.png" alt="페이스북" /></a></li> | ||
| <li><a target="_blank" href="https://x.com/i/flow/login?input_flow_data=%7B%22requested_variant%22%3A%22eyJsYW5nIjoia28ifQ%3D%3D%22%7D"><img src="./images/ic_twitter.png" alt="트위터" /></a></li> | ||
| <li><a target="_blank" href="https://www.youtube.com/?hl=ko&gl=KR&app=desktop"><img src="./images/ic_youtube.png" alt="유튜브" /></a></li> | ||
| <li><a target="_blank" href="https://www.instagram.com/"><img src="./images/ic_instagram.png" alt="인스타그램" /></a></li> | ||
| </ul> | ||
| </div> | ||
| </footer> | ||
| </div> | ||
| </body> | ||
|
|
||
| </html> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| @charset "UTF-8"; | ||
|
|
||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 7번째 라인 및에 공백 한칸 넣어주세요! 포맷팅 신경써보면 좋겠네요 :) |
||
| li { | ||
| list-style: none; | ||
| } | ||
|
|
||
| img { | ||
| vertical-align: top; | ||
| } | ||
|
|
||
| a{ | ||
| text-decoration: none; | ||
| color:black | ||
| } | ||
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.
계층간의 위계가 잘 보이지 않는것 같아요. 이런식으로 리팩토링해보면 어떨까요?
nav__container, nav__logo, nav__button그러면 css를 작성할때도 이렇게 명확하고 직관적이게 작성하실수있을거예요!