codeit-bootcamp-frontend · KingNono1030 · Apr 30, 2024 · Apr 30, 2024 · Apr 30, 2024 · Apr 30, 2024
diff --git a/image-resources/og_img_panda-face.png b/image-resources/og_img_panda-face.png
diff --git a/index.html b/index.html
@@ -3,6 +3,24 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="당근마켓 게섯거라...! 요즘 대세는 푸바오 마켓..!"
+    />
+    <meta property="og:image" content="image-resources/og_img_panda-face.png" />
+    <meta property="og:title" content="판다마켓" />
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
+    <meta property="og:url" content="https://www.panda-market.kr" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta
+      name="twitter:image"
+      content="image-resources/og_img_panda-face.png"
+    />
+    <meta name="twitter:title" content="판다마켓" />
+    <meta
+      name="twitter:description"
+      content="일상의 모든 물건을 거래해보세요"
+    />
     <title>판다마켓</title>
     <link rel="stylesheet" href="global.css" />
     <link rel="stylesheet" href="reset.css" />

diff --git a/loginAndSignup.css b/loginAndSignup.css
@@ -101,3 +101,31 @@ main {
 .translucent {
   opacity: 0.5;
 }
+
+@media screen and (max-width: 767px) {
+  .header__logo {
+    width: 198px;
+    margin: 24px 0;
+  }
+
+  main {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+
+  .main-form,
+  .main__container__simple-login {
+    width: 100%;
+    max-width: 400px;
+  }
+
+  .label_name {
+    font-size: 14px;
+    line-height: 16.71px;
+    margin-bottom: 8px;
+  }
+
+  .label_input {
+    width: 100%;
+  }
+}
diff --git a/style.css b/style.css
@@ -1,11 +1,11 @@
 .h2_title {
-  font: 700 40px / 56px 'Pretendard';  
+  font: 700 40px / 56px 'Pretendard';
   color: var(--text-color-cool-gray);
   word-break: keep-all;
 }
 
 .p_description {
-  font: 500 24px / 28.8px 'Pretendard';  
+  font: 500 24px / 28.8px 'Pretendard';
   letter-spacing: 0.08em;
 }
 
@@ -14,7 +14,7 @@
   justify-content: center;
   align-items: center;
   height: 540px;
-  background: #CFE5FF no-repeat right 12% bottom;
+  background: #cfe5ff no-repeat right 12% bottom;
 }
 
 .nav-bar {
@@ -25,7 +25,7 @@
   top: 0;
   height: 70px;
   padding: 0 200px;
-  border-bottom: 1px solid #DFDFDF;
+  border-bottom: 1px solid #dfdfdf;
   background-color: var(--bg-color-white);
 }
 
@@ -46,6 +46,11 @@
   height: 200px;
 }
 
+.header-home,
+.main-footer {
+  padding-left: 36px;
+}
+
 main {
   display: flex;
   flex-direction: column;
@@ -67,7 +72,7 @@ main {
 
 .feature__keyword {
   margin-bottom: 12px;
-  font: 700 18px / 25.2px 'Pretendard';  
+  font: 700 18px / 25.2px 'Pretendard';
   color: var(--text-color-blue);
 }
 
@@ -95,7 +100,7 @@ main {
   background-image: url(image-resources/Img_home_bottom.png);
 }
 
-.main-footer {  
+.main-footer {
   width: 1200px;
 }
 
@@ -107,14 +112,12 @@ footer {
 
 .footer-container {
   display: flex;
-  flex-wrap: wrap;
   justify-content: space-between;
-  height: 63px;
 }
 
 .copyright {
   font: 400 16px / 19.09px Pretendard;
-  color: #9CA3AF;
+  color: #9ca3af;
 }
 
 .info {
@@ -138,44 +141,15 @@ footer {
   color: var(--text-color-white);
 }
 
-@media screen and (min-width: 744px){
-  .header-home, .main-footer {
-    padding-left: 36px;
-  }
-}
+/* 태블릿 */
 
-@media screen and (min-width: 744px) and (max-width: 1200px){
-  .bg_wrapper {
-    height: 400px;
-    background-size: 60%;
-  }
-
-  .nav-bar {
-    padding: 0 100px;
-  }
-
-  .main-section__wrapper {
-    width: 744px;
-    height: 480px;
-  }
-
-  .main-section__img {
-    width: 300px;
-  }
-
-  .main-footer__wrapper {
-    margin-top: 32px;
-  }
-}
-
-@media screen and (max-width: 744px){
+@media screen and (max-width: 1199px) {
   .h2_title br {
     display: none;
   }
 
   .bg_wrapper {
     align-items: flex-start;
-    padding-top: 32px;
     background-position: center bottom;
   }
 
@@ -185,135 +159,161 @@ footer {
     gap: 24px;
   }
 
+  main {
+    gap: 16px;
+  }
+
   .main-section__wrapper {
     justify-content: center;
     width: 100%;
+    height: auto;
   }
 
   .main-section {
     flex-direction: column;
-    justify-content: space-around;
-    gap: 32px;
+    align-items: flex-start;
+    width: 100%;
+    padding: 24px;
+    gap: 20px;
   }
 
-  .main-section__img {
-    width: 70%;
+  .main-section__reverse {
+    align-items: flex-end;
   }
 
-  .main-section__reverse {
-    text-align: left;
+  .main-section__img {
+    width: 100%;
   }
 
-  .main-footer{
+  .main-footer {
     text-align: center;
   }
 }
 
-@media screen and (min-width: 375px) and (max-width: 744px){
+@media screen and (min-width: 768px) and (max-width: 1199px) {
   .h2_title {
     font-size: 32px;
-    line-height: 44.8px;  
+    line-height: 44.8px;
   }
-  
+
   .p_description {
     font-size: 18px;
     line-height: 21.6px;
   }
 
   .bg_wrapper {
-    height: 400px;
-    padding-top: 32px;
-    background-size: 520px;
+    height: 771px;
+    padding-top: 84px;
   }
 
   .nav-bar {
     padding: 0 24px;
   }
 
-  .main-section__wrapper {
-    height: 100vw;
-    max-height: 560px;
-    min-height: 480px;
+  .header-home h2,
+  .main-footer h2 {
+    font-size: 40px;
+    line-height: 56px;
   }
- 
+
   .feature__keyword {
     margin-bottom: 8px;
   }
-  
+
   .feature__title {
     margin-bottom: 16px;
   }
 
   .main-footer__wrapper {
-    margin-top: 32px;
+    height: 927px;
+    padding-top: 201px;
+    margin-top: 40px;
+  }
+
+  .main-footer br {
+    display: inline;
   }
 
   footer {
-    padding: 32px 24px;
+    padding: 32px 104px;
   }
-
 }
 
-@media screen and (max-width: 375px){
+/* 모바일 */
+
+@media screen and (max-width: 767px) {
   .h2_title {
     font-size: 24px;
-    line-height: 33.6px;  
+    line-height: 33.6px;
   }
-    
+
   .p_description {
     font-size: 16px;
     line-height: 19.2px;
   }
 
   .bg_wrapper {
-    height: 320px;
-    background-size: 100vw;
+    height: 540px;
+    padding-top: 48px;
+    background-size: 626.12px;
   }
-  
+
   .nav-bar {
     padding: 0 16px;
   }
-  
+
   .nav-bar__logo {
     content: url(image-resources/img_logo.png);
   }
 
   .header-home {
-    width: 100%;
+    gap: 18px;
+    text-align: center;
   }
 
-  .main-section__wrapper {
-    height: 340px;
+  .header-home,
+  .main-footer {
+    padding: 0;
+  }
+
+  .header-home h2,
+  .main-footer h2 {
+    font-size: 32px;
+    line-height: 44.8px;
+  }
+
+  .header-home br,
+  .main-footer br {
+    display: inline;
   }
-    
+
   .feature__keyword {
     margin-bottom: 4px;
   }
-  
+
   .feature__title {
     margin-bottom: 8px;
   }
-  
+
   .main-footer__wrapper {
-    margin-top: 32px;
+    padding-top: 121px;
+    margin-top: 24px;
+    background-size: 497.91px;
   }
 
   footer {
-    padding: 32px 16px;
+    padding: 32px;
   }
 
   .footer-container {
     align-content: space-between;
+    height: 100%;
+    position: relative;
   }
 
-  .footer-container .copyright {
-    order: 3;
+  .copyright {
+    position: absolute;
+    left: 0;
+    bottom: 0;
   }
-
-  footer .info {
-    order: 1;
-  }
-  footer .contact-list {
-    order: 2;
-  }
-}
+}