codeit-bootcamp-frontend · kich555 · Nov 13, 2024 · Nov 2, 2024 · Nov 2, 2024 · Nov 2, 2024
diff --git a/form.css b/form.css
@@ -131,4 +131,22 @@ input:focus {
   font-size: 14px;
   font-weight: 500;
   color: var(--blue);
+}
+
+@media (max-width: 767px) {
+  .login-container,
+  .signup-container {
+    padding: 16px;
+    max-width: 400px;
+    width: 100%;
+    height: 100%;
+  }
+
+  .logo-img {
+    text-align: center;
+  }
+
+  .logo-img img {
+    width: 57%;
+  }
 }
diff --git a/index.html b/index.html
@@ -3,6 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:image" content="/img/og_img.png" />
+    <meta property="og:title" content="판다 마켓" />
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
     <link rel="stylesheet" href="style.css" />
     <title>판다마켓</title>
   </head>
@@ -18,15 +21,17 @@
       <main>
         <section class="banner">
           <div class="banner-wrapper">
-            <span>일상의 모든 물건을<br />거래해 보세요</span>
+            <span class="dynamic-text"
+              >일상의 모든 물건을 <br />거래해 보세요</span
+            >
             <a href="/items" class="item-link">구경하러 가기</a>
           </div>
         </section>
         <section class="main-content">
           <img src="img/feature1-image.png" alt="메인 이미지 1" />
           <div>
             <p class="main-content-tag">Hot item</p>
-            <h4>인기 상품을<br />확인해 보세요</h4>
+            <h4 class="dynamic-text">인기 상품을 <br />확인해 보세요</h4>
             <p class="main-description">
               가장 HOT한 중고거래 상품을<br />판다마켓에서 확인해 보세요
             </p>
@@ -36,7 +41,7 @@ <h4>인기 상품을<br />확인해 보세요</h4>
         <section class="main-content">
           <div>
             <p class="main-content-tag">Search</p>
-            <h4>구매를 원하는<br />상품을 검색하세요</h4>
+            <h4 class="dynamic-text">구매를 원하는 <br />상품을 검색하세요</h4>
             <p class="main-description">
               구매하고 싶은 물품은 검색해서 <br />쉽게 찾아보세요.
             </p>
@@ -48,7 +53,7 @@ <h4>구매를 원하는<br />상품을 검색하세요</h4>
           <img src="img/feature3-image.png" alt="메인 이미지 3" />
           <div>
             <p class="main-content-tag">Register</p>
-            <h4>판매를 원하는<br />상품을 등록하세요</h4>
+            <h4 class="dynamic-text">판매를 원하는 <br />상품을 등록하세요</h4>
             <p class="main-description">
               어떤 물건이든 판매하고 싶은 상품을
               <br />쉽게 등록하세요
@@ -73,16 +78,16 @@ <h4>판매를 원하는<br />상품을 등록하세요</h4>
             <span><a href="/faq">FAQ</a></span>
           </div>
           <div class="footer-social">
-            <a href="https://facebook.com" target="_blank"
+            <a href="https://facebook.com" target="_blank" rel="noreferrer"
               ><img src="img/Vector.png" alt="페이스북" class="social-link"
             /></a>
-            <a href="https://x.com" target="_blank"
+            <a href="https://x.com" target="_blank" rel="noreferrer"
               ><img src="img/Vector-1.png" alt="트위터" class="social-link"
             /></a>
-            <a href="https://youtube.com" target="_blank"
+            <a href="https://youtube.com" target="_blank" rel="noreferrer"
               ><img src="img/Vector-2.png" alt="유튜브" class="social-link"
             /></a>
-            <a href="https://instagram.com" target="_blank"
+            <a href="https://instagram.com" target="_blank" rel="noreferrer"
               ><img src="img/Vector-3.png" alt="인스타그램" class="social-link"
             /></a>
           </div>

diff --git a/login.html b/login.html
@@ -8,8 +8,7 @@
   </head>
   <body>
     <div class="login-container">
-      <a href="/"><img src="img/logo.png" alt="로고" /></a>
-
+      <a href="/" class="logo-img"><img src="img/logo.png" alt="로고" /></a>
       <form action="" method="post" class="form-container">
         <div class="input-group">
           <label for="email" class="form-label">이메일</label>
@@ -29,8 +28,8 @@
             placeholder="비밀번호를 입력해주세요"
           />
         </div>
+        <button type="submit" class="login button">로그인</button>
       </form>
-      <button class="login button">로그인</button>
       <div class="social-login">
         <p>간편 로그인 하기</p>
         <div class="social-button">

diff --git a/signup.html b/signup.html
@@ -9,8 +9,7 @@
 
   <body>
     <div class="signup-container">
-      <a href="/"><img src="img/logo.png" alt="로고" /></a>
-
+      <a href="/" class="logo-img"><img src="img/logo.png" alt="로고" /></a>
       <form action="" method="post" class="form-container">
         <div class="input-group">
           <label for="email" class="form-label">이메일</label>
@@ -48,8 +47,8 @@
             placeholder="비밀번호를 다시 한 번 입력해주세요"
           />
         </div>
+        <button type="submit" class="signup button">회원가입</button>
       </form>
-      <button class="signup button">회원가입</button>
 
       <div class="social-login">
         <p>간편 로그인 하기</p>

diff --git a/style.css b/style.css
@@ -176,4 +176,106 @@ footer {
   gap: 15px;
 }
 
+.dynamic-text br {
+  display: inline;
+}
+
+/* Tablet (1199px 이하) */
+@media (max-width: 1199px) {
+  header {
+    padding: 9px 24px;
+  }
+
+  .dynamic-text br {
+    display: none;
+  }
+
+  .banner {
+    align-items: flex-start;
+    text-align: center;
+    background-position: center bottom;
+    background-size: 65%;
+    font-size: 40px;
+  }
+
+  .main-content {
+    flex-direction: column;
+    height: auto;
+    padding: 20px;
+  }
+
+  .main-content img {
+    width: 100%;
+  }
+
+  .main-content div {
+    text-align: left;
+    width: 100%;
+  }
+
+  .main-content:nth-last-of-type(3) {
+    flex-direction: column-reverse;
+  }
+
+  .main-content:nth-last-of-type(3) div {
+    width: 100%;
+    text-align: right;
+  }
+
+  .footer-content {
+    width: 80%;
+  }
+}
 
+/* Mobile (767px 이하) */
+@media (max-width: 767px) {
+  header {
+    padding: 9px 16px;
+  }
+
+  .banner .dynamic-text br {
+    display: inline;
+  }
+
+  .banner {
+    background-size: 80%;
+    font-size: 32px;
+  }
+
+  .banner-wrapper span {
+    font-size: 32px;
+  }
+
+  .item-link {
+    padding: 12px 71px;
+  }
+
+  .main-content h4 {
+    font-size: 24px;
+  }
+
+  .main-content p {
+    font-size: 18px;
+  }
+
+  .banner-wrapper {
+    margin-top: 40px;
+  }
+  .footer-content{
+    flex-wrap: wrap;
+  }
+
+  .footer-copyright {
+    order: 3;
+  }
+
+  .footer-info {
+    margin-bottom: 40px;
+    gap: 30px;
+  }
+
+  .footer-social {
+    align-items: flex-start;
+    gap: 12px;
+  }
+}