[배민지] sprint1 #40
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| <!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="stylesheet" href="style.css"> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/pretendard.css" /> | ||
| </head> | ||
|
|
||
|
|
||
| <body> | ||
|
|
||
| <header> | ||
| <a href="/"> | ||
| <img class="title" src="Group 19.png"> | ||
| </a> | ||
|
|
||
|
|
||
|
||
| <a href="/login" class="goToLogin">로그인</a> | ||
| </header> | ||
|
|
||
|
|
||
| <div class="skyBlue"> | ||
|
||
| <div class="upAndDown"> | ||
|
||
| <div class="top"> | ||
| <div class="imgPlusWord"> | ||
|
Collaborator
There was a problem hiding this comment. 요런 네이밍도 디자인 변경에 따라 변경될 가능성이 보이고 의미가 명확하지않은것같아요!
Collaborator
Author
There was a problem hiding this comment. upAndDown도 highlightBoxContent로 변경해보았습니다 |
||
| <div class="words"> | ||
| <h1>일상의 모든 물건을<br>거래해 보세요</h1> | ||
| <a href="/items"> | ||
| <button>구경하러가기</button> | ||
| </a> | ||
|
|
||
| </div> | ||
| <img style="width: 746px;" src="Img_home_top.png" alt="판다가 반기는 이미지"> | ||
|
||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| <section> | ||
| <div class="imgPlusWord"> | ||
| <img src="Frame 2608833.png" alt="인기상품이미지"> | ||
|
||
|
|
||
| <div class="words"> | ||
| <div class="feature">Hot item</div> | ||
| <h1>인기 상품을<br>확인해 보세요</h1> | ||
| <p>가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</p> | ||
| </div> | ||
|
|
||
| </div> | ||
| </section> | ||
|
|
||
| <section> | ||
| <div class="imgPlusWord"> | ||
| <div class="words R"> | ||
|
||
| <div class="feature">Search</div> | ||
| <h1>구매를 원하는<br>상품을 검색해 보세요</h1> | ||
| <p>구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p> | ||
| </div> | ||
| <img class="bodyImg" src="Img_home_02.png" alt="검색이미지"> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section> | ||
| <div class="imgPlusWord"> | ||
|
|
||
|
||
| <img src="Img_home_03.png" alt="검색이미지"> | ||
|
|
||
| <div class="words"> | ||
| <div class="feature">Register</div> | ||
| <h1>판매를 원하는<br>상품을 등록하세요</h1> | ||
| <p>어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
|
|
||
| </section> | ||
|
|
||
|
|
||
| <div class="skyBlue"> | ||
| <div class="upAndDown"> | ||
| <div class="imgPlusWord"> | ||
| <h1>믿을 수 있는<br>판다마켓 중고 거래</h1> | ||
| <img src="Img_home_bottom.png" alt="판다가 대화하는 이미지"> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| <footer> | ||
| <div class="ffooter"> | ||
|
||
| ©codeit - 2024 | ||
| <div class="linkNearing"> | ||
| <a href="/privacy">Privacy Policy</a> | ||
| <a href="/faq">FAQ</a> | ||
| </div> | ||
|
|
||
| <div class="icons"> | ||
| <a href="https://www.facebook.com/?locale=ko_KR"> | ||
|
||
| <img src="face.png" alt="페이스북 아이콘"> | ||
| </a> | ||
| <a href="https://x.com/home?lang=ko"> | ||
| <img src="ic_twitter.png" alt="트위터 아이콘"> | ||
| </a> | ||
| <a href="https://www.youtube.com/"> | ||
| <img src="youyube.png" alt="유투브 아이콘"> | ||
| </a> | ||
| <a href="https://www.instagram.com/"> | ||
| <img src="Vector.png" alt="인스타 아이콘"> | ||
| </a> | ||
|
|
||
| </div> | ||
| </div> | ||
| </footer> | ||
|
|
||
| </body> | ||
| </html> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,189 @@ | ||
| *{ | ||
|
||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body{ | ||
| font-family: 'Pretendard', sans-serif; | ||
| color: #374151; | ||
|
Collaborator
There was a problem hiding this comment. 자주 사용되는 값들은 css 변수로 관리해서 재사용해주면 코드 중복이 줄어들겠죠? 예시) :root {
--primary-color: #3692FF;
--text-color: #374151;
--background-color: #ffffff;
--secondary-background: #FCFCFC;
--footer-background: #111827;
--footer-text: #9CA3AF;
--hero-background: #CFE5FF;
--container-width: 1920px;
--section-padding: 100px 0;
}
Collaborator
Author
There was a problem hiding this comment. 미션 2부터 적용해보겠습니다 ㅎㅎ |
||
| width: 100%; | ||
| margin: 0; | ||
| background-color: #ffffff | ||
| } | ||
|
|
||
| header{ | ||
| width: 100%; | ||
| max-width: 1920px; | ||
| height: 70px; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| padding: 0 1rem; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| img { | ||
| max-width: 100%; | ||
| height: auto; | ||
| } | ||
|
|
||
| .top{ | ||
|
Collaborator
There was a problem hiding this comment. 여기서도 .top 뒤에 공백 한칸 띄워주세요! 다음부터는 포맷팅 꼭 신경써봐요 :)
Collaborator
Author
There was a problem hiding this comment. CSS에서 클래스/태그와 대괄호 사이에 띄어쓰기를 추가했습니다 |
||
| margin-top: 57px; | ||
| } | ||
|
|
||
| .upAndDown{ | ||
| width: 1920px; | ||
| margin: 0 auto; | ||
| padding: 143px 405px 0; | ||
| } | ||
|
|
||
| .imgPlusWord{ | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 7px; | ||
| } | ||
|
|
||
| .words{ | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .R{ | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: flex-end; | ||
| text-align: right; | ||
| } | ||
|
|
||
| .title{ | ||
| margin: 0 200px; | ||
|
|
||
| } | ||
|
|
||
| .goToLogin{ | ||
| font-size: clamp(14px, 1.2vw, 16px); | ||
| font-weight: 600; | ||
| line-height: 26px; | ||
| margin: 0; | ||
| border: 1px solid #3692FF; | ||
| background-color: #3692FF; | ||
| border-radius: 8px; | ||
| color: #F9FAFB; | ||
| padding: 0.7rem 1.2rem; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
|
Comment on lines
+77
to
+79
Collaborator
There was a problem hiding this comment. 요렇게 자주 반복되는 스타일 블락들도 유틸리티 클래스로 만들어서 재사용해줄 수 있어요! 예시) .flex-center {
display: flex;
justify-content: center;
align-items: center;
}
Collaborator
Author
There was a problem hiding this comment. 이것도 미션 2부터 고려해서 적용해보겠습니다 |
||
| text-decoration: none; | ||
| } | ||
|
|
||
| button{ | ||
| border: 1px solid #3692FF; | ||
| background-color: #3692FF; | ||
| border-radius: 40px; | ||
| color: #F9FAFB; | ||
| padding: 16px 124px; | ||
| } | ||
|
|
||
| section{ | ||
| background-color: #FCFCFC; | ||
| width: 988px; | ||
| height: 444px; | ||
| margin: 100px auto; | ||
|
|
||
| } | ||
|
|
||
| .bodyImg{ | ||
| width: 579px; | ||
| height: 444px; | ||
| } | ||
|
|
||
| .feature{ | ||
| font-size: 18px; | ||
| font-weight: 700; | ||
| line-height: 26px; | ||
| color: #3692FF; | ||
| } | ||
|
|
||
| h1{ | ||
| font-size: 40px; | ||
| font-weight: 700; | ||
| line-height: 140%; | ||
| } | ||
|
|
||
| p{ | ||
| font-size: 24px; | ||
| font-weight: 500; | ||
| line-height: 32px; | ||
| } | ||
|
|
||
| .skyBlue{ | ||
| background-color: #CFE5FF; | ||
| width: 100%; | ||
| height: 540px; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
|
|
||
| footer{ | ||
| margin: 0 auto; | ||
| font-size: 16px; | ||
| font-weight: 400; | ||
| line-height: 100%; | ||
| height: 160px; | ||
| color: #9CA3AF; | ||
| background-color: #111827; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: flex-start; | ||
| padding: 32px 0; | ||
| } | ||
|
|
||
| .ffooter{ | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| width: 1920px; | ||
| margin: 0 auto; | ||
|
|
||
| } | ||
|
|
||
| a{ | ||
| text-decoration: none; | ||
| color: #9CA3AF; | ||
| } | ||
|
|
||
| .linkNearing{ | ||
| width: 159px; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| gap: 30px; | ||
| } | ||
|
|
||
| .icons{ | ||
| display: flex; | ||
| gap: 12px; | ||
| } | ||
|
|
||
| @media (max-width: 768px) { | ||
| .imgPlusWord { | ||
| flex-direction: column; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .R { | ||
| align-items: center; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .ffooter { | ||
| flex-direction: column; | ||
| align-items: center; | ||
| } | ||
|
|
||
| footer { | ||
| height: auto; | ||
| padding: 2rem; | ||
| } | ||
| } | ||
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.
접근성을 고려해
<a href="/" aria-label="홈으로 이동">과 같이 aria-label 혹은 role을 추가해볼까요?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.
모든 a태그에 적절히 적용하였습니다