diff --git a/index.html b/index.html
index 9ae760fc..2387a339 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>판다마켓</title>
     <link rel="stylesheet" href="스프린트미션.css" />
+    <link rel="stylesheet" href="반응형디자인적용.css" />
   </head>
   <body>
     <header>
diff --git a/login.html b/login.html
index 821bf3c1..7a9af45b 100644
--- a/login.html
+++ b/login.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>로그인</title>
     <link rel="stylesheet" href="로그인&회원가입.css" />
+    <link rel="stylesheet" href="로그인&회원가입반응형.css" />
   </head>
   <body id="body">
     <header id="main_header">
@@ -15,13 +16,21 @@
     </header>
     <main id="content">
       <label class="label">이메일</label>
-      <input type="email" class="input" placeholder="이메일을 입력해주세요" />
+      <input
+        id="email"
+        type="email"
+        class="input"
+        placeholder="이메일을 입력해주세요"
+      />
+      <p id="error_email" class="error_message"></p>
       <label class="label">비밀번호</label>
       <input
+        id="password"
         type="password"
         class="input"
         placeholder="비밀번호를 입력해주세요"
       />
+      <p id="error_password" class="error_message"></p>
       <div id="login_box">로그인</div>
       <div id="nav_footer_box">
         <p id="nav_footer_p"><b>간편 로그인하기</b></p>
@@ -36,5 +45,6 @@
     <footer id="footer">
       판다마켓이 처음이신가요? <a href="sign_up.html" id="gaip">회원가입</a>
     </footer>
+    <script src="로그인&회원가입.js"></script>
   </body>
 </html>
diff --git a/sign_up.html b/sign_up.html
index c671ca06..d44c6367 100644
--- a/sign_up.html
+++ b/sign_up.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>회원가입</title>
     <link rel="stylesheet" href="로그인&회원가입.css" />
+    <link rel="stylesheet" href="로그인&회원가입반응형.css" />
   </head>
   <body id="body">
     <header id="main_header">
@@ -15,21 +16,27 @@
     </header>
     <main id="content">
       <label class="label">이메일</label>
-      <input type="email" class="input" placeholder="이메일을 입력해주세요" />
+      <input id="email" class="input" placeholder="이메일을 입력해주세요" />
+      <p id="error_email" class="error_message"></p>
       <label class="label">닉네임</label>
       <input type="text" class="input" placeholder="닉네임을 입력해주세요" />
       <label class="label">비밀번호</label>
       <input
+        id="password"
         type="password"
         class="input"
         placeholder="비밀번호를 입력해주세요"
       />
+      <p id="error_password" class="error_message"></p>
       <label class="label">비밀번호 확인</label>
       <input
+        id="verifypassword"
         type="password"
         class="input"
         placeholder="비밀번호를 다시 한 번 입력해주세요"
       />
+      <p id="error_verifypassword" class="error_message"></p>
+
       <div id="login_box">회원가입</div>
       <div id="nav_footer_box">
         <p id="nav_footer_p"><b>간편 로그인하기</b></p>
@@ -45,4 +52,5 @@
       판다마켓이 처음이신가요? <a href="login.html" id="gaip">로그인</a>
     </footer>
   </body>
+  <script src="로그인&회원가입.js"></script>
 </html>
diff --git "a/\353\241\234\352\267\270\354\235\270&\355\232\214\354\233\220\352\260\200\354\236\205.css" "b/\353\241\234\352\267\270\354\235\270&\355\232\214\354\233\220\352\260\200\354\236\205.css"
index 68cd2a53..60fbf1ce 100644
--- "a/\353\241\234\352\267\270\354\235\270&\355\232\214\354\233\220\352\260\200\354\236\205.css"
+++ "b/\353\241\234\352\267\270\354\235\270&\355\232\214\354\233\220\352\260\200\354\236\205.css"
@@ -64,6 +64,7 @@
   color: #f3f4f6;
   font-size: 20px;
   line-height: 32px;
+  cursor: pointer;
 }
 #nav_footer_box {
   display: flex;
@@ -102,3 +103,18 @@
 #gaip {
   color: #3692ff;
 }
+.error_message {
+  color: #f74747;
+  font-size: 14px;
+  margin-bottom: 10px;
+  margin-left: 10px;
+}
+
+.input-error {
+  border: 1px solid #f74747;
+}
+
+#login_box.disable {
+  background-color: gray;
+  pointer-events: none;
+}
diff --git "a/\353\241\234\352\267\270\354\235\270&\355\232\214\354\233\220\352\260\200\354\236\205.js" "b/\353\241\234\352\267\270\354\235\270&\355\232\214\354\233\220\352\260\200\354\236\205.js"
new file mode 100644
index 00000000..0df17974
--- /dev/null
+++ "b/\353\241\234\352\267\270\354\235\270&\355\232\214\354\233\220\352\260\200\354\236\205.js"
@@ -0,0 +1,105 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const emailInput = document.getElementById("email");
+  const passwordInput = document.getElementById("password");
+  const verifypasswordInput = document.getElementById("verifypassword");
+  const loginButton = document.getElementById("login_box");
+
+  const emailError = document.getElementById("error_email");
+  const passwordError = document.getElementById("error_password");
+  const verifypasswordError = document.getElementById("error_verifypassword");
+
+  // 이메일검증 이벤트
+  if (emailInput) {
+    emailInput.addEventListener("focusout", function () {
+      const emilStatus = emailInput.value.trim();
+      if (emilStatus === "") {
+        showError(emailInput, emailError, "이메일을 입력해주세요.");
+      } else if (!emailValidate(emilStatus)) {
+        showError(emailInput, emailError, "잘못된 이메일 형식입니다.");
+      } else {
+        hideError(emailInput, emailError);
+      }
+      transLoginButton();
+    });
+  }
+  // 비밀번호 검증 이벤트
+  if (passwordInput) {
+    passwordInput.addEventListener("focusout", function () {
+      const passwordStatus = passwordInput.value.trim();
+      if (passwordStatus === "") {
+        showError(passwordInput, passwordError, "비밀번호를 입력해주세요.");
+      } else if (passwordStatus.length < 8) {
+        showError(
+          passwordInput,
+          passwordError,
+          "비밀번호를 8자리 이상으로 입력해주세요."
+        );
+      } else {
+        hideError(passwordInput, passwordError);
+      }
+      transLoginButton();
+    });
+  }
+  // 비밀번호 확인 검증 이벤트
+  if (verifypasswordInput) {
+    verifypasswordInput.addEventListener("focusout", function () {
+      const verifypasswordStatus = verifypasswordInput.value.trim();
+      const passwordStatus = passwordInput.value.trim();
+
+      if (verifypasswordStatus.length < 8) {
+        showError(
+          verifypasswordInput,
+          verifypasswordError,
+          "비밀번호를 8자리 이상으로 입력해주세요."
+        );
+      } else if (verifypasswordStatus !== passwordStatus) {
+        showError(
+          verifypasswordInput,
+          verifypasswordError,
+          "비밀번호가 일치하지 않습니다."
+        );
+      } else {
+        hideError(verifypasswordInput, verifypasswordError);
+      }
+      transLoginButton();
+    });
+  }
+  // 로그인버튼 활성/비활성
+  function transLoginButton() {
+    const emilStatus = emailInput.value.trim();
+    const passwordStatus = passwordInput.value.trim();
+    const verifypasswordStatus = verifypasswordInput.value.trim();
+    if (
+      emilStatus !== "" &&
+      emailValidate(emilStatus) &&
+      passwordStatus !== "" &&
+      passwordStatus.length >= 8 &&
+      verifypasswordStatus === passwordStatus
+    ) {
+      loginButton.classList.remove("disabled");
+    } else {
+      loginButton.classList.add("disabled");
+    }
+  }
+  // 이메일 형식 검증
+  function emailValidate(email) {
+    const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+    return re.test(email);
+  }
+  // 에러 표시
+  function showError(input, errorElement, message) {
+    input.classList.add("input-error");
+    errorElement.textContent = message;
+    errorElement.style.visibility = "visible";
+  }
+  // 에러 숨김
+  function hideError(input, errorElement) {
+    input.classList.remove("input-error");
+    errorElement.style.visibility = "hidden";
+  }
+
+  document.getElementById("login_box").addEventListener("click", function () {
+    if (!loginButton.classList.contains("disabled"))
+      window.location.href = "/items";
+  });
+});
diff --git "a/\353\241\234\352\267\270\354\235\270&\355\232\214\354\233\220\352\260\200\354\236\205\353\260\230\354\235\221\355\230\225.css" "b/\353\241\234\352\267\270\354\235\270&\355\232\214\354\233\220\352\260\200\354\236\205\353\260\230\354\235\221\355\230\225.css"
new file mode 100644
index 00000000..e13a66c5
--- /dev/null
+++ "b/\353\241\234\352\267\270\354\235\270&\355\232\214\354\233\220\352\260\200\354\236\205\353\260\230\354\235\221\355\230\225.css"
@@ -0,0 +1,6 @@
+@media (max-width: 767px) {
+  #content {
+    width: 100%;
+    margin: 0 16px;
+  }
+}
diff --git "a/\353\260\230\354\235\221\355\230\225\353\224\224\354\236\220\354\235\270\354\240\201\354\232\251.css" "b/\353\260\230\354\235\221\355\230\225\353\224\224\354\236\220\354\235\270\354\240\201\354\232\251.css"
new file mode 100644
index 00000000..16156753
--- /dev/null
+++ "b/\353\260\230\354\235\221\355\230\225\353\224\224\354\236\220\354\235\270\354\240\201\354\232\251.css"
@@ -0,0 +1,33 @@
+/* PC: 1200px 이상 */
+@media (min-width: 1200px) {
+}
+
+/* Tablet: 768px 이상 ~ 1199px 이하 */
+@media (min-width: 768px) and (max-width: 1199px) {
+  #panda {
+    position: relative;
+    left: 24px;
+  }
+  .login {
+    position: relative;
+    right: 24px;
+  }
+  footer {
+    gap: 15px;
+  }
+}
+
+/* Mobile: 375px 이상 ~ 767px 이하 */
+@media (min-width: 375px) and (max-width: 767px) {
+  #panda {
+    position: relative;
+    left: 16px;
+  }
+  .login {
+    position: relative;
+    right: 16px;
+  }
+  footer {
+    gap: 10px;
+  }
+}
