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] 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>