[양예지] Sprint1 #3
There are no files selected for viewing
Binary file not shown.
Empty file.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file.
Empty file.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| <html lang="ko"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>판다마켓</title> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Poppins:wght@400;700&display=swap" rel="stylesheet"> | ||
| <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css" /> | ||
| <link rel="stylesheet" href="style.css"> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <div class="content"> | ||
|
Collaborator
There was a problem hiding this comment. 불필요한 div 중첩이 보이네요! .content에 공통적으로 적용할 스타일 규칙이 따로 있는게 아니라면 + 충분히 다른 선택자를 사용해 요소에 대한 구분이 가능하다면 따로 만들어서 관리해주실필요는 없습니다 :) |
||
| <a href="/"> | ||
| <img class="logo" src="./svg/logo.svg"> | ||
| </a> | ||
| <a class="btn-s-48 blue-01" href="login.html">로그인</a> | ||
| </div> | ||
| </header> | ||
| <main> | ||
| <div class="banner-top"> | ||
|
Collaborator
There was a problem hiding this comment. main 아래에서도 바로 div로 영역 구분을 하기보다는 section과 같은 시맨틱 태그를 사용해볼까요?
Collaborator
There was a problem hiding this comment.
|
||
| <div class="content"> | ||
| <div class="text"> | ||
| <p>일상의 모든 물건을<br>거래해 보세요</p> | ||
| <a class="btn-l blue-01" href="items.html">구경하러 가기</a> | ||
| </div> | ||
| <img src="./img/home_top.png"> | ||
|
Collaborator
There was a problem hiding this comment. 귀찮더라도 img태그에는 꼭 alt를 사용해주세요! :) 레퍼런스로 애플 공식 웹사이트에 가서 alt텍스트를 어떻게 사용했는지 참고해보시면: <img src="/kr/macbook-air/images/overview/design/design_hero_static__e56c1v71mr6u_large.jpg" onload="__lp(event)" alt="열려있는 MacBook Air 13 및 15의 모습. 한 대에는 디자인 작업을 진행 중인 화면이, 다른 한 대에는 이메일과 스프레드시트를 넘나들며 멀티태스킹을 하는 화면이 표시되어 있습니다">이런식으로 alt 속성에 이미지 설명을 위해 구체적이고 명확한 설명을 제공하는 모습을 확인해보실 수 있습니다 :) |
||
| </div> | ||
| </div> | ||
| <div class="main-section"> | ||
| <div class="content"> | ||
| <img src="./img/home_01.png"> | ||
| <div class="text"> | ||
| <p class="sub-s">Hot item</p> | ||
| <p class="sub-l"> | ||
| 인기 상품을<br>확인해 보세요 | ||
| </p> | ||
| <p class="ex"> | ||
| 가장 HOT한 중고거래 물품을<br> | ||
| 판다 마켓에서 확인해 보세요 | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="main-section"> | ||
| <div class="content"> | ||
| <div class="text right"> | ||
| <p class="sub-s">Search</p> | ||
| <p class="sub-l"> | ||
| 구매를 원하는<br>상품을 검색하세요 | ||
| </p> | ||
| <p class="ex"> | ||
| 구매하고 싶은 물품은 검색해서<br> | ||
| 쉽게 찾아보세요 | ||
| </p> | ||
| </div> | ||
| <img src="./img/home_02.png"> | ||
| </div> | ||
| </div> | ||
| <div class="main-section"> | ||
| <div class="content"> | ||
| <img src="./img/home_03.png"> | ||
| <div class="text"> | ||
| <p class="sub-s">Register</p> | ||
| <p class="sub-l"> | ||
| 판매를 원하는<br>상품을 등록하세요 | ||
| </p> | ||
| <p class="ex"> | ||
| 어떤 물건이든 판매하고 싶은 상품을<br> | ||
| 쉽게 등록하세요 | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="banner-top"> | ||
| <div class="content"> | ||
| <div class="text"> | ||
| <p>믿을 수 있는<br>판다마켓 중고 거래</p> | ||
| </div> | ||
| <img src="./img/home_bottom.png"> | ||
| </div> | ||
| </div> | ||
| </main> | ||
| <footer> | ||
| <div class="content"> | ||
| <p class="sign">©codeit - 2024</p> | ||
| <p class="notice"> | ||
| <span><a href="privacy.html">Privacy Policy</a></span> | ||
| <span><a href="faq.html">FAQ</a></span> | ||
| </p> | ||
| <div class="sns"> | ||
| <a href="https://www.facebook.com/" target="_blank"><img src="./svg/ic_facebook.svg"></a> | ||
| <a href="https://x.com/" target="_blank"><img src="./svg/ic_twitter.svg"></a> | ||
| <a href="https://www.youtube.com/" target="_blank"><img src="./svg/ic_youtube.svg"></a> | ||
| <a href="https://www.instagram.com/" target="_blank"><img src="./svg/ic_instagram.svg"></a> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
| </body> | ||
Empty file.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,234 @@ | ||
| * { | ||
| font-family: 'Pretendard', 'Noto Sans KR', sans-serifs; | ||
| } | ||
|
|
||
| body { | ||
| margin: 0; | ||
| } | ||
|
|
||
| p { | ||
| margin: 0; | ||
| } | ||
|
|
||
| a { | ||
| text-decoration: none; | ||
| } | ||
|
|
||
|
Comment on lines
+1
to
+16
Collaborator
There was a problem hiding this comment. 사용 목적별로 파일을 분리해서 사용해보시는건 어떨까요?
이렇게 스타일 초기화 목적의 코드는 따로 파일을 분리해서 필요할때 재사용하게되면 코드 중복도 줄일수있어서 좋겠죠? :) |
||
| /* 배경색 */ | ||
|
|
||
| .blue-01 { | ||
|
Collaborator
There was a problem hiding this comment. 다음부터는 클래스이름만 봐도 어떤 용도/목적인지 명확히 구분되게끔 신경써서 작업해봐요! :) |
||
| background-color: #3692ff; | ||
| color: #fff; | ||
| } | ||
|
|
||
| .blue-01:hover { | ||
| background-color: #1967D6; | ||
| } | ||
|
|
||
| .blue-02 { | ||
| background-color: #1967D6; | ||
| color: #fff; | ||
| } | ||
|
|
||
| .blue-02:hover { | ||
| background-color: #1251AA; | ||
| } | ||
|
|
||
| .blue-03 { | ||
| background-color: #1251AA; | ||
| color: #fff; | ||
| } | ||
|
|
||
| .blue-03:hover { | ||
| background-color: #3692ff; | ||
| } | ||
|
|
||
| .gray { | ||
| background-color: #9CA3AF; | ||
| color: #fff; | ||
| } | ||
|
|
||
|
|
||
| /* 버튼 */ | ||
|
|
||
| .btn-l { | ||
| padding: 16px 124px; | ||
| border-radius: 40px; | ||
| font-size: 20px; | ||
| font-weight: 600; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .btn-m { | ||
| padding: 12px 71px; | ||
| border-radius: 40px; | ||
| font-size: 18px; | ||
| font-weight: 600; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .btn-s { | ||
| padding: 12px 23px; | ||
| border-radius: 8px; | ||
| font-size: 16px; | ||
| font-weight: 600; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .btn-s-48 { | ||
| border-radius: 8px; | ||
| font-size: 16px; | ||
| font-weight: 600; | ||
| line-height: 48px; | ||
| height: 48px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| /* 본문 */ | ||
|
|
||
| main { | ||
| background-color: #FCFCFC; | ||
| } | ||
|
|
||
| header { | ||
| width: 100%; | ||
| padding: 9px 0; | ||
| } | ||
|
|
||
| header .content { | ||
| width: 1120px; | ||
| margin: 0 200px; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| } | ||
|
|
||
| header .content img { | ||
| width: 153px; | ||
| } | ||
|
|
||
| header .content .btn-s-48 { | ||
| width: 128px; | ||
| } | ||
|
|
||
| main { | ||
| width: 100%; | ||
| background-color: #FCFCFC; | ||
| } | ||
|
|
||
| .banner-top { | ||
| margin: 0; | ||
| background-color: #CFE5FF; | ||
| height: 540px; | ||
| display: flex; | ||
| align-items: flex-end; | ||
| } | ||
|
|
||
| .banner-top .content { | ||
| width: 1110px; | ||
| margin: 0 auto; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .banner-top .content .text { | ||
| font-size: 40px; | ||
| line-height: 140%; | ||
| font-weight: 700; | ||
| color: #374151; | ||
| padding-bottom: 60px; | ||
| } | ||
|
|
||
| .banner-top .content img { | ||
| width: 746px; | ||
| } | ||
|
|
||
| .banner-top .content .text p { | ||
| margin-bottom: 32px; | ||
| } | ||
|
|
||
| .main-section { | ||
| margin: 0; | ||
| padding: 138px 0; | ||
| } | ||
|
|
||
| main .main-section:last-child { | ||
| margin-bottom: 138px; | ||
| } | ||
|
|
||
| .main-section .content { | ||
| margin: 0 auto; | ||
| width: 988px; | ||
| display: flex; | ||
| justify-content: space-around; | ||
| align-items: center; | ||
| background-color: #FCFCFC; | ||
| } | ||
|
|
||
| .main-section .content img { | ||
| width: 579px; | ||
| } | ||
|
|
||
| .main-section .content .right { | ||
| text-align: right; | ||
| } | ||
|
|
||
| .main-section .content .text .sub-s { | ||
| font-size: 18px; | ||
| font-weight: 700; | ||
| line-height: 26px; | ||
| color: #3692ff; | ||
| margin-bottom: 12px; | ||
| } | ||
|
|
||
| .main-section .content .text .sub-l { | ||
| font-size: 40px; | ||
| font-weight: 700; | ||
| line-height: 140%; | ||
| color: #374151; | ||
| margin-bottom: 24px; | ||
| } | ||
|
|
||
| .main-section .content .text .ex { | ||
| font-size: 24px; | ||
| font-weight: 500; | ||
| line-height: 32px; | ||
| color: #374151; | ||
| } | ||
|
|
||
| footer { | ||
| width: 100%; | ||
| padding-top: 32px; | ||
| background-color: #111827; | ||
| height: 160px; | ||
| } | ||
|
|
||
| footer .content { | ||
| width: 1120px; | ||
| margin: 0 auto; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| font-size: 16px; | ||
| } | ||
|
|
||
| footer .content .sign { | ||
| color: #9CA3AF; | ||
| } | ||
|
|
||
| footer .content .notice span a{ | ||
| color: #fff; | ||
| } | ||
|
Comment on lines
+220
to
+222
Collaborator
There was a problem hiding this comment. a 다음에 띄어쓰기 한칸 해주세요! 포맷팅이 어긋나면 작업 퀄리티가 상대적으로 많이 떨어져보여서 포맷팅을 일정하게 잘 지켜주시는 습관을 초반에 들여보시는것도 좋은 공부가 될 것 같네요 :) 들여쓰기도 4칸씩 되어있는데, 2칸 정도만 들여쓰기하셔도 충분합니다! :) |
||
|
|
||
| footer .content .notice span:first-child { | ||
| margin-right: 30px; | ||
| } | ||
|
|
||
| footer .content .sns { | ||
| width: 20px; | ||
| margin-left: 12px; | ||
| display: flex; | ||
| justify-content: flex-end; | ||
| column-gap: 12px; | ||
| } | ||
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
header보다는 nav가 더 적절한 태그가 될 것 같네요!