Basic 남만재 sprint3

global.css

@@ -2,6 +2,13 @@
   box-sizing: border-box;
 }
 
+body {
+  margin: 68px 0 0 0;
+  background-color: #ffffff;
+  color: #374151;
+  font-family: 'Noto Sans KR', sans-serif;
+}
+
 :root {
   --color-gray900: #111827;
   --color-gray800: #1f2937;
@@ -16,10 +23,10 @@
 }
 
 .button {
-  background-color: #3692ff;
+  background-color: var(--color-blue);
   padding: 16px 124px;
   border-radius: 9999px;
-  color: #f9fafb;
+  color: var(--color-gray50);
   text-decoration: none;
   font-size: 16px;
   border: none;

index.css

@@ -1,10 +1,3 @@
-body {
-  margin: 68px 0 0 0;
-  background-color: #ffffff;
-  color: #374151;
-  font-family: 'Noto Sans KR', sans-serif;
-}
-
 .nav-wrapper {
   position: fixed;
   top: 0;
@@ -36,20 +29,26 @@ body {
   width: 100%;
 }
 
+.imageSet {
+  height: auto;
+  max-width: 100%;
+  min-width: 0;
+  display: block; 
+}
+
 .login {
-  padding: 16px 34px;
-  border-radius: 10px;
+  padding: 12px 41px;
+  border-radius: 8px;
   color: #f3f4f6;
   margin: 0;
-  flex-shrink: 0;
 }
 
 .title-helper {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin: 0 auto;
-  width: 1110px;
+  /* max-width: 1110px; */
 }
 
 .title {
@@ -68,37 +67,37 @@ body {
 }
 
 .subtitle {
-  font-size: 40px;
+  font-size: clamp(32px, 4vw, 40px);
   font-weight: 700;
   margin-bottom: 40px;
 }
 
-
-.home {
-  flex-shrink: 0;
-}
-
-
 section {
   margin: 0 auto;
 }
 
 .badge {
-  font-size: 18px;
+  font-size: clamp(16px, 4vw, 18px);
   font-weight: 700;
   color: #3692ff;
   line-height: 26px;
+  width: 100%;
+}
+
+.section-content {
+  padding-right: 24px;
 }
 
 .section-title {
-  font-size: 40px;
+  white-space: normal;
+  word-break: keep-all;
+  font-size: clamp(24px, 4vw, 40px);
   font-weight: 700;
   line-height: 140%;
-  margin: 0 64px;
 }
 
 .section-subtitle {
-  font-size: 24px;
+  font-size: clamp(16px, 4vw, 24px);
   font-weight: 500;
   line-height: 32px;
 }
@@ -156,6 +155,7 @@ footer {
   padding-top: 40px;
   margin: 0 auto;
   max-width: 1110px;
+  flex-wrap: wrap;
 }
 
 .link {
@@ -167,19 +167,53 @@ footer a {
   padding: 0 10px;
 }
 
+@media (max-width: 1199px) {
+  body {
+    background-color: #fcfcfc;
+  }
 
-@media all and (max-width: 1110px) {
   .nav-inner {
-    padding: 0 20px;
+    padding: 0 24px;
   }
 
   .title-helper {
     flex-direction: column;
     align-items: center;
   }
+
+  .title-p {
+    text-align: center;
+  }
+
+  .main-container {
+    gap: 52px;
+  }
 
   .main-content {
     flex-direction: column;
-
+    align-items: normal;
+    width: 100%;
+    padding: 24px;
+  }
+
+  .footer-name {
+    color: var(--color-gray200);
+  }
+}
+
+@media (max-width: 767px) {
+  .nav-inner {
+    padding: 0 16px;
+  }
+
+  .footer {
+    padding: 40 16px
+  }
+
+  .footer-name {
+    order: 3;
+    width: 100%;
+    text-align: left;
+    margin-top: 60px;
   }
 }

index.html

@@ -33,22 +33,21 @@
             구경하러 가기
           </a>
         </div>
-        <img class="home" src="img/Img_home_top.png" alt="동산 위, 가운데 장바구니를 들고있는 판다마켓 캐릭터를 중심으로 왼 편에는 주거 건물을 표현한 그림이 있고 오른 편에는 나무 두 그루가 있다.">
+        <img class="imageSet" src="img/Img_home_top.png" alt="동산 위, 가운데 장바구니를 들고있는 판다마켓 캐릭터를 중심으로 왼 편에는 주거 건물을 표현한 그림이 있고 오른 편에는 나무 두 그루가 있다.">
       </div>
     </section>
   </header>
 
   <main>
     <div class="main-container">
       <section class="main-content hotItem">
-        <img src="img/Img_home_01.png" alt="두 판다 캐릭터의 뒷 모습과 그들 앞에 여러 품목 중 하트가 많은 상품을 고르는 듯 한 모습">
+        <img class="imageSet" src="img/Img_home_01.png" alt="두 판다 캐릭터의 뒷 모습과 그들 앞에 여러 품목 중 하트가 많은 상품을 고르는 듯 한 모습">
         <div class="section-content">
           <label class="badge">
             Hot item
           </label>
           <h2 class="section-title">
-            인기 상품을<br>
-            확인해 보세요
+            인기 상품을 확인해 보세요
           </h2>
           <p class="section-subtitle">
             가장 HOT한 중고거래 물품을 <br>
@@ -58,14 +57,13 @@ <h2 class="section-title">
       </section>
 
       <section class="main-content reverse search">
-        <img src="img/Img_home_02.png" alt="나열된 여러 아이템 중에 물음표가 그려져 있는 아이텐에 돋보기를 가져다 대는 그림">
+        <img class="imageSet" src="img/Img_home_02.png" alt="나열된 여러 아이템 중에 물음표가 그려져 있는 아이텐에 돋보기를 가져다 대는 그림">
         <div class="section-content">
           <label class="badge">
             Search
           </label>
           <h2 class="section-title">
-            구매를 원하는<br>
-            상품을 검색하세요
+            구매를 원하는 상품을 검색하세요
           </h2>
           <p class="section-subtitle">
             구매 하고싶은 물건은 검색해서<br>
@@ -75,17 +73,16 @@ <h2 class="section-title">
       </section>
 
       <section class="main-content register">
-        <img src="img/Img_home_03.png" alt="나열된 폴더 들 중 한 폴더 위에 각각 연필꽂이, 책, 하트모양 안경이 그려진 아이콘이 있고 요술봉으로 뭔가 하는 그림">
+        <img class="imageSet" src="img/Img_home_03.png" alt="나열된 폴더 들 중 한 폴더 위에 각각 연필꽂이, 책, 하트모양 안경이 그려진 아이콘이 있고 요술봉으로 뭔가 하는 그림">
         <div class="section-content">
           <label class="badge">
             Register
           </label>
           <h2 class="section-title">
-            판매를 원하는<br>
-            상품을 등록하세요
+            판매를 원하는 상품을 등록하세요
           </h2>
           <p class="section-subtitle">
-            어떤 물건이든 판매 하고싶은 상품을 <br>
+            어떤 물건이든 판매 하고싶은 상품을</br>
             쉽게 등록하세요
           </p>
         </div>
@@ -102,14 +99,14 @@ <h2 class="section-title">
             판다마켓 중고 거래
           </div>
         </div>
-        <img class="home" src="img/Img_home_bottom.png" alt="동산 위에 장바구니를 들고있는 두 팬더 캐릭터들이 만족스럽게 거래를 마친 듯 리뷰와 댓글을 다는 듯한 모습을 말풍선으로 표현하였고 기분좋게 서로 인사하며 각자 갈 길을 걷고있다.">
+        <img class="imageSet" src="img/Img_home_bottom.png" alt="동산 위에 장바구니를 들고있는 두 팬더 캐릭터들이 만족스럽게 거래를 마친 듯 리뷰와 댓글을 다는 듯한 모습을 말풍선으로 표현하였고 기분좋게 서로 인사하며 각자 갈 길을 걷고있다.">
       </div>
     </section>
   </div>
 
   <footer>
     <div class="footer">
-      <div>
+      <div class="footer-name">
         ©codeit - 2024
       </div>
       <div>

login.css

@@ -1,9 +1,3 @@
-body {
-  background-color: #ffffff;
-  color: #374151;
-  font-family: 'Noto Sans KR', sans-serif;
-}
-
 .form-container {
   display: flex;
   flex-direction: column;
@@ -15,7 +9,7 @@ body {
 
 .form-container-logo {
   width: 369px;
-  height: 132px;
+  height: 100%;
 }
 
 .form-content {
@@ -78,4 +72,21 @@ body {
 
 a {
   color: var(--color-blue)
+}
+
+@media (max-width: 767px) {
+  .form-container {
+    width: 100%;
+    max-width: 400px;
+    margin: 80px auto;
+  }
+
+  .form-container-logo {
+    width: 198px;
+    height: 100%;
+  }
+
+  .form-content-label {
+    font-size: 14px;
+  }
 }

login.html

@@ -23,14 +23,32 @@
 
     <form class="form-content">
       <label class="form-content-label" for="email">이메일</label>
-        <input class="form-content-input" id="email" name="email" placeholder="입력">
+        <input 
+          class="form-content-input" 
+          id="email" 
+          name="email" 
+          autocomplete="email"
+          placeholder="입력"
+        >
 
       <label class="form-content-label" for="password">비밀번호</label>
         <div class="input-wrapper">
-          <input class="form-content-input" id="password" name="password" type="password" placeholder="입력">
-          <img class="visibility-icon" src="/img/Property 1=Variant2.png">
+          <input 
+            class="form-content-input" 
+            id="password" 
+            name="password" 
+            type="password" 
+            autocomplete="current-password"
+            placeholder="입력"
+          >
+          <img 
+            class="visibility-icon" 
+            src="/img/Property 1=Variant2.png"
+            aria-label="비밀번호 표시"
+            aria-pressed="false"
+          >
         </div>
-      <button class="button">로그인</button>
+      <button class="button loginBtn">로그인</button>
     </form>
 
     <div class="social-login">