codeit-bootcamp-frontend · GANGYIKIM · Aug 26, 2024 · Aug 10, 2024 · Aug 15, 2024 · Aug 15, 2024
diff --git a/index.html b/index.html
@@ -2,16 +2,21 @@
 <html lang="ko">
 <head>
     <meta charset="UTF-8">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="판다마켓">
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요">
+    <meta property="og:image" content="./img/logo/logo.png">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>판다마켓</title>
     <link
       rel="stylesheet"
       as="style"
-      crossorigin
       href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css"
-   >
+    >
     <link rel="stylesheet" href="style/index.css">
     <link rel="stylesheet" href="style/global.css">
+    <link rel="stylesheet" href="style/index_tablet.css">
+    <link rel="stylesheet" href="style/index_mobile.css"> 
 </head>
 <body>
     <header>
@@ -24,6 +29,7 @@
 
     </header>
     <main>
+        </div>
         <section class="banner">
             <div class="banner-wrap">
                 <div class="banner-textbox">
@@ -32,12 +38,12 @@ <h1 class="banner-text">일상의 모든 물건을<br>
                     </h1>
                     <a href="/items" class="items-button">구경하러 가기</a>
                 </div>
-                <img class="img_home_top" src="./img/Img_home_top.png" width="746" alt="banner">
+                <img class="img-home-top" src="./img/Img_home_top.png" alt="banner">
             </div>
         </section>
-        <section class="section1">
-            <div class="section-wrap">
-                <img class="Img_home_01" src="./IMG/Img_home_01.png" width="558" alt="Hot Item">
+        <section class="section-left">
+            <div class="section-left-wrap">
+                <img class="img-section" src="./IMG/Img_home_01.png"  alt="Hot Item">
                 <div class="section-textbox">
                     <p class="tag">Hot Item</p>
                     <h3 class="section-text">인기 상품을<br>
@@ -50,8 +56,8 @@ <h3 class="section-text">인기 상품을<br>
 
             </div>
         </section>
-        <section class="section2">
-            <div class="section-wrap">
+        <section class="section-right">
+            <div class="section-right-wrap">
                 <div class="section-textbox">
                     <p class="tag">Search</p>
                     <h3 class="section-text">구매를 원하는<br>
@@ -61,12 +67,12 @@ <h3 class="section-text">구매를 원하는<br>
                         쉽게 찾아보세요
                     </p>
                 </div>
-                <img class="Img_home_02" src="./IMG/Img_home_02.png" width="588" alt="Search">
+                <img class="img-section" src="./IMG/Img_home_02.png" alt="Search">
             </div>
         </section>
-        <section class="section3">
-            <div class="section-wrap">
-                <img class="Img_home_03" src="./IMG/Img_home_03.png" width="588" alt="Register">
+        <section class="section-left">
+            <div class="section-left-wrap">
+                <img class="img-section" src="./IMG/Img_home_03.png" alt="Register">
                 <div class="section-textbox">
                     <p class="tag">Register</p>
                     <h3 class="section-text">판매를 원하는<br>
@@ -79,13 +85,13 @@ <h3 class="section-text">판매를 원하는<br>
             </div>
         </section>
         <section class="bottom">
-            <div class="banner-wrap">
-                <div class="banner-textbox">
-                    <h3 class="section-text">믿을 수 있는<br>
+            <div class="bottom-wrap">
+                <div class="bottom-textbox">
+                    <h3 class="bottom-text">믿을 수 있는<br>
                         판다마켓 중고 거래
                     </h3>
                 </div>
-                <img class="img_home_bottom" src="./img/Img_home_bottom.png" width="746" alt="bottom">
+                <img class="img-home-bottom" src="./img/Img_home_bottom.png" alt="bottom">
             </div>
         </section>
     </main>

diff --git a/login.html b/login.html
@@ -6,6 +6,7 @@
     <title>로그인</title>
     <link rel="stylesheet" href="style/global.css">
     <link rel="stylesheet" href="style/auth.css">
+   <link rel="stylesheet" href="style/auth_mobile.css">
 </head>
 <body>
     <div class="auth-container">

diff --git a/signup.html b/signup.html
@@ -6,6 +6,7 @@
     <title>회원가입</title>
     <link rel="stylesheet" href="style/global.css">
     <link rel="stylesheet" href="style/auth.css">
+    <link rel="stylesheet" href="style/auth_mobile.css">
 </head>
 <body>
     <div class="auth-container">

diff --git a/style/auth_mobile.css b/style/auth_mobile.css
@@ -0,0 +1,16 @@
+@media (max-width:767px){
+    br{
+        display:none !important;
+    }
+    .auth-container {
+        padding: 0 16px;
+        display:inline-flex;
+    }
+    .panda-logo {
+        width:198px;
+    }
+    .auth-wrap {
+        max-width: 400px;
+        margin:24px 0;
+    }
+}
diff --git a/style/index.css b/style/index.css
@@ -1,24 +1,21 @@
+/* desktop */
 header {
+    width:100%;
     display: flex;
     position:sticky;
     top:0px;
     z-index:10;
-    width: 100%;
     height: 70px;
-    padding: 9px 400px;
-    flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: 10px;
     flex-shrink: 0;
-
     border-bottom: 1px solid #DFDFDF;
     background: #FFF;
 }
-
-.header-wrap, .bottom-wrap {
+.header-wrap {
+    width:100%;
+    max-width:1120px; 
     height:100%;
-    max-width: 1920px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -65,16 +62,17 @@ header {
     align-items:center;
     justify-content:center;
 }
-
-.banner-wrap {
+.banner-wrap , .bottom-wrap{
     position:absolute;
     bottom:0px;
     display: inline-flex;
     align-items: center;
     gap: 7px;
 
 }
-
+.img-home-top, .img-home-bottom {
+    width:746px;
+}
 .banner-textbox, .bottom-textbox {
     height:100%;
     display: flex;
@@ -85,7 +83,7 @@ header {
     gap: 32px;
 }
 
-.banner-text, .section-text {
+.banner-text, .section-text, .bottom-text {
     color: #374151;
     margin: 0;
     font-size: 40px;
@@ -132,72 +130,80 @@ header {
     text-decoration-line: none;
 }
 
-.section1 {
+.section-left {
     width:100%;
+    height:720px;
     display: flex;
-    padding: 138px 605px 138px 360px;
     align-items: center;
     justify-content: center;
 }
 
-.section2 {
+.section-right {
+    width:100%;
+    height:720px;
     display: flex;
-    padding: 138px 360px 138px 591px;
-    justify-content: center;
     align-items: center;
-    background: #FFF;
+    justify-content: center; 
     text-align: end;
 }
 
-.section3 {
+.section-left-wrap {
+    width: 100%;
+    max-width:1200px;
+    height:444px;
     display: flex;
-    padding: 138px 573px 138px 360px;
+    justify-content: flex-start;
     align-items: center;
-    justify-content: center;
-    background: #FFF;
+    gap: 64px;
 }
-.section-wrap {
-    max-width:1920px;
-    display: flex;
+
+.section-right-wrap {
     width: 100%;
-    justify-content: center;
+    max-width:1200px;
+    height:444px;
+    display: flex;
+    justify-content: flex-end;
     align-items: center;
     gap: 64px;
 }
+
+.img-section {
+    max-width:558px;
+}
+
 .bottom {
     display:flex;
     width: 100%;
     height: 540px;
     flex-shrink: 0;
     background: #CFE5FF;
     position:relative;
-    top:138px;
     align-items:center;
     justify-content:center;
 }
 
 footer {
     display: flex;
     justify-content: center;
+    align-items: center;
     width: 100%;
     height: 160px;
     gap: 10px;
     flex-shrink: 0;
     background: #111827;
     position:relative;
-    top:138px;
 }
 
 .footer-wrap {
-    padding: 34px 400px;
     width:100%;
-    height:100%;
+    max-width:1120px;
+    height:96px;
     position: absolute;
     display: flex;
     justify-content: space-between;
 }
 
-footer a {
+footer a, span {
     color: #9CA3AF;
     text-align: center;
     font-size: 16px;
@@ -209,6 +215,7 @@ footer a {
 }
 
 .footer-center {
+    color: #CFCFCF;
     display: flex;
     gap: 30px;
     justify-content:center;    

diff --git a/style/index_mobile.css b/style/index_mobile.css
@@ -0,0 +1,68 @@
+@media (max-width:767px) {
+    .banner-text > br{
+        display:inline ;
+    }
+    .banner {
+        height: 540px;
+    }
+    .banner-wrap {
+        max-width:100%;
+        justify-content: space-between;
+    }
+    .banner-textbox {
+        padding:48px 0;
+        gap:18px;
+    }
+    .banner-text {
+        max-width:240px;
+        font-size:32px;
+        text-align: center;
+    }
+    .items-button {
+        height:48px;
+        font-size:18px;
+        padding:12px 71px;
+    }
+    .section-left {
+        height:417px;
+    }
+    .section-right {
+        height:417px;
+    }
+    .section-left-wrap {
+        max-width:344px;
+        max-height:417px;
+    }
+    .section-right-wrap {
+        max-width:344px;
+        max-height:417px;
+    }
+    .tag {
+        font-size: 16px;
+    }
+    .section-text {
+        font-size:24px;
+    }
+    .section-text-detail {
+        font-size:16px;
+    }
+    .bottom {
+        margin-top:86px;
+        height:540px;
+    }
+    .bottom-textbox {
+        padding:0;
+        max-width:236px;
+    }
+    .bottom-text {
+        text-align: center;
+        font-size:32px;
+    }
+    .footer-wrap {
+        max-width: 311px;
+    }
+    .copyright {
+        position:absolute;
+        top:60px;
+    }
+}