diff --git a/base.css b/base.css
index 069cd575..a1b48259 100644
--- a/base.css
+++ b/base.css
@@ -37,9 +37,6 @@ html {
   font-size: 1.6rem;
   font-weight: 400;
 }
-.letter-sp-04 {
-  letter-spacing: .4rem;
-}
 
 
 /* buttons */
@@ -59,6 +56,8 @@ button:active {
 }
 button.inactive {
   background: var(--color-gray-400);
+  pointer-events: none;
+  cursor: default;
 }
 button.large {
   width: 100%;
diff --git a/index.html b/index.html
index e8ba5d36..46842112 100644
--- a/index.html
+++ b/index.html
@@ -6,13 +6,13 @@
     <!-- facebook, kakao, naver... -->
     <meta property="og:title" content="판다 마켓" />
     <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
-    <meta property="og:image" content="https://basic-my-pandamarket.netlify.app/Images/preview_pandamarket.png" />
+    <meta property="og:image" content="/Images/preview_pandamarket.png" />
     <meta property="og:url" content="https://basic-my-pandamarket.netlify.app/" />
     <!-- twitter -->
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="판다 마켓" />
     <meta name="twitter:description" content="일상의 모든 물건을 거래해보세요" />
-    <meta name="twitter:image" content="https://basic-my-pandamarket.netlify.app/Images/preview_pandamarket.png" />
+    <meta name="twitter:image" content="/Images/preview_pandamarket.png" />
 
     <title>판다마켓</title>
     <link
diff --git a/login.css b/login.css
index f60d37c9..443383db 100644
--- a/login.css
+++ b/login.css
@@ -13,7 +13,7 @@ body {
   max-width: 64rem;
   margin: 0 auto;
 }
-.login-content, #login_form, #sigunp_form {
+.login-content, #login_form, #signup_form {
   display: flex;
   flex-direction: column;
   gap: 2.4rem;
@@ -33,25 +33,38 @@ body {
   border: none;
   padding: 1.6rem 2.4rem;
 }
+.login-input:invalid {
+  border: 1px solid var(--color-error);
+}
+.invalid-input {
+  color: var(--color-error);
+  font-size: 1.4rem;
+  font-weight: 600;
+  padding: .8rem 0 0 1.6rem;
+}
 
-.password {
+input[id^='signup_password'][type='password']:not(:placeholder-shown){
+  letter-spacing: 0.4rem;
+}
+.password, .password-check {
   position: relative;
 }
 .btn-show {
   position: absolute;
   height: 2.4rem;
   width: 2.4rem;
-  bottom: 0;
+  top: 3.4rem;
   right: 0;
   padding: 0;
   margin: 1.6rem 2.4rem;
+  background-color: transparent;
 }
-.btn-show, .btn-show:hover {
+.btn-show, .btn-show:hover, .btn-show:active {
   background: url("Images/ic_eye_closed.svg");
   background-repeat: no-repeat;
   background-position: center;
 }
-.btn-show:active {
+.btn-show.visible {
   background: url("Images/ic_eye.svg");
 }
 
diff --git a/login.html b/login.html
index 5e2c2ec2..7fa81cb0 100644
--- a/login.html
+++ b/login.html
@@ -15,17 +15,17 @@
       </a>
     </div>
     <main class="login-content">
-      <form id="login_form" action="">
+      <form id="login_form" action="/items.html">
         <div class="email">
           <label for="login_email" class="login-label">이메일</label>
-          <input id="login_email" name="login_email" type="email" class="login-input f-regular" required autofocus/>
+          <input id="login_email" name="login_email" type="email" placeholder="이메일을 입력해주세요" class="login-input f-regular" required autofocus/>
         </div>
         <div class="password">
           <label for="login_password" class="login-label">비밀번호</label>
-          <input id="login_password" name="login_password" type="password" class="login-input f-regular letter-sp-04" required/>
+          <input id="login_password" name="login_password" type="password" minlength="8" placeholder="비밀번호를 입력해주세요" class="login-input f-regular" required/>
           <button type="button" class="btn-show"></button>
         </div>
-        <button class="large">로그인</button>
+        <button class="large inactive">로그인</button>
       </form>
       <div class="login-social">
         간편 로그인하기
@@ -43,5 +43,7 @@
         <a href="/signup.html">회원가입</a>
       </div>
     </main>
+    <script src="passwordToggle.js"></script>
+    <script src="validation.js"></script>
   </body>
 </html>
diff --git a/passwordToggle.js b/passwordToggle.js
new file mode 100644
index 00000000..a9d4a389
--- /dev/null
+++ b/passwordToggle.js
@@ -0,0 +1,10 @@
+function togglePassword(e) {
+  const input = e.target.parentElement.querySelector("input");
+  const isOpened = input.type === "text";
+  input.type = isOpened ? "password" : "text";
+  e.target.classList.toggle("visible", !isOpened);
+}
+
+const btns = document.querySelectorAll(".btn-show").forEach((btn) => {
+  btn.addEventListener("click", (e) => togglePassword(e));
+});
diff --git a/signup.html b/signup.html
index 1e9e19c0..4cb64bf8 100644
--- a/signup.html
+++ b/signup.html
@@ -15,26 +15,26 @@
       </a>
     </div>
     <main class="login-content">
-      <form id="sigunp_form" action="">
+      <form id="signup_form" action="/login.html">
         <div class="email">
-          <label for="sigunp_email" class="login-label">이메일</label>
-          <input id="sigunp_email" name="sigunp_email" type="email" class="login-input f-regular" required autofocus/>
+          <label for="signup_email" class="login-label">이메일</label>
+          <input id="signup_email" name="signup_email" type="email" placeholder="이메일을 입력해주세요" class="login-input f-regular" required autofocus/>
         </div>
         <div class="name">
-          <label for="sigunp_name" class="login-label">닉네임</label>
-          <input id="sigunp_name" name="sigunp_name" class="login-input f-regular" required/>
+          <label for="signup_name" class="login-label">닉네임</label>
+          <input id="signup_name" name="signup_name" placeholder="닉네임을 입력해주세요" class="login-input f-regular" required/>
         </div>
         <div class="password">
-          <label for="sigunp_password" class="login-label">비밀번호</label>
-          <input id="sigunp_password" name="sigunp_password" type="password" class="login-input f-regular letter-sp-04" required/>
+          <label for="signup_password" class="login-label">비밀번호</label>
+          <input id="signup_password" name="signup_password" type="password" minlength="8" placeholder="비밀번호를 입력해주세요" class="login-input f-regular" required/>
           <button type="button" class="btn-show"></button>
         </div>
-        <div class="password">
-          <label for="sigunp_password_check" class="login-label">비밀번호 확인</label>
-          <input id="sigunp_password_check" name="sigunp_password_check" type="password" class="login-input f-regular letter-sp-04" required/>
+        <div class="password-check">
+          <label for="signup_password_check" class="login-label">비밀번호 확인</label>
+          <input id="signup_password_check" name="signup_password_check" type="password" minlength="8"  placeholder="비밀번호를 다시 한 번 입력해주세요" class="login-input f-regular" required/>
           <button type="button" class="btn-show"></button>
         </div>
-        <button class="large">회원가입</button>
+        <button class="large inactive">회원가입</button>
       </form>
       <div class="login-social">
         간편 로그인하기
@@ -52,5 +52,7 @@
         <a href="/login.html ">로그인</a>
       </div>
     </main>
+    <script src="passwordToggle.js"></script>
+    <script src="validation.js"></script>
   </body>
 </html>
diff --git a/validation.js b/validation.js
new file mode 100644
index 00000000..c34bbf8f
--- /dev/null
+++ b/validation.js
@@ -0,0 +1,56 @@
+function validateInput(el, label) {
+  const { validity } = el;
+  if (!validity.valid) {
+    if (validity.valueMissing) return `${label}을 입력해주세요`;
+    if (validity.typeMismatch) return "잘못된 이메일 형식입니다";
+    if (validity.tooShort) return "비밀번호를 8자 이상 입력해주세요";
+    if (validity.customError) return el.validationMessage;
+  }
+  return "";
+}
+
+function setPasswordValidity() {
+  const [pw, pwCheck] = document.querySelectorAll("input[id^=signup_password]");
+  if (pw.value !== pwCheck.value) {
+    pwCheck.setCustomValidity("비밀번호가 일치하지 않습니다");
+  } else {
+    pwCheck.setCustomValidity("");
+  }
+}
+
+function showValidMessage(el) {
+  const inputEl = el;
+  const parentEl = inputEl.parentElement;
+  const targetLabel = parentEl.firstElementChild.textContent;
+
+  let p = parentEl.querySelector("p");
+  let errMsg = validateInput(inputEl, targetLabel);
+
+  if (errMsg) {
+    if (!p) {
+      p = document.createElement("p");
+      p.classList.add("invalid-input");
+      inputEl.after(p);
+    }
+    p.textContent = errMsg;
+  } else {
+    p && p.remove();
+  }
+}
+
+function checkBtnState(form, inputs) {
+  form.id === "signup_form" && setPasswordValidity();
+  const btn = form.querySelector("button.large");
+  const isValid = [...inputs].every((input) => input.validity.valid);
+  btn.classList.toggle("inactive", !isValid);
+}
+
+const form = document.querySelector("form");
+const inputs = form.querySelectorAll("input");
+inputs.forEach((inputEl) => {
+  inputEl.addEventListener("input", () => {
+    checkBtnState(form, inputs);
+    inputEl.id === "signup_password_check" && showValidMessage(inputEl);
+  });
+  inputEl.addEventListener("focusout", (e) => showValidMessage(e.target));
+});