From 38d65a1fd846af4737e48d17ab6ce0bcca8e44b3 Mon Sep 17 00:00:00 2001
From: leehj322 <gudwns8956@naver.com>
Date: Wed, 5 Jun 2024 15:58:25 +0900
Subject: [PATCH 01/10] refactor(mainpage): Reflect code review received

1. Change img file name
2. Add class on h3 and p tag
3. Add color variable (global.css)
---
 css/home.css                                      |  12 +++---------
 images/{Img_home_01.png => img_home_items.png}    | Bin
 images/{Img_home_03.png => img_home_register.png} | Bin
 images/{Img_home_02.png => img_home_search.png}   | Bin
 index.html                                        |  14 +++++++-------
 pages/login/index.html                            |   2 +-
 pages/login/signup.html                           |   2 +-
 7 files changed, 12 insertions(+), 18 deletions(-)
 rename images/{Img_home_01.png => img_home_items.png} (100%)
 rename images/{Img_home_03.png => img_home_register.png} (100%)
 rename images/{Img_home_02.png => img_home_search.png} (100%)

diff --git a/css/home.css b/css/home.css
index 92532a3d3..a30c8752c 100644
--- a/css/home.css
+++ b/css/home.css
@@ -21,9 +21,9 @@ header {
   cursor: pointer;
 }
 
-.main-top > div,
+.top-page,
 .main-page,
-.main-bottom > div {
+.bottom-page {
   width: 1200px;
   margin: 0 auto;
 }
@@ -41,19 +41,13 @@ header {
   padding: 138px 0;
 }
 
-p, h3 {
-  margin: 0;
-  padding: 0;
-}
-
 .content-block {
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
 
-.right-main .content-block h3,
-.right-main .content-block p {
+.right-text {
   text-align: right;
 }
 
diff --git a/images/Img_home_01.png b/images/img_home_items.png
similarity index 100%
rename from images/Img_home_01.png
rename to images/img_home_items.png
diff --git a/images/Img_home_03.png b/images/img_home_register.png
similarity index 100%
rename from images/Img_home_03.png
rename to images/img_home_register.png
diff --git a/images/Img_home_02.png b/images/img_home_search.png
similarity index 100%
rename from images/Img_home_02.png
rename to images/img_home_search.png
diff --git a/index.html b/index.html
index 07ac02d45..eb3e83edf 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,7 @@
       <div class="main-page1">
         <div class="main-page left-main">
           <div>
-            <img class="main-page-img" src="/images/img_home_01.png" alt="홈 이미지 1" />
+            <img class="main-page-img" src="/images/img_home_items.png" alt="홈 이미지 1" />
           </div>
           <div class="content-block">
             <h3>Hot item</h3>
@@ -49,7 +49,7 @@ <h3>Hot item</h3>
       <div class="main-page2">
         <div class="main-page right-main">
           <div>
-            <img class="main-page-img" src="/images/img_home_02.png" alt="홈 이미지 2" />
+            <img class="main-page-img" src="/images/img_home_search.png" alt="홈 이미지 2" />
           </div>
           <div class="content-block">
             <h3>Search</h3>
@@ -61,19 +61,19 @@ <h3>Search</h3>
       <div class="main-page3">
         <div class="main-page left-main">
           <div>
-            <img class="main-page-img" src="/images/Img_home_03.png" alt="홈 이미지 3" />
+            <img class="main-page-img" src="/images/img_home_register.png" alt="홈 이미지 3" />
           </div>
           <div class="content-block">
-            <h3>Register</h3>
-            <p class="main-content">판매를 원하는<br>상품을 등록하세요</p>
-            <p class="sub-content">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
+            <h3 class="right-text">Register</h3>
+            <p class="main-content right-text">판매를 원하는<br>상품을 등록하세요</p>
+            <p class="sub-content right-text">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
           </div>
         </div>
       </div>
       <div class="main-bottom">
         <div class="bottom-page">
           <p class="main-content">믿을 수 있는<br>판다마켓 중고거래</p>
-          <img class="bottom-img" src="/images/Img_home_bottom.png" alt="홈 페이지 하단 이미지" />
+          <img class="bottom-img" src="/images/img_home_bottom.png" alt="홈 페이지 하단 이미지" />
         </div>
       </div>
     </main>
diff --git a/pages/login/index.html b/pages/login/index.html
index adee05fe3..71f3a2084 100644
--- a/pages/login/index.html
+++ b/pages/login/index.html
@@ -17,7 +17,7 @@
   <body>
     <header>
       <div class="logo-block">
-        <a href="../index.html">
+        <a href="/">
           <img class="logo-image" src="/images/logo_with_typo.png" alt="로고 이미지"/>
         </a>
       </div>
diff --git a/pages/login/signup.html b/pages/login/signup.html
index f9e6f7267..2e9b973e2 100644
--- a/pages/login/signup.html
+++ b/pages/login/signup.html
@@ -17,7 +17,7 @@
   <body>
     <header>
       <div class="logo-block">
-        <a href="../index.html">
+        <a href="/">
           <img class="logo-image" src="/images/logo_with_typo.png" alt="로고 이미지"/>
         </a>
       </div>

From f4e6f308a04997702c21fb2e945d2904536dd632 Mon Sep 17 00:00:00 2001
From: leehj322 <gudwns8956@naver.com>
Date: Wed, 5 Jun 2024 21:21:26 +0900
Subject: [PATCH 02/10] refactor(mainpage): Implement responsive web on
 mainpage

---
 css/home.css | 581 +++++++++++++++++++++++++++++++++++++++++----------
 index.html   |  21 +-
 2 files changed, 478 insertions(+), 124 deletions(-)

diff --git a/css/home.css b/css/home.css
index a30c8752c..a198145af 100644
--- a/css/home.css
+++ b/css/home.css
@@ -1,7 +1,7 @@
 header {
   background-color: var(--gray-00);
+  height: 70px;
   display: flex;
-  padding: 10px 200px;
   justify-content: space-between;
   align-items: center;
   position: sticky;
@@ -9,94 +9,24 @@ header {
   z-index: 1;
 }
 
-.main-logo-block {
-  display: flex;
-  justify-content: center;
-}
-
-.main-logo {
-  display: inline-block;
-  width: 153px;
-  height: 51px;
-  cursor: pointer;
-}
-
-.top-page,
-.main-page,
-.bottom-page {
-  width: 1200px;
-  margin: 0 auto;
-}
-
-.main-page1,
-.main-page2,
-.main-page3 {
-  height: 720px;
-}
-
-.main-page {
-  display: flex;
-  gap: 64px;
-  margin-top: 138;
-  padding: 138px 0;
-}
-
-.content-block {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.right-text {
-  text-align: right;
-}
-
-.main-page.right-main {
-  justify-content: end;
-  flex-flow: row-reverse;
-}
-
-p.main-content {
-  font-size: 40px;
-  font-weight: 700;
-  line-height: 56px;
-  margin: 12px 0 24px;
-}
-
-p.sub-content {
-  font-size: 24px;
-  font-weight: 500;
-  line-height: 29px;
-}
-
-p {
-  color: var(--cool-gray-700);
-}
-
-.top-img {
-  display: inline-block;
-  width: 996px;
-  height: 447px;
-}
-
-.bottom-img {
-  display: inline-block;
-  width: 996px;
-  height: 540px;
-
+.main-top,
+.main-bottom {
+  background-color: var(--main-background-color);
 }
 
 .top-img,
 .bottom-img {
   position: absolute;
   bottom: 0;
-  right: -137px;
 }
 
-.main-page-img {
-  display: inline-block;
-  width: 588px;
-  height: 444px;
+button {
+  border: none;
+  background-color: var(--brand-blue);
+  color: var(--gray-00);
+  text-align: center;
+  font-weight: 600;
+  cursor: pointer;
 }
 
 .login-button {
@@ -104,7 +34,6 @@ p {
   font-size: 16px;
   width: 128px;
   height: 48px;
-  margin-left: 0;
 }
 
 .item-button {
@@ -115,28 +44,32 @@ p {
   margin: 0 auto;
 }
 
-button {
-  border: none;
-  background-color: var(--brand-blue);
-  color: var(--gray-00);
-  text-align: center;
-  font-weight: 600;
-  cursor: pointer;
+p {
+  color: var(--cool-gray-700);
 }
 
+.content-block {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+  
 h3 {
-  font-size: 18px;
-  font-weight: 800;
   color: var(--brand-blue);
 }
 
-.main-top,
-.main-bottom {
-  background-color: var(--main-background-color);
+.main-logo-block {
+  cursor: pointer;
 }
 
-.main-bottom {
-  margin-top: 180px;
+.main-typo {
+  width: 103px;
+  height: 51px;
+}
+
+.main-logo {
+  width: 153px;
+  height: 51px;
 }
 
 footer {
@@ -151,6 +84,21 @@ footer {
   color: var(--cool-gray-400);
 }
 
+.privacy-faq-link {
+  display: flex;
+  justify-content: center;
+}
+
+.external-icons {
+  display: flex;
+  gap: 12px;
+}
+
+.external-link {
+  cursor: pointer;
+  text-decoration: none;
+}
+
 .privacy-link,
 .faq-link {
   font-size: 16px;
@@ -160,29 +108,430 @@ footer {
   cursor: pointer;
 }
 
-.privacy-faq-link {
-  display: flex;
-  gap: 10px;
-  justify-content: center;
- }
+.main-content,
+.top-content,
+.bottom-content {
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 56px;
+}
 
-.external-link {
-  cursor: pointer;
-  text-decoration: none;
+.main-content {
+  margin: 12px 0 24px;
 }
 
-.top-page,
-.bottom-page {
-  position: relative;
-  height: 540px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+/* Mobile Size */
+@media (min-width: 375px) {
+  header {
+    padding: 10px 16px;
+  }
+
+  .main-logo {
+    display: none;
+  }
+
+  .main-typo {
+    display: block;
+  }
+
+  .main-top,
+  .main-page1,
+  .main-page2,
+  .main-page3,
+  .main-bottom {
+    padding: 0 16px; 
+  }
+
+  .main-top,
+  .main-bottom {
+    position : relative;
+  }
+
+  .main-top {
+    height: 540px;
+    margin-bottom: 51px;
+  }
+
+  .main-bottom {
+    height: 540px;
+  }
+
+  .top-page {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-top: 48px;
+  }
+
+  .top-content,
+  .button-container,
+  .bottom-content {
+    text-align: center;
+  }
+
+  .top-content {
+    margin-bottom: 18px;
+  }
+
+  .item-button {
+    width: 154px;
+    height: 48px;
+    font-size: 16px;
+    font-weight: 600;
+  }
+
+  img {
+    margin: 0 auto;
+  }
+
+  .top-img {
+    width: 626px;
+    height: 281px;
+    bottom: 0;
+  }
+
+  .main-page-img {
+    display: block;
+    width: 344px;
+    height: 259px;
+    margin-bottom: 20px;
+  }
+  
+  .main-page {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  h3 {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--brand-blue);
+  }
+
+  .main-content br {
+    display: inline-block;
+    content: " ";
+    padding: 0 2px;
+  }
+  
+  .main-content {
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 34px;
+    margin: 8px 0 20px;
+  }
+
+  .sub-content {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 19px;
+    margin-bottom: 64px;
+  }
+
+  .bottom-page {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .bottom-content {
+    margin-top: 121px;
+  }
+  
+  .bottom-img {
+    display: block;
+    width: 498px;
+    height: 270px;
+  }
+
+  footer {
+    position: relative;
+    height: 160px;
+  }
+
+  .codeit-2024 {
+    position: absolute;
+    left: 32px;
+    bottom: 32px;
+  }
+  
+  footer {
+    padding: 32px;
+  }
+
+  .footer-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .privacy-faq-link {
+    gap: 30px;
+  }
+
 }
 
-.footer-bar {
-  margin: 0 auto;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+/* Tablet Size */
+@media (min-width: 768px) {
+  header {
+    padding: 10px 24px;
+  }
+
+  .main-logo {
+    display: block;
+  }
+
+  .main-typo {
+    display: none;
+  }
+
+  .main-top,
+  .main-page1,
+  .main-page2,
+  .main-page3,
+  .main-bottom {
+    padding: 0 16px; 
+  }
+
+  .main-top,
+  .main-bottom {
+    position : relative;
+  }
+
+  .main-top {
+    height: 771px;
+    margin-bottom: 24px;
+  }
+
+  .main-bottom {
+    height: 927px;
+  }
+
+  .top-page {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-top: 84px;
+  }
+
+  .top-content,
+  .button-container,
+  .bottom-content {
+    text-align: center;
+  }
+
+  .top-content {
+    margin-bottom: 24px;
+  }
+
+  .item-button {
+    width: 355px;
+    height: 60px;
+    font-size: 20px;
+    font-weight: 600;
+  }
+
+  img {
+    margin: 0 auto;
+  }
+
+  .top-img {
+    width: 996px;
+    height: 447px;
+    bottom: 0;
+  }
+
+  .main-page-img {
+    display: block;
+    width: 696px;
+    height: 524px;
+    margin-bottom: 20px;
+  }
+  
+  .main-page {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  h3 {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--brand-blue);
+  }
+
+  .top-content br,
+  .main-content br {
+    display: inline-block;
+    content: " ";
+    padding: 0 2px;
+  }
+  
+  .main-content {
+    font-size: 32px;
+    font-weight: 700;
+    line-height: 45px;
+    margin: 12px 0 20px;
+  }
+
+  .sub-content {
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 22px;
+    margin-bottom: 64px;
+  }
+
+  .bottom-page {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .bottom-content {
+    margin-top: 201px;
+  }
+  
+  .bottom-img {
+    display: block;
+    width: 996px;
+    height: 540px;
+  }
+
+  footer {
+    position: relative;
+    height: 160px;
+  }
+
+  .codeit-2024 {
+    position: static;
+  }
+  
+  footer {
+    padding: 32px;
+  }
+
+  .footer-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .privacy-faq-link {
+    gap: 30px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .main-top,
+  .main-page1,
+  .main-page2,
+  .main-page3,
+  .main-bottom {
+    padding: 0;
+  }
+
+  .top-page,
+  .main-page,
+  .bottom-page {
+    width: 1200px;
+    height: 100%;
+    margin: 0 auto;
+    padding: 0;
+    position: relative;
+  }
+
+  header,
+  footer {
+    padding: 10px 200px;
+  }
+
+  .top-img {
+    display: block;
+    width: 996px;
+    height: 447px;
+  }
+
+  .main-page-img {
+    display: block;
+    width: 588px;
+    height: 444px;
+  }
+
+  .bottom-img {
+    display: block;
+    width: 996px;
+    height: 540px;
+  }
+
+  .main-top,
+  .main-bottom {
+    height: 540px;
+    margin: 0;
+  }
+
+  .main-page1,
+  .main-page2,
+  .main-page3 {
+    height: 720px;
+    padding: 0 200px;
+  }
+
+  .main-page {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 64px;
+  }
+
+  .main-content {
+    font-size: 40px;
+    line-height: 56px;
+    margin-bottom: 24px;
+  }
+
+  .main-content br,
+  .top-content br {
+    display: block;
+  }
+
+  .main-content,
+  .top-content {
+    text-align: left;
+  }
+
+  .sub-content {
+    font-size: 24px;
+    font-weight: 500;
+    line-height: 29px;
+    margin-bottom: 0;
+  }
+
+  .top-page,
+  .bottom-page {
+    justify-content: center;
+    align-items: start;
+  }
+
+  .bottom-content {
+    margin: 0;
+    text-align: left;
+  }
+
+  .top-img,
+  .bottom-img {
+    position: absolute;
+    bottom: 0;
+    right: -137px;
+  }
+
+  .main-page.right-main {
+    flex-direction: row-reverse;
+  }
+
+  .main-page .content-block,
+  .main-page .main-content {
+    text-align: right;
+  }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index eb3e83edf..9c24e1017 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,9 @@
         <a class="main-logo-block" href="./">
           <img class="main-logo" src="/images/logo_with_typo.png" alt="로고 이미지"/>
         </a>
+        <a class="main-logo-block" href="./">
+          <img class="main-typo" src="/images/logo_typo.png" alt="로고 타이포"/>
+        </a>
       </div>
       <button class="login-button" onclick="location.href='/pages/login'">로그인</button>
     </header>
@@ -27,8 +30,10 @@
       <div class="main-top">
         <div class="top-page">
           <div>
-            <p class="main-content">일상의 모든 물건을<br>거래해 보세요</p>
-            <button class="item-button" onclick="location.href='/pages/items'">구경하러가기</button>
+            <p class="top-content">일상의 모든 물건을<br>거래해보세요</p>
+            <div class="button-container">
+              <button class="item-button" onclick="location.href='/pages/items'">구경하러가기</button>
+            </div>
           </div>
           <img
            class="top-img" src="/images/img_home_top.png" alt="홈 페이지 상단 이미지" />
@@ -41,7 +46,7 @@
           </div>
           <div class="content-block">
             <h3>Hot item</h3>
-            <p class="main-content">인기 상품을<br>확인해 보세요</p>
+            <p class="main-content">인기 상품을 <br>확인해보세요</p>
             <p class="sub-content">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</p>
           </div>
         </div>
@@ -64,15 +69,15 @@ <h3>Search</h3>
             <img class="main-page-img" src="/images/img_home_register.png" alt="홈 이미지 3" />
           </div>
           <div class="content-block">
-            <h3 class="right-text">Register</h3>
-            <p class="main-content right-text">판매를 원하는<br>상품을 등록하세요</p>
-            <p class="sub-content right-text">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
+            <h3>Register</h3>
+            <p class="main-content">판매를 원하는<br>상품을 등록하세요</p>
+            <p class="sub-content">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
           </div>
         </div>
       </div>
       <div class="main-bottom">
         <div class="bottom-page">
-          <p class="main-content">믿을 수 있는<br>판다마켓 중고거래</p>
+          <p class="bottom-content">믿을 수 있는<br>판다마켓 중고거래</p>
           <img class="bottom-img" src="/images/img_home_bottom.png" alt="홈 페이지 하단 이미지" />
         </div>
       </div>
@@ -84,7 +89,7 @@ <h3 class="right-text">Register</h3>
           <a class= "privacy-link" href="/pages/privacy">Privacy Policy</a>
           <a class= "faq-link" href="/pages/faq">FAQ</a>
         </div>
-        <div>
+        <div class="external-icons">
           <a class="external-link" href="https://www.facebook.com" target="_blank">
             <img src="/images/ic_facebook.png" alt="페이스북 로고" />
           </a>

From d9babaed550ee836666f41371c71ddc696e36b2b Mon Sep 17 00:00:00 2001
From: leehj322 <gudwns8956@naver.com>
Date: Wed, 5 Jun 2024 21:32:23 +0900
Subject: [PATCH 03/10] refactor(mainpage): Edit position of main-page image
 and footer text

---
 css/home.css | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/css/home.css b/css/home.css
index a198145af..3cbd0edca 100644
--- a/css/home.css
+++ b/css/home.css
@@ -480,7 +480,6 @@ footer {
   .main-page {
     display: flex;
     flex-direction: row;
-    justify-content: center;
     align-items: center;
     gap: 64px;
   }
@@ -526,12 +525,16 @@ footer {
     right: -137px;
   }
 
-  .main-page.right-main {
+  .right-main {
     flex-direction: row-reverse;
   }
 
-  .main-page .content-block,
-  .main-page .main-content {
+  .right-main .content-block,
+  .right-main .main-content {
     text-align: right;
   }
+
+  .footer-bar {
+    margin-top: 32px;
+  }
 }
\ No newline at end of file

From e3e073ed5264120f06fb2c085f5243774762d983 Mon Sep 17 00:00:00 2001
From: leehj322 <gudwns8956@naver.com>
Date: Thu, 6 Jun 2024 00:27:53 +0900
Subject: [PATCH 04/10] Add missing content(color value)

---
 css/base/global.css | 1 +
 css/login.css       | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/css/base/global.css b/css/base/global.css
index 1f69a8ed8..5502956f8 100644
--- a/css/base/global.css
+++ b/css/base/global.css
@@ -20,6 +20,7 @@
 
   /* arbitrarily named color value */
   --gray-00: #ffffff;
+  --simple-login-color: #e6f2ff;
   --main-background-color: #cfe5ff;
 }
 
diff --git a/css/login.css b/css/login.css
index b332bff7b..be90bea10 100644
--- a/css/login.css
+++ b/css/login.css
@@ -66,7 +66,7 @@ button:disabled {
 }
 
 .simple-login {
-  background-color: #e6f2ff;
+  background-color: var(--simple-login-color);
   border-radius: 8px;
   width: 640px;
   height: 74px;

From e67e558af6e658ea816ae3c83d3608474cd1fa3b Mon Sep 17 00:00:00 2001
From: leehj322 <gudwns8956@naver.com>
Date: Thu, 6 Jun 2024 13:29:01 +0900
Subject: [PATCH 05/10] feat(loginpage): Implement responsive web on login and
 signup page

---
 css/login.css           | 40 +++++++++++++++++++++++++++++++++++-----
 pages/login/signup.html |  8 +++-----
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/css/login.css b/css/login.css
index be90bea10..2cd20447c 100644
--- a/css/login.css
+++ b/css/login.css
@@ -1,14 +1,12 @@
+/*================logo================*/
 .logo-image {
-  display: inline-block;
+  display: block;
   width: 396px;
   height: 132px;
-}
-
-.logo-block {
-  width: 396px;
   margin: 60px auto 40px;
 }
 
+/*================input================*/
 .content {
   width: 640px;
   margin: 0 auto;
@@ -51,6 +49,7 @@ input:focus {
   right: 24px;
 }
 
+/*================login-button================*/
 button {
   width: 640px;
   height: 56px;
@@ -65,6 +64,7 @@ button:disabled {
   background-color: var(--cool-gray-400);
 }
 
+/*================simple-login================*/
 .simple-login {
   background-color: var(--simple-login-color);
   border-radius: 8px;
@@ -91,6 +91,7 @@ button:disabled {
   height: 42px;
 }
 
+/*================signup,login link================*/
 .about-signup-page,
 .about-login-page {
   display: flex;
@@ -104,4 +105,33 @@ button:disabled {
 .signup-page-link,
 .login-page-link {
   color: var(--brand-blue);
+}
+
+/*================responsive-web================*/
+
+@media (max-width: 1199px) {
+  .logo-image {
+    margin: 48px auto 40px;
+  }
+}
+
+/*================mobile================*/
+@media (max-width: 767px) {
+  body {
+    padding: 0 16px;
+  }
+
+  .logo-image {
+    width: 198px;
+    height: 66px;
+    margin: 24px auto;
+  }
+
+  .content,
+  button,
+  input,
+  .simple-login {
+    width: 100%;
+    max-width: 400px;
+  }
 }
\ No newline at end of file
diff --git a/pages/login/signup.html b/pages/login/signup.html
index 2e9b973e2..998f69731 100644
--- a/pages/login/signup.html
+++ b/pages/login/signup.html
@@ -16,11 +16,9 @@
   </head>
   <body>
     <header>
-      <div class="logo-block">
-        <a href="/">
-          <img class="logo-image" src="/images/logo_with_typo.png" alt="로고 이미지"/>
-        </a>
-      </div>
+      <a href="/">
+        <img class="logo-image" src="/images/logo_with_typo.png" alt="로고 이미지"/>
+      </a>
     </header>
     <main>
       <div class="content">

From 1f0e66a568b6e906e71d3ff5e04c92626c90b503 Mon Sep 17 00:00:00 2001
From: leehj322 <gudwns8956@naver.com>
Date: Thu, 6 Jun 2024 13:43:29 +0900
Subject: [PATCH 06/10] feat(mainhtml): Add meta tag (open graph, twitter card)

---
 index.html | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/index.html b/index.html
index 9c24e1017..6ced0084c 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,19 @@
 <html lang="ko">
   <head>
     <meta charset="utf-8">
+    
+    <meta property="og:title" content="판다마켓"/>
+    <meta property="og:type" content="website"/>
+    <meta property="og:url" content="https://leehj322-codeit.netlify.app/"/>
+    <meta property="og:discription" content="일상의 모든 물건을 거래해보세요"/>
+    <meta property="og:image" content="/images/logo_with_typo.png"/>
+
+    <meta name="twitter:title" content="판다마켓"/>
+    <meta name="twitter:card" content="summary"/>
+    <meta name="twitter:url" content="https://leehj322-codeit.netlify.app/"/>
+    <meta name="twitter:description" content="일상의 모든 물건을 거래해보세요"/>
+    <meta name="twitter:image" content="/images/logo_with_typo.png"/>
+
     <link rel="icon" href="/images/logo.png?v=2"/>
     <title>판다마켓</title>
     <link rel="stylesheet"

From eaec2133595f2c7d0be7cc5d1eda01f08097478a Mon Sep 17 00:00:00 2001
From: leehj322 <gudwns8956@naver.com>
Date: Thu, 6 Jun 2024 13:46:10 +0900
Subject: [PATCH 07/10] fix(meta): Fix meta data image

---
 index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 6ced0084c..c60195354 100644
--- a/index.html
+++ b/index.html
@@ -8,13 +8,13 @@
     <meta property="og:type" content="website"/>
     <meta property="og:url" content="https://leehj322-codeit.netlify.app/"/>
     <meta property="og:discription" content="일상의 모든 물건을 거래해보세요"/>
-    <meta property="og:image" content="/images/logo_with_typo.png"/>
+    <meta property="og:image" content="https://leehj322-codeit.netlify.app/images/img_home_top.png"/>
 
     <meta name="twitter:title" content="판다마켓"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:url" content="https://leehj322-codeit.netlify.app/"/>
     <meta name="twitter:description" content="일상의 모든 물건을 거래해보세요"/>
-    <meta name="twitter:image" content="/images/logo_with_typo.png"/>
+    <meta name="twitter:image" content="https://leehj322-codeit.netlify.app/images/img_home_top.png"/>
 
     <link rel="icon" href="/images/logo.png?v=2"/>
     <title>판다마켓</title>

From 892d0cb219df8c42b3dbe885141c1f46b7b574b9 Mon Sep 17 00:00:00 2001
From: leehj322 <gudwns8956@naver.com>
Date: Thu, 6 Jun 2024 13:51:23 +0900
Subject: [PATCH 08/10] fix(meta): Change meta tag image

---
 images/preview_img.png | Bin 0 -> 10216 bytes
 index.html             |   4 ++--
 2 files changed, 2 insertions(+), 2 deletions(-)
 create mode 100644 images/preview_img.png

diff --git a/images/preview_img.png b/images/preview_img.png
new file mode 100644
index 0000000000000000000000000000000000000000..158e4f5f51509c2874dbf851b94f868bee8d58b9
GIT binary patch
literal 10216
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

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index c60195354..ed9f08a83 100644
--- a/index.html
+++ b/index.html
@@ -8,13 +8,13 @@
     <meta property="og:type" content="website"/>
     <meta property="og:url" content="https://leehj322-codeit.netlify.app/"/>
     <meta property="og:discription" content="일상의 모든 물건을 거래해보세요"/>
-    <meta property="og:image" content="https://leehj322-codeit.netlify.app/images/img_home_top.png"/>
+    <meta property="og:image" content="https://leehj322-codeit.netlify.app/images/preview_img.png"/>
 
     <meta name="twitter:title" content="판다마켓"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:url" content="https://leehj322-codeit.netlify.app/"/>
     <meta name="twitter:description" content="일상의 모든 물건을 거래해보세요"/>
-    <meta name="twitter:image" content="https://leehj322-codeit.netlify.app/images/img_home_top.png"/>
+    <meta name="twitter:image" content="https://leehj322-codeit.netlify.app/images/preview_img.png"/>
 
     <link rel="icon" href="/images/logo.png?v=2"/>
     <title>판다마켓</title>

From 1ea88fc6f5499493129d847aaf17877de33d4021 Mon Sep 17 00:00:00 2001
From: leehj322 <gudwns8956@naver.com>
Date: Thu, 6 Jun 2024 16:39:43 +0900
Subject: [PATCH 09/10] fix(logoimg): Add logo-block on logo in login-page &
 signup-page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

로고이미지 좌우로 클릭할 수 있는 너비가 생겨서 수정함
---
 css/login.css           | 17 ++++++++++++++---
 pages/login/signup.html |  8 +++++---
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/css/login.css b/css/login.css
index 2cd20447c..4700b03dc 100644
--- a/css/login.css
+++ b/css/login.css
@@ -1,9 +1,15 @@
 /*================logo================*/
+
+.logo-block {
+  width: 396px;
+  height: 132px;
+  margin: 60px auto 40px;
+}
+
 .logo-image {
   display: block;
   width: 396px;
   height: 132px;
-  margin: 60px auto 40px;
 }
 
 /*================input================*/
@@ -110,7 +116,7 @@ button:disabled {
 /*================responsive-web================*/
 
 @media (max-width: 1199px) {
-  .logo-image {
+  .logo-block {
     margin: 48px auto 40px;
   }
 }
@@ -121,12 +127,17 @@ button:disabled {
     padding: 0 16px;
   }
 
-  .logo-image {
+  .logo-block {
     width: 198px;
     height: 66px;
     margin: 24px auto;
   }
 
+  .logo-image {
+    width: 198px;
+    height: 66px;
+  }
+
   .content,
   button,
   input,
diff --git a/pages/login/signup.html b/pages/login/signup.html
index 998f69731..2e9b973e2 100644
--- a/pages/login/signup.html
+++ b/pages/login/signup.html
@@ -16,9 +16,11 @@
   </head>
   <body>
     <header>
-      <a href="/">
-        <img class="logo-image" src="/images/logo_with_typo.png" alt="로고 이미지"/>
-      </a>
+      <div class="logo-block">
+        <a href="/">
+          <img class="logo-image" src="/images/logo_with_typo.png" alt="로고 이미지"/>
+        </a>
+      </div>
     </header>
     <main>
       <div class="content">

From 61be936e940fdfade8409ed984e2c1938c075325 Mon Sep 17 00:00:00 2001
From: leehj322 <gudwns8956@naver.com>
Date: Fri, 7 Jun 2024 12:27:00 +0900
Subject: [PATCH 10/10] refactor(mainpage): Improve readability css file

---
 css/home.css | 632 ++++++++++++++++++++++-----------------------------
 index.html   |  16 +-
 2 files changed, 276 insertions(+), 372 deletions(-)

diff --git a/css/home.css b/css/home.css
index 3cbd0edca..483a5d764 100644
--- a/css/home.css
+++ b/css/home.css
@@ -1,7 +1,8 @@
+/*================header================*/
 header {
   background-color: var(--gray-00);
-  height: 70px;
   display: flex;
+  padding: 10px 200px;
   justify-content: space-between;
   align-items: center;
   position: sticky;
@@ -9,31 +10,81 @@ header {
   z-index: 1;
 }
 
-.main-top,
-.main-bottom {
-  background-color: var(--main-background-color);
+.main-logo-block {
+  display: flex;
+  justify-content: center;
+}
+
+.main-logo {
+  display: inline-block;
+  width: 153px;
+  height: 51px;
+  cursor: pointer;
+}
+
+.main-typo {
+  display: none;
+  cursor: pointer;
+}
+
+/*================image================*/
+.top-img {
+  display: inline-block;
+  width: 996px;
+  height: 447px;
+}
+
+.bottom-img {
+  display: inline-block;
+  width: 996px;
+  height: 540px;
 }
 
 .top-img,
 .bottom-img {
   position: absolute;
   bottom: 0;
+  right: -137px;
 }
 
-button {
-  border: none;
-  background-color: var(--brand-blue);
-  color: var(--gray-00);
-  text-align: center;
-  font-weight: 600;
-  cursor: pointer;
+.main-page-img {
+  display: inline-block;
+  width: 588px;
+  height: 444px;
 }
 
+/*================font================*/
+h3 {
+  font-size: 18px;
+  font-weight: 800;
+  color: var(--brand-blue);
+}
+
+p {
+  color: var(--cool-gray-700);
+}
+
+.top-content,
+.bottom-content,
+.main-content {
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 56px;
+}
+
+.sub-content {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 29px;
+}
+
+/*================button================*/
 .login-button {
   border-radius: 8px;
   font-size: 16px;
   width: 128px;
   height: 48px;
+  margin-left: 0;
 }
 
 .item-button {
@@ -44,34 +95,78 @@ button {
   margin: 0 auto;
 }
 
-p {
-  color: var(--cool-gray-700);
+button {
+  border: none;
+  background-color: var(--brand-blue);
+  color: var(--gray-00);
+  text-align: center;
+  font-weight: 600;
+  cursor: pointer;
 }
 
-.content-block {
+/*================main-top&bottom================*/
+.top-page,
+.main-page,
+.bottom-page {
+  width: 1200px;
+  margin: 0 auto;
+}
+
+.top-page,
+.bottom-page {
+  position: relative;
+  height: 540px;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
-  
-h3 {
-  color: var(--brand-blue);
+
+.main-top,
+.main-bottom {
+  background-color: var(--main-background-color);
 }
 
-.main-logo-block {
-  cursor: pointer;
+.main-bottom {
+  margin-top: 180px;
 }
 
-.main-typo {
-  width: 103px;
-  height: 51px;
+.top-content {
+  margin-bottom: 32px;
 }
 
-.main-logo {
-  width: 153px;
-  height: 51px;
+/*================main-1~3================*/
+.main-page1,
+.main-page2,
+.main-page3 {
+  height: 720px;
+}
+
+.main-page {
+  display: flex;
+  gap: 64px;
+  padding: 138px 0;
+}
+
+.content-block {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.right-main {
+  justify-content: end;
+  flex-flow: row-reverse;
 }
 
+.right-text {
+  text-align: right;
+}
+
+.main-content {
+  margin: 12px 0 24px;
+}
+
+/*================footer================*/
 footer {
   background-color: var(--cool-gray-900);
   height: 160px;
@@ -84,14 +179,24 @@ footer {
   color: var(--cool-gray-400);
 }
 
+.privacy-link,
+.faq-link {
+  font-size: 16px;
+  font-weight: 400;
+  color: var(--cool-gray-200);
+  text-decoration: none;
+  cursor: pointer;
+}
+
 .privacy-faq-link {
   display: flex;
+  gap: 30px;
   justify-content: center;
-}
+ }
 
 .external-icons {
   display: flex;
-  gap: 12px;
+  gap: 13px;
 }
 
 .external-link {
@@ -99,442 +204,245 @@ footer {
   text-decoration: none;
 }
 
-.privacy-link,
-.faq-link {
-  font-size: 16px;
-  font-weight: 400;
-  color: var(--cool-gray-200);
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.main-content,
-.top-content,
-.bottom-content {
-  font-size: 40px;
-  font-weight: 700;
-  line-height: 56px;
+.footer-bar {
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-.main-content {
-  margin: 12px 0 24px;
-}
+/*================responsive-web================*/
 
-/* Mobile Size */
-@media (min-width: 375px) {
+/*================Tablet================*/
+@media (max-width: 1199px) {
+  /*================header================*/
   header {
-    padding: 10px 16px;
-  }
-
-  .main-logo {
-    display: none;
-  }
-
-  .main-typo {
-    display: block;
-  }
-
-  .main-top,
-  .main-page1,
-  .main-page2,
-  .main-page3,
-  .main-bottom {
-    padding: 0 16px; 
-  }
-
-  .main-top,
-  .main-bottom {
-    position : relative;
-  }
-
-  .main-top {
-    height: 540px;
-    margin-bottom: 51px;
-  }
-
-  .main-bottom {
-    height: 540px;
-  }
-
-  .top-page {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding-top: 48px;
-  }
-
-  .top-content,
-  .button-container,
-  .bottom-content {
-    text-align: center;
-  }
-
-  .top-content {
-    margin-bottom: 18px;
-  }
-
-  .item-button {
-    width: 154px;
-    height: 48px;
-    font-size: 16px;
-    font-weight: 600;
-  }
-
-  img {
-    margin: 0 auto;
+    padding: 10px 24px;
   }
 
-  .top-img {
-    width: 626px;
-    height: 281px;
-    bottom: 0;
+  /*================image================*/
+  .top-img,
+  .bottom-img {
+    right: 50%;
+    left: 50%;
+    transform: translate(-50%);
   }
 
   .main-page-img {
-    display: block;
-    width: 344px;
-    height: 259px;
-    margin-bottom: 20px;
-  }
-  
-  .main-page {
-    display: flex;
-    flex-direction: column;
+    width: 696px;
+    height: 524px;
   }
   
-  h3 {
-    font-size: 16px;
-    font-weight: 700;
-    color: var(--brand-blue);
+  /*================font================*/
+  .main-content {
+    font-size: 32px;
+    line-height: 45px;
   }
 
   .main-content br {
     display: inline-block;
     content: " ";
-    padding: 0 2px;
+    padding: 0 4px;
   }
   
-  .main-content {
-    font-size: 24px;
-    font-weight: 700;
-    line-height: 34px;
-    margin: 8px 0 20px;
-  }
-
   .sub-content {
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 19px;
+    font-size: 18px;
+    line-height: 22px;
     margin-bottom: 64px;
   }
 
+  /*================main-top&bottom================*/
+  .top-page,
+  .main-page,
   .bottom-page {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .bottom-content {
-    margin-top: 121px;
-  }
-  
-  .bottom-img {
-    display: block;
-    width: 498px;
-    height: 270px;
-  }
-
-  footer {
-    position: relative;
-    height: 160px;
-  }
-
-  .codeit-2024 {
-    position: absolute;
-    left: 32px;
-    bottom: 32px;
+    width: 696px;
+    margin: 0 auto;
   }
   
-  footer {
-    padding: 32px;
-  }
-
-  .footer-bar {
-    display: flex;
-    justify-content: space-between;
+  .top-page,
+  .bottom-page {
+    justify-content: start;
     align-items: center;
   }
-
-  .privacy-faq-link {
-    gap: 30px;
-  }
-
-}
-
-/* Tablet Size */
-@media (min-width: 768px) {
-  header {
-    padding: 10px 24px;
-  }
-
-  .main-logo {
-    display: block;
-  }
-
-  .main-typo {
-    display: none;
-  }
-
-  .main-top,
-  .main-page1,
-  .main-page2,
-  .main-page3,
-  .main-bottom {
-    padding: 0 16px; 
-  }
-
-  .main-top,
-  .main-bottom {
-    position : relative;
-  }
-
   .main-top {
-    height: 771px;
     margin-bottom: 24px;
   }
-
+  
   .main-bottom {
-    height: 927px;
+    margin-top: 80px;
   }
 
   .top-page {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+    height: 771px;
     padding-top: 84px;
   }
 
-  .top-content,
-  .button-container,
-  .bottom-content {
-    text-align: center;
-  }
-
-  .top-content {
-    margin-bottom: 24px;
+  .bottom-page {
+    height: 927px;
+    padding-top: 201px;
   }
 
-  .item-button {
-    width: 355px;
-    height: 60px;
-    font-size: 20px;
-    font-weight: 600;
+  .top-page,
+  .bottom-page {
+    text-align: center;
   }
 
-  img {
-    margin: 0 auto;
+  .top-content br {
+    display: inline-block;
+    content: " ";
+    padding: 0 5px;
   }
 
-  .top-img {
-    width: 996px;
-    height: 447px;
-    bottom: 0;
+  .top-content {
+    margin-bottom: 24px;
   }
 
-  .main-page-img {
-    display: block;
-    width: 696px;
-    height: 524px;
-    margin-bottom: 20px;
+  /*================main-1~3================*/
+  .main-page1,
+  .main-page2,
+  .main-page3 {
+    height: auto;
   }
   
-  .main-page {
+  .main-page,
+  .right-main {
     display: flex;
     flex-direction: column;
-  }
-  
-  h3 {
-    font-size: 18px;
-    font-weight: 700;
-    color: var(--brand-blue);
+    gap: 20px;
+    padding: 0;
   }
 
-  .top-content br,
-  .main-content br {
-    display: inline-block;
-    content: " ";
-    padding: 0 2px;
-  }
-  
   .main-content {
-    font-size: 32px;
-    font-weight: 700;
-    line-height: 45px;
     margin: 12px 0 20px;
   }
 
-  .sub-content {
-    font-size: 18px;
-    font-weight: 500;
-    line-height: 22px;
-    margin-bottom: 64px;
+  /*================footer================*/
+  footer {
+    padding: 32px 104px;
   }
 
-  .bottom-page {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+}
+
+/*================Mobile================*/
+@media (max-width: 767px) {
+  /*================header================*/
+  header {
+    padding: 10px 16px;
   }
 
-  .bottom-content {
-    margin-top: 201px;
+  .main-logo {
+    display: none;
   }
   
-  .bottom-img {
-    display: block;
-    width: 996px;
-    height: 540px;
-  }
-
-  footer {
-    position: relative;
-    height: 160px;
+  .main-typo {
+    display: inline-block;
+    width: 103px;
+    height: 51px;
   }
 
-  .codeit-2024 {
-    position: static;
+  /*================image================*/
+  .top-img {
+    width: 626px;
+    height: 281px;
   }
   
-  footer {
-    padding: 32px;
+  .bottom-img {
+    width: 498px;
+    height: 270px;
   }
-
-  .footer-bar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  
+  .main-page-img {
+    width: 344px;
+    height: 259px;
   }
 
-  .privacy-faq-link {
-    gap: 30px;
+  /*================button================*/
+  .item-button {
+    font-size: 16px;
+    width: 154px;
+    height: 48px;
   }
-}
 
-@media (min-width: 1200px) {
-  .main-top,
-  .main-page1,
-  .main-page2,
-  .main-page3,
-  .main-bottom {
-    padding: 0;
+  /*================font================*/
+  h3 {
+    font-size: 16px;
+    font-weight: 700;
   }
 
-  .top-page,
-  .main-page,
-  .bottom-page {
-    width: 1200px;
-    height: 100%;
-    margin: 0 auto;
-    padding: 0;
-    position: relative;
+  .top-content,
+  .bottom-content {
+    font-size: 32px;
+    font-weight: 700;
+    line-height: 45px;
   }
 
-  header,
-  footer {
-    padding: 10px 200px;
+  .main-content {
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 34px;
   }
 
-  .top-img {
-    display: block;
-    width: 996px;
-    height: 447px;
+  .sub-content {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 19px;
   }
 
-  .main-page-img {
-    display: block;
-    width: 588px;
-    height: 444px;
+  /*================main-top&bottom================*/
+  .top-page,
+  .main-page,
+  .bottom-page {
+    width: 343px;
+    margin: 0 auto;
   }
-
-  .bottom-img {
-    display: block;
-    width: 996px;
+  
+  .top-page,
+  .bottom-page {
     height: 540px;
+    justify-content: start;
+    align-items: center;
   }
-
-  .main-top,
-  .main-bottom {
-    height: 540px;
-    margin: 0;
+  
+  .main-top {
+    margin-bottom: 51px;
   }
 
-  .main-page1,
-  .main-page2,
-  .main-page3 {
-    height: 720px;
-    padding: 0 200px;
+  .main-bottom {
+    margin-top: 51px;
   }
 
-  .main-page {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 64px;
+  .top-page {
+    padding-top: 48px;
   }
 
-  .main-content {
-    font-size: 40px;
-    line-height: 56px;
-    margin-bottom: 24px;
+  .bottom-page {
+    padding-top: 121px;
   }
 
-  .main-content br,
   .top-content br {
     display: block;
+    padding: 0;
   }
 
-  .main-content,
   .top-content {
-    text-align: left;
-  }
-
-  .sub-content {
-    font-size: 24px;
-    font-weight: 500;
-    line-height: 29px;
-    margin-bottom: 0;
+    margin-bottom: 18px;
   }
 
-  .top-page,
-  .bottom-page {
-    justify-content: center;
-    align-items: start;
+  /*================main-1~3================*/
+  .main-content {
+    margin: 8px 0 14px;
   }
 
-  .bottom-content {
-    margin: 0;
-    text-align: left;
+  /*================footer================*/
+  footer {
+    padding: 32px;
+    position: relative;
   }
 
-  .top-img,
-  .bottom-img {
+  .codeit-2024 {
     position: absolute;
-    bottom: 0;
-    right: -137px;
-  }
-
-  .right-main {
-    flex-direction: row-reverse;
-  }
-
-  .right-main .content-block,
-  .right-main .main-content {
-    text-align: right;
+    left: 32px;
+    bottom: 32px;
   }
 
-  .footer-bar {
-    margin-top: 32px;
-  }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index ed9f08a83..333bc0390 100644
--- a/index.html
+++ b/index.html
@@ -30,10 +30,8 @@
   <body>
     <header>
       <div>
-        <a class="main-logo-block" href="./">
+        <a class="main-logo-block" href="/">
           <img class="main-logo" src="/images/logo_with_typo.png" alt="로고 이미지"/>
-        </a>
-        <a class="main-logo-block" href="./">
           <img class="main-typo" src="/images/logo_typo.png" alt="로고 타이포"/>
         </a>
       </div>
@@ -44,9 +42,7 @@
         <div class="top-page">
           <div>
             <p class="top-content">일상의 모든 물건을<br>거래해보세요</p>
-            <div class="button-container">
-              <button class="item-button" onclick="location.href='/pages/items'">구경하러가기</button>
-            </div>
+            <button class="item-button" onclick="location.href='/pages/items'">구경하러가기</button>
           </div>
           <img
            class="top-img" src="/images/img_home_top.png" alt="홈 페이지 상단 이미지" />
@@ -59,7 +55,7 @@
           </div>
           <div class="content-block">
             <h3>Hot item</h3>
-            <p class="main-content">인기 상품을 <br>확인해보세요</p>
+            <p class="main-content">인기 상품을<br>확인해 보세요</p>
             <p class="sub-content">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</p>
           </div>
         </div>
@@ -70,9 +66,9 @@ <h3>Hot item</h3>
             <img class="main-page-img" src="/images/img_home_search.png" alt="홈 이미지 2" />
           </div>
           <div class="content-block">
-            <h3>Search</h3>
-            <p class="main-content">구매를 원하는<br>상품을 검색하세요</p>
-            <p class="sub-content">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
+            <h3 class="right-text">Search</h3>
+            <p class="main-content right-text">구매를 원하는<br>상품을 검색하세요</p>
+            <p class="sub-content right-text">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
           </div>
         </div>
       </div>