[김가영] Sprint1 #34
There are no files selected for viewing
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.
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.
This file contains 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,82 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <link rel="stylesheet" href="mission_1.css"> | ||
| <title>판다마켓</title> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <a href="https://panda-market-sprint.netlify.app/"> | ||
|
There was a problem hiding this comment. 링크 클릭영역이 불필요하게 많이 잡히고 있네요! 로고부분만 클릭되도록 작업하면 좋을 것 같습니다. |
||
| <img class="logo" src="Group 19.png"> | ||
|
There was a problem hiding this comment. img를 사용하실 때는 width, height 값을 추가해주어야 합니다. There was a problem hiding this comment. img 태그의 alt 속성에는 의미 있는 텍스트를 넣어주세요! |
||
| </a> | ||
| <div class="login"> | ||
| <a href="/login" class="login_click">로그인</a> | ||
| </div> | ||
| </header> | ||
| <main> | ||
| <div class="main_section"> | ||
|
There was a problem hiding this comment. vscode의 확장프로그램으로 prettier를 설치하셔서 포멧팅을 적용하시면 저장만 해도 구조를 정리해줘서 편리하답니다~! |
||
| <div class="left"> | ||
| <h2>일상의 모든 물건을<br> | ||
| 거래해 보세요 | ||
| </h2> | ||
| <div class="gotosee"> | ||
| <a href="/items" class="gotosee_click">구경하러 가기</a> | ||
| </div> | ||
| </div> | ||
| <img class="panda" src="Img_home_top.png"> | ||
| </div> | ||
| </main> | ||
| <div class="container_box"> | ||
| <div class="container"> | ||
| <div class="section"> | ||
| <img class="section_image" src="Img_home_01.png"> | ||
| <div class="description"> | ||
| <div class="article1">Hot item</div> | ||
|
There was a problem hiding this comment. 텍스트들을 모두 div로 사용하기보다는 strong, em 등 좀 더 의미 있는 태그를 사용하면 좋을 것 같아요! |
||
| <div class="article2">인기상품을 <br> 확인해보세요</div> | ||
|
There was a problem hiding this comment. 1,2,3라는 네이밍보다는 label, title, description 과 같은 의미가 들어간 클래스명이 더 좋을 것 같습니다~! |
||
| <div class="article3">가장 HOT한 중고거래 물품을<br> 판다 마켓에서 확인해보세요</div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="section_reverse"> | ||
| <img class="section_image" src="Img_home_02-1.png"> | ||
| <div class="second_description"> | ||
| <div class="article1">Search</div> | ||
| <div class="article2_reverse">구매를 원하는<br>상품을 검색하세요</div> | ||
| <div class="article3_reverse">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="section"> | ||
| <img class="section_image" src="Img_home_03.png"> | ||
| <div class="description"> | ||
| <div class="article1">Register</div> | ||
| <div class="article2">판매를 원하는<br>상품을 등록하세요</div> | ||
| <div class="article3">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="section_last"> | ||
| <div class="section_last_rectangle"> | ||
| <h2>믿을 수 있는 <br>판다마켓 중고거래</h2> | ||
| <img class="section_home" src="Img_home_bottom.png"> | ||
| </div> | ||
| </div> | ||
| <footer> | ||
| <div class="footer_section"> | ||
| <div class="codeit">©codeit - 2024</div> | ||
| <div class="PF"> | ||
| <a href="/privacy" id="Privacy">Privacy Policy</a> | ||
| <a href="/faq" id="FAQ">FAQ</a> | ||
| </div> | ||
| <div class="icon"> | ||
| <a href="https://www.facebook.com/" id="facebook" target="_balnk"><img src="ic_facebook.png"></a> | ||
|
There was a problem hiding this comment. sns링크의 클릭 영역이 제대로 잡혀있지 않네요! 수정해보시겠어요?! |
||
| <a href="https://www.twitter.com/" id="twitter" target="_balnk"><img src="ic_twitter.png"></a> | ||
| <a href="https://www.youtube.com/" id="youtube" target="_balnk"><img src="ic_youtube.png"></a> | ||
| <a href="https://www.instagram.com/" id="insta" target="_balnk"><img src="ic_instagram.png"></a> | ||
|
There was a problem hiding this comment. 멘토링 시간에 말씀드린 것처럼 alt 속성으로 어떤 아이콘인지 적혀있으면 좋을 것 같습니다. |
||
| </div> | ||
| </div> | ||
| </footer> | ||
| </body> | ||
| </html> | ||
This file contains 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,262 @@ | ||||||
| *{ | ||||||
| box-sizing: border-box; | ||||||
| margin:0; | ||||||
| padding:0; | ||||||
| } | ||||||
| header{ | ||||||
| width: 1920px; | ||||||
| height: 70px; | ||||||
| padding: 10px 200px 9px 200px; | ||||||
| gap: 0px; | ||||||
|
There was a problem hiding this comment. 0px인 경우 단위를 생략할 수 있답니다!
Suggested change
|
||||||
| border: 0px 0px 1px 0px; | ||||||
|
|
||||||
| opacity: 0px; | ||||||
| background: #FFFFFF; | ||||||
|
There was a problem hiding this comment. 축약형으로 작성 가능한 값은 축약형으로 작성해주세요~!
Suggested change
|
||||||
| border-bottom: 1px solid #DFDFDF; | ||||||
| display: flex; | ||||||
| flex-direction: row; | ||||||
|
There was a problem hiding this comment. flex-direction은 기본 값이 row이기 때문에 column인 경우에만 작성해주시면 돼요~! |
||||||
| justify-content: space-between; | ||||||
| } | ||||||
| .logo{ | ||||||
| margin: auto; | ||||||
| cursor: pointer; | ||||||
| } | ||||||
| .login{ | ||||||
| width: Fixed (128px)px; | ||||||
|
|
||||||
| height: Fixed (48px)px; | ||||||
| top: 127px; | ||||||
| left: 538px; | ||||||
| padding: 12px 20px 12px 20px; | ||||||
|
There was a problem hiding this comment. 상하 값이 같고 좌우 값이 같으면 아래와 같이 축약형으로 작성할 수 있답니다~!
Suggested change
|
||||||
| gap: 10px; | ||||||
| border-radius: 8px; | ||||||
| opacity: 0px; | ||||||
|
There was a problem hiding this comment. opacity의 단위는 px이 아니랍니다! mdn을 참고해서 올바른 값으로 사용해주세요~! 그리고 여기서는 opacity가 불필요해보입니다. |
||||||
| background: #3692FF; | ||||||
|
|
||||||
| margin:auto; | ||||||
| cursor: pointer; | ||||||
| } | ||||||
| .login_click{ | ||||||
| color: #FFFFFF; | ||||||
| } | ||||||
| main{ | ||||||
|
|
||||||
| background: #CFE5FF; | ||||||
| } | ||||||
| .main_section{ | ||||||
| width: 1920px; | ||||||
| height: 540px; | ||||||
| gap: 0px; | ||||||
| opacity: 0px; | ||||||
| background: #CFE5FF; | ||||||
| display:flex; | ||||||
| flex-direction: row; | ||||||
| justify-content: center; | ||||||
| align-items: center; | ||||||
| position: relative; | ||||||
| } | ||||||
| .left{ | ||||||
| display: flex; | ||||||
| flex-direction: column; | ||||||
| top: 170px; | ||||||
| left: 360px; | ||||||
| gap: 32px; | ||||||
| position: absolute; | ||||||
|
There was a problem hiding this comment. 이렇게 위치를 absolute로 고정하게 되면 반응형으로 작업하는데 어려움이 있답니다! |
||||||
| } | ||||||
| h2{ | ||||||
| color: #374151; | ||||||
| font-family: Pretendard; | ||||||
| font-size: 40px; | ||||||
| font-weight: 700; | ||||||
| line-height: 56px; | ||||||
| text-align: left; | ||||||
| } | ||||||
| .gotosee{ | ||||||
| width: Hug (357px)px; | ||||||
| height: Hug (56px)px; | ||||||
| top: 127px; | ||||||
| left: 103px; | ||||||
| padding: 16px 124px 16px 124px; | ||||||
| gap: 10px; | ||||||
| border-radius: 40px; | ||||||
| opacity: 0px; | ||||||
| background: #3692FF; | ||||||
|
|
||||||
| cursor: pointer; | ||||||
| } | ||||||
| .gotosee_click{ | ||||||
| color:#ffffff; | ||||||
| } | ||||||
| .panda{ | ||||||
| left: 701px; | ||||||
| bottom:0px; | ||||||
| padding-left: 30px; | ||||||
| position: absolute; | ||||||
| } | ||||||
| .container_box{ | ||||||
| width: 1920px; | ||||||
| height:2160px; | ||||||
| text-align: center; | ||||||
| } | ||||||
| .container{ | ||||||
| width: 1200px; | ||||||
| height: 2160px; | ||||||
|
There was a problem hiding this comment. height를 고정값으로 주게 되면 콘텐츠가 가변적인 경우에 레이아우싱 깨지게 됩니다~! 높이는 콘텐츠 양에 따라 자연스럽게 변하도록 제거해주세요! There was a problem hiding this comment. 각 섹션의 간격은 .section에 margin-top 같은 속성으로 간격을 지정하면 될 것 같아요. |
||||||
| top: 610px; | ||||||
| left: 360px; | ||||||
| gap: 0px; | ||||||
| border: 1px; | ||||||
| display:grid; | ||||||
| grid-template-rows: repeat(3,1fr); | ||||||
| margin:auto; | ||||||
| } | ||||||
| .section{ | ||||||
| display: flex; | ||||||
| align-items: center; | ||||||
| gap:64px; | ||||||
| } | ||||||
| .description{ | ||||||
| display:flex; | ||||||
| flex-direction: column; | ||||||
| align-items: flex-start; | ||||||
| gap:12px; | ||||||
| } | ||||||
| .section_image{ | ||||||
| width: 588px; | ||||||
| height: 444px; | ||||||
| } | ||||||
| .article1{ | ||||||
| color: #3692FF; | ||||||
| font-family: Pretendard; | ||||||
| font-size: 18px; | ||||||
| font-weight: 700; | ||||||
| line-height: 25.2px; | ||||||
| text-align: left; | ||||||
| } | ||||||
| .article2{ | ||||||
| font-family: Pretendard; | ||||||
| font-size: 40px; | ||||||
| font-weight: 700; | ||||||
| line-height: 56px; | ||||||
| letter-spacing: 0.02em; | ||||||
| text-align: left; | ||||||
| color: #374151; | ||||||
| } | ||||||
| .article3{ | ||||||
| font-family: Pretendard; | ||||||
| font-size: 24px; | ||||||
| font-weight: 500; | ||||||
| line-height: 28.8px; | ||||||
| letter-spacing: 0.08em; | ||||||
| text-align: left; | ||||||
| color: #374151; | ||||||
| margin-top:24px; | ||||||
| } | ||||||
| .section_reverse{ | ||||||
| display: flex; | ||||||
| flex-direction: row-reverse; | ||||||
| align-items: center; | ||||||
| gap:64px; | ||||||
| } | ||||||
| .second_description{ | ||||||
| display:flex; | ||||||
| flex-direction: column; | ||||||
| align-items: flex-end; | ||||||
| gap:12px; | ||||||
|
There was a problem hiding this comment. gap은 column-gap과 row-gap 의 축약형이랍니다. 필요한 gap 속성만 사용해주세요! |
||||||
| } | ||||||
| .article2_reverse{ | ||||||
| font-family: Pretendard; | ||||||
| font-size: 40px; | ||||||
| font-weight: 700; | ||||||
|
There was a problem hiding this comment. strong태그를 사용했다면 굳이 font-weight:700을 줄 필요가 없겠죠?! |
||||||
| line-height: 56px; | ||||||
| letter-spacing: 0.02em; | ||||||
| text-align: right; | ||||||
| color: #374151; | ||||||
| } | ||||||
| .article3_reverse{ | ||||||
| font-family: Pretendard; | ||||||
|
There was a problem hiding this comment. Pretendard 같은 웹 폰트를 사용한다면 폴백용 폰트를 추가해주는 것이 좋습니다. 가장 기본적인 폰트가 sans-serif 체 이기 때문에 아래와 같이 Pretendard를 로드하지 못했을 때를 대비해서 작성해주시는 것 이 좋아요.
Suggested change
|
||||||
| font-size: 24px; | ||||||
| font-weight: 500; | ||||||
| line-height: 28.8px; | ||||||
| letter-spacing: 0.08em; | ||||||
| text-align: right; | ||||||
| color: #374151; | ||||||
| margin-top:24px; | ||||||
| } | ||||||
| .section_last{ | ||||||
|
|
||||||
| background: #CFE5FF; | ||||||
| } | ||||||
| .section_last_rectangle{ | ||||||
| width: 1920px; | ||||||
| height: 540px; | ||||||
| top: 2908px; | ||||||
| gap: 0px; | ||||||
| opacity: 0px; | ||||||
| background: #CFE5FF; | ||||||
| display:flex; | ||||||
| justify-content: center; | ||||||
| align-items: center; | ||||||
| } | ||||||
| footer{ | ||||||
| width: 1920px; | ||||||
| height: 160px; | ||||||
| top: 3448px; | ||||||
| padding: 32px 200px 32px 200px; | ||||||
| gap: 10px; | ||||||
| opacity: 0px; | ||||||
| background: #111827; | ||||||
| } | ||||||
| .footer_section{ | ||||||
| width:1520px; | ||||||
| height:20px; | ||||||
| display:flex; | ||||||
| justify-content: space-between; | ||||||
| } | ||||||
| .codeit{ | ||||||
| font-family: Pretendard; | ||||||
| font-size: 16px; | ||||||
| font-weight: 400; | ||||||
| line-height: 19.09px; | ||||||
| text-align: center; | ||||||
| color: #9CA3AF; | ||||||
| } | ||||||
| .PF{ | ||||||
|
|
||||||
| display:flex; | ||||||
| gap:30px; | ||||||
| } | ||||||
| #Privacy, #FAQ{ | ||||||
|
There was a problem hiding this comment. 스타일은 클래스를 사용해서만 작업해주세요~! |
||||||
| font-family: Pretendard; | ||||||
| font-size: 16px; | ||||||
| font-weight: 400; | ||||||
| line-height: 19.09px; | ||||||
| text-align: center; | ||||||
| color: #E5E7EB; | ||||||
| cursor: pointer; | ||||||
| } | ||||||
| .icon{ | ||||||
| display:flex; | ||||||
| width: 116px; | ||||||
| height: 20px; | ||||||
| padding: 1.85px 2px 1.15px 1px; | ||||||
| gap: 12px; | ||||||
| opacity: 0px; | ||||||
| cursor: pointer; | ||||||
| } | ||||||
| @media(min-width:1920px){ | ||||||
| main{ | ||||||
| margin:auto; | ||||||
| } | ||||||
| .section_last{ | ||||||
| margin:auto; | ||||||
| } | ||||||
| } | ||||||
| @media(max-width:1920px){ | ||||||
| .logo{ | ||||||
| margin-left:200px; | ||||||
| } | ||||||
| .login{ | ||||||
| margin-right:200px; | ||||||
| } | ||||||
| header{ | ||||||
| flex : 1 0 auto; | ||||||
| } | ||||||
| } | ||||||
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.
html에는 문서의 언어를 알 수 있도록 lang 속성이 있답니다~! 확인후 적절한 lang 속성을 추가해주세요!