sprint-mission-1

index.html

@@ -16,12 +16,11 @@
     <nav>
       <a class="logo" href="/"
         ><img
-          src="Img_logo.png"
+          src="./image/Img_logo.png"
           alt="판다마켓 로고 이미지"
           width="153px"
           height="51px"
       /></a>
-      <div class="spacer"></div>
       <a class="login-btn" href="/login">로그인</a>
     </nav>
 
@@ -32,74 +31,79 @@ <h1 class="title">일상의 모든 물건을<br />거래해 보세요</h1>
       </div>
       <img
         class="header-img"
-        src="Img_home_top.png"
+        src="./image/Img_home_top.png"
         alt="판다가 손을 흔드는 이미지"
         width="996px"
         height="447px"
       />
     </header>
 
     <main>
-      <section>
-        <img
-          src="Img_home_01.png"
-          alt="판다가 반팔티를 보고 있는 이미지"
-          width="588px"
-          height="444px"
-        />
-        <div class="section-content">
-          <p class="section-content-label">Hot item</p>
-          <h1 class="title">인기 상품을<br />확인해 보세요</h1>
-          <h2 class="description">
-            가장 HOT한 중고거래 물품을<br />판다 마켓에서 확인해 보세요
-          </h2>
-        </div>
-      </section>
+      <div class="container">
+        <section>
+          <img
+            class="section-img"
+            src="./image/Img_home_01.png"
+            alt="판다가 반팔티를 보고 있는 이미지"
+            width="588px"
+            height="444px"
+          />
+          <div class="section-content">
+            <p class="section-content-label">Hot item</p>
+            <h1 class="title">인기 상품을<br />확인해 보세요</h1>
+            <h2 class="section-content-description">
+              가장 HOT한 중고거래 물품을<br />판다 마켓에서 확인해 보세요
+            </h2>
+          </div>
+        </section>
 
-      <section>
-        <div class="section-content">
-          <p class="section-content-label">Search</p>
-          <h1 class="title">구매를 원하는<br />상품을 검색하세요</h1>
-          <h2 class="description">
-            구매하고 싶은 물품은 검색해서<br />쉽게 찾아보세요
-          </h2>
-        </div>
-        <img
-          src="Img_home_02.png"
-          alt="돋보기로 물음표를 보는 이미지"
-          width="588px"
-          height="444px"
-        />
-      </section>
+        <section>
+          <div class="section-content">
+            <p class="section-content-label">Search</p>
+            <h1 class="title">구매를 원하는<br />상품을 검색하세요</h1>
+            <h2 class="section-content-description">
+              구매하고 싶은 물품은 검색해서<br />쉽게 찾아보세요
+            </h2>
+          </div>
+          <img
+            class="section-img"
+            src="./image/Img_home_02.png"
+            alt="돋보기로 물음표를 보는 이미지"
+            width="588px"
+            height="444px"
+          />
+        </section>
 
-      <section>
-        <img
-          src="Img_home_03.png"
-          alt="상품 파일이 담긴 폴더를 고르는 이미지"
-          width="588px"
-          height="444px"
-        />
-        <div class="section-content">
-          <p class="section-content-label">Register</p>
-          <h1 class="title">판매를 원하는<br />상품을 등록하세요</h1>
-          <h2 class="description">
-            어떤 물건이든 판매하고 싶은 상품을<br />쉽게 등록하세요
-          </h2>
-        </div>
-      </section>
+        <section>
+          <img
+            class="section-img"
+            src="./image/Img_home_03.png"
+            alt="상품 파일이 담긴 폴더를 고르는 이미지"
+            width="588px"
+            height="444px"
+          />
+          <div class="section-content">
+            <p class="section-content-label">Register</p>
+            <h1 class="title">판매를 원하는<br />상품을 등록하세요</h1>
+            <h2 class="section-content-description">
+              어떤 물건이든 판매하고 싶은 상품을<br />쉽게 등록하세요
+            </h2>
+          </div>
+        </section>
+      </div>
     </main>
 
     <div class="banner">
       <div class="banner-content">
         <h1 class="title">믿을 수 있는<br />판다마켓 중고거래</h1>
-        <img
-          class="banner-img"
-          src="Img_home_bottom.png"
-          alt="판다가 평점을 남기는 이미지"
-          width="996px"
-          height="540px"
-        />
       </div>
+      <img
+        class="banner-img"
+        src="./image/Img_home_bottom.png"
+        alt="판다가 평점을 남기는 이미지"
+        width="996px"
+        height="540px"
+      />
     </div>
     <footer>
       <div class="footer-content">
@@ -110,23 +114,19 @@ <h1 class="title">믿을 수 있는<br />판다마켓 중고거래</h1>
         </div>
         <div class="footer-content-sns">
           <a href="https://www.youtube.com" target="_blank"
-            ><img src="ic_facebook.png" alt="facebook 아이콘"
+            ><img src="./icon/ic_facebook.png" alt="facebook 아이콘"
           /></a>
           <a href="https://www.twitter.com" target="_blank"
-            ><img src="ic_twitter.png" alt="twitter 아이콘"
+            ><img src="./icon/ic_twitter.png" alt="twitter 아이콘"
           /></a>
           <a href="https://www.youtube.com" target="_blank"
-            ><img src="ic_youtube.png" alt="youtube 아이콘"
+            ><img src="./icon/ic_youtube.png" alt="youtube 아이콘"
           /></a>
           <a href="https://www.instagram.com" target="_blank"
-            ><img src="ic_instagram.png" alt="instagram 아이콘"
+            ><img src="./icon/ic_instagram.png" alt="instagram 아이콘"
           /></a>
         </div>
       </div>
     </footer>
   </body>
 </html>
-
-<!-- 
-헤더/배너 글과 이미지 위치 어떻게?
--->

style.css

@@ -1,36 +1,47 @@
 * {
   box-sizing: border-box;
   margin: 0;
-  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto,
-    "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR",
-    "Malgun Gothic", sans-serif;
+  padding: 0;
+  font-family: Pretendard, sans-serif;
 }
 
 :root {
-  --main-color: #3692ff;
+  --blue: #3692ff;
+  --red: #f74747;
+  --gray900: #111827;
+  --gray800: #1f2937;
+  --gray700: #374151;
+  --gray600: #4b5563;
+  --gray500: #6b7280;
+  --gray400: #9ca3af;
+  --gray200: #e5e7eb;
+  --gray100: #f3f4f6;
+  --gray50: #f9fafb;
   --sub-color: #cfe5ff;
 }
 
 nav {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  width: 100%;
+  height: 70px;
+  background-color: #ffffff;
+  border-bottom: solid 1px #dfdfdf;
   padding-left: 200px;
   padding-right: 200px;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  position: fixed;
+  top: 0;
+  z-index: 1;
 }
 
 .logo {
-  margin: 10px auto 9px;
   cursor: pointer;
   flex-grow: 0;
 }
 
-.spacer {
-  width: 1200px;
-  margin: 0 auto;
-  flex-grow: 1;
-}
-
 .login-btn {
   width: 128px;
   height: 48px;
@@ -40,7 +51,7 @@ nav {
   color: var(--sub-color);
   text-decoration: none;
 
-  background-color: var(--main-color);
+  background-color: var(--blue);
   border-radius: 8px;
   padding: 14.5px 0;
   cursor: pointer;
@@ -50,29 +61,28 @@ nav {
 
 header {
   height: 540px;
+  margin-top: 70px;
   background-color: var(--sub-color);
   display: flex;
   justify-content: flex-start;
   align-items: center;
   position: relative;
-  flex-grow: 0;
 }
 
 .title {
-  color: #374151;
+  color: var(--gray700);
   font-weight: bold;
   font-size: 40px;
   line-height: 140%;
 }
 
-.header-content .title {
-  margin-bottom: 32px;
-}
-
 .header-content {
   width: 1200px;
   margin: 0 auto;
-  flex-grow: 0;
+}
+
+.header-content .title {
+  margin-bottom: 32px;
 }
 
 .header-btn {
@@ -85,20 +95,27 @@ header {
   padding: 16px 0;
   color: #ffffff;
   text-decoration: none;
-  background-color: var(--main-color);
+  background-color: var(--blue);
   border-radius: 40px;
   cursor: pointer;
 }
 
 .header-img {
   position: absolute;
-  top: 93px;
   right: 223px;
+  bottom: 0;
+  width: 52%;
+  height: auto;
 }
 
 main {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.container {
   width: 1200px;
-  margin: 0 auto;
 }
 
 section {
@@ -108,25 +125,31 @@ section {
   padding: 137.5px 0;
 }
 
+.section-img {
+  width: 50%;
+  height: auto;
+}
+
 .section-content {
   margin: 64px;
 }
 
 .section-content .title {
   letter-spacing: 2%;
   margin-bottom: 24px;
+  flex-shrink: 0;
 }
 
 .section-content-label {
-  color: var(--main-color);
+  color: var(--blue);
   font-size: 18px;
   font-weight: bold;
   line-height: 140%;
   margin-bottom: 12px;
 }
 
-.description {
-  color: #374151;
+.section-content-description {
+  color: var(--gray700);
   font-weight: 500;
   font-size: 24px;
   line-height: 120%;
@@ -153,21 +176,20 @@ main section:nth-child(even) {
 .banner-content {
   width: 1200px;
   margin: 0 auto;
-  flex-grow: 0;
 }
 
 .banner-img {
   position: absolute;
-  top: 0;
   right: 223px;
+  bottom: 0;
+  max-width: 52%;
+  height: auto;
 }
 
 footer {
   height: 160px;
   padding: 32px 200px 108px;
-  padding-left: 200px;
-  padding-right: 200px;
-  background-color: #111827;
+  background-color: var(--gray900);
 }
 
 .footer-content {
@@ -177,19 +199,23 @@ footer {
 }
 
 .footer-content-copyright {
-  color: #9ca3af;
+  color: var(--gray400);
   font-size: 16px;
+  flex-grow: 0;
+  flex-shrink: 0;
 }
 
 .footer-content-menu {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 30px;
+  flex-grow: 0;
+  flex-shrink: 0;
 }
 
 .footer-content-menu-link {
-  color: #e5e7eb;
+  color: var(--gray200);
   font-size: 16px;
   text-decoration: none;
   cursor: pointer;