[김도균] Sprint3

index.html

@@ -32,9 +32,9 @@
     <main>
       <section class="banner top-banner">
         <div class="banner-explain">
-          <h1></h1>
+          <h1>판다마켓을 소개합니다.</h1>
           <h2>
-            일상의 모든 물건을<br />
+            일상의 모든 물건을<br class="top-banner-title-next-line" />
             거래해 보세요
           </h2>
           <a class="browsing" href="items.html">구경하러 가기</a>
@@ -54,8 +54,8 @@ <h2>
         />
         <div class="section-explain">
           <span class="keyword">Hot item</span>
-          <h2>
-            인기 상품을<br />
+          <h2 class="section-title">
+            인기 상품을<br class="section-title-next-line" />
             확인해 보세요
           </h2>
           <p>
@@ -68,8 +68,8 @@ <h2>
       <section class="home-main-section">
         <div class="section-explain">
           <span class="keyword">Search</span>
-          <h2>
-            구매를 원하는<br />
+          <h2 class="section-title">
+            구매를 원하는<br class="section-title-next-line" />
             상품을 검색하세요
           </h2>
           <p>
@@ -92,8 +92,8 @@ <h2>
         />
         <div class="section-explain">
           <span class="keyword">Register</span>
-          <h2>
-            판매를 원하는<br />
+          <h2 class="section-title">
+            판매를 원하는<br class="section-title-next-line" />
             상품을 등록하세요
           </h2>
           <p>

style/account.css

@@ -131,12 +131,12 @@ input::placeholder {
   background-color: #e6f2ff;
 }
 
-/* tablet_size(768px~1199px) */
-@media (max-width: 1199px) {
+/* tablet_size*/
+@media (max-width: 1200px) {
   /* 현재까진 타블렛과 pc의 요소 사이즈를 동일하게 설계함 */
 }
-/* mobile_size(375px~767px) */
-@media (max-width: 767px) {
+/* mobile_size */
+@media (max-width: 768px) {
   header,
   main,
   footer {

style/app.css

@@ -192,52 +192,89 @@ footer {
     padding-right: 200px;
   }
 }
-/* Tablet_screen(768px~1199px) */
-@media (max-width: 1199px) {
+/* Tablet_screen */
+@media (max-width: 1200px) {
   h2 {
-    font-size: 24px;
+    width: 100%;
+    font-size: 40px;
     font-weight: 700;
-    line-height: 28px;
+    line-height: 40px;
+    text-align: center;
   }
-  .top-banner-img,
-  .bottom-banner-img,
-  .section-img {
-    width: 360px;
-    height: 180px;
+  p {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 24px;
+  }
+
+  .top-navigation {
+    margin: 0;
+    padding: 16px 24px;
   }
 
   .banner {
-    padding-top: 30px;
+    flex-direction: column;
+    padding: 30px 0 0;
   }
-  .section-img {
-    width: 280px;
-    height: 200px;
+  .banner-explain {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
   }
-  .browsing {
-    width: 180px;
-    height: 40px;
-    margin: 16px 0;
-    padding: 8px 40px;
-    font-size: 16px;
+
+  .top-banner-img,
+  .bottom-banner-img {
+    margin-top: 10vw;
+    width: 90vw;
+    height: 50vw;
   }
-  p {
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 24px;
+
+  .top-banner-title-next-line,
+  .section-title-next-line {
+    display: none;
+  }
+
+  .bottom-banner {
+    margin-top: 0;
+    padding-top: 40px;
   }
+
   .home-main-section {
-    padding-bottom: 0;
+    flex-direction: column;
+    align-items: flex-start;
+    margin: 0;
+    padding: 16px 24px;
+    width: 100%;
+  }
+  .home-main-section:nth-of-type(3) {
+    flex-direction: column-reverse;
+    align-items: flex-end;
+  }
+  .home-main-section h2 {
+    margin: 16px 0;
+    text-align: left;
+  }
+  .home-main-section:nth-of-type(3) h2 {
+    text-align: right;
+  }
+  .section-img {
+    width: 100%;
+    height: 70vw;
+  }
+  .section-title {
+    font-size: 32px;
   }
 
-  .bottom-banner {
-    margin-top: 136px;
+  .browsing {
+    font-size: 16px;
   }
-  footer {
-    font-size: 4px;
+
+  .keyword {
+    margin-top: 16px;
   }
 }
-/* mobile_size(375px~767px) */
-@media (max-width: 767px) {
+/* mobile_size */
+@media (max-width: 768px) {
   .top-navigation {
     padding-right: 16px;
     padding-left: 16px;