[김교연] Sprint3

Login/login.css

@@ -1,3 +1,5 @@
+@import url("../color.css");
+
 html,
 body {
   margin: 0;
@@ -9,7 +11,7 @@ body {
 
 main {
   margin-top: 70px;
-  background-color: #ffffff;
+  background-color: var(--white);
 }
 
 .login_main {
@@ -36,15 +38,15 @@ main {
 .login_content > h3 {
   font-size: 18px;
   font-weight: 700;
-  color: #1f2937;
+  color: var(--gray-800);
   margin-bottom: 16px;
 }
 
 /*input */
 .input_wrapper {
   display: flex;
   align-items: center;
-  background-color: #f3f4f6;
+  background-color: var(--gray-100);
   height: 40px;
   border-radius: 12px;
   padding: 16px 24px;
@@ -54,7 +56,7 @@ main {
 }
 
 .input_wrapper:focus-within {
-  border-color: #3692ff; /* 포커스 상태 테두리 색상 */
+  border-color: var(--primary-100); /* 포커스 상태 테두리 색상 */
 }
 
 input {
@@ -69,7 +71,7 @@ input::placeholder {
   font-size: 16px;
   font-weight: 400;
   line-height: 26px;
-  color: #9ca3af;
+  color: var(--gray-400);
 }
 
 .input_icon {
@@ -84,8 +86,8 @@ input::placeholder {
 .btn_login2 {
   width: 640px;
   height: 56px;
-  background-color: #9ca3af;
-  color: #f3f4f6;
+  background-color: var(--gray-400);
+  color: var(--gray-100);
   border: none;
   border-radius: 40px;
   padding: 16px 124px;
@@ -111,7 +113,7 @@ input::placeholder {
   display: flex;
   text-align: center;
   align-items: center;
-  color: #1f2937;
+  color: var(--gray-800);
   font-size: 16px;
   justify-content: space-between;
   font-weight: 500;
@@ -141,5 +143,20 @@ input::placeholder {
 }
 
 .signup-link {
-  color: #3692ff;
+  color: var(--primary-100);
+}
+
+/*모바일 */
+@media (max-width: 480px) {
+  .login_content,
+  .btn_login2,
+  .sns_login_content {
+    width: calc(100% - 32px);
+    max-width: 400px;
+  }
+
+  .sns_login {
+    width: calc(100% - 32px);
+    max-width: 400px;
+  }
 }

Login/login.html

@@ -14,14 +14,13 @@
     <main>
       <div class="login_main">
         <div class="login_header">
-          <a href="/13-Sprint-Mission/"
-            ><img src="../img/login/login_logo.svg"
-          /></a>
+          <a href="../index.html"><img src="../img/login/login_logo.svg" /></a>
         </div>
         <div class="login_content">
           <h3>이메일</h3>
           <div class="input_wrapper">
             <input
+              class="input_main"
               id="email"
               name="email"
               placeholder="이메일을 입력해주세요."
@@ -30,8 +29,9 @@ <h3>이메일</h3>
           <h3>비밀번호</h3>
           <div class="input_wrapper">
             <input
-              id="passwd"
-              name="passwd"
+              class="input_main"
+              id="password"
+              name="password"
               type="password"
               minlength="8"
               maxlength="20"
@@ -60,9 +60,7 @@ <h3>비밀번호</h3>
           </div>
           <div class="first_text">
             <a>판다마켓이 처음인가요? </a
-            ><a href="/13-Sprint-Mission/Signup/signup.html" class="signup-link"
-              >회원가입</a
-            >
+            ><a href="../Signup/signup.html" class="signup-link">회원가입</a>
           </div>
         </div>
       </div>

Signup/signup.css

@@ -1,6 +1,8 @@
+@import url("color.css");
+
 main {
   margin-top: 70px;
-  background-color: #ffffff;
+  background-color: var(--white);
 }
 
 .signup_main {

Signup/signup.html

@@ -14,9 +14,7 @@
     <main>
       <div class="signup_main">
         <div class="login_header">
-          <a href="/13-Sprint-Mission/"
-            ><img src="../img/login/login_logo.svg"
-          /></a>
+          <a href="../index.html"><img src="../img/login/login_logo.svg" /></a>
         </div>
         <div class="login_content">
           <h3>이메일</h3>
@@ -55,7 +53,7 @@ <h3>비밀번호 확인</h3>
               type="password"
               minlength="8"
               maxlength="20"
-              placeholder="비밀번호를  다시 입력해주세요."
+              placeholder="비밀번호를 다시 입력해주세요."
             />
             <img src="../img/login/btn_showpw.svg" class="input_icon" />
           </div>
@@ -80,9 +78,7 @@ <h3>비밀번호 확인</h3>
           </div>
           <div class="first_text">
             <a>이미 회원이신가요? </a
-            ><a href="/13-Sprint-Mission/Login/Login.html" class="signup-link"
-              >로그인</a
-            >
+            ><a href="../Login/Login.html" class="signup-link">로그인</a>
           </div>
         </div>
       </div>

color.css

@@ -0,0 +1,18 @@
+* {
+  --primary-50: #cfe5ff;
+  --primary-100: #3692ff;
+  --primary-200: #1967d6;
+  --primary-300: #1251aa;
+  --error: #f74747;
+  --black: #111322;
+  --white: #ffffff;
+  --gray-900: #111827;
+  --gray-800: #1f2937;
+  --gray-700: #374151;
+  --gray-600: #4b5563;
+  --gray-500: #6b7280;
+  --gray-400: #9ca3af;
+  --gray-200: #e5e7eb;
+  --gray-100: #f3f4f6;
+  --gray-950: #f9fafb;
+}

index.html

@@ -3,6 +3,8 @@
   <head>
     <title>판다마켓</title>
     <meta charset="utf-8" />
+    <!-- 반응형 웹 -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!-- css 연결 -->
     <link
       rel="stylesheet"
@@ -18,7 +20,7 @@
         <a
           ><button
             class="btn_login"
-            onclick="location.href='/13-Sprint-Mission/Login/Login.html'"
+            onclick="location.href='./Login/Login.html'"
           >
             로그인
           </button></a