diff --git a/images/carrot_panda.png b/images/carrot_panda.png
new file mode 100644
index 000000000..80299c07e
Binary files /dev/null and b/images/carrot_panda.png differ
diff --git "a/images/\355\214\220\353\213\244\354\226\274\352\265\264.png" b/images/panda_face.png
similarity index 100%
rename from "images/\355\214\220\353\213\244\354\226\274\352\265\264.png"
rename to images/panda_face.png
diff --git a/index.html b/index.html
index aa73153cb..d0a32c93e 100644
--- a/index.html
+++ b/index.html
@@ -6,14 +6,14 @@
     <meta property="og:url" content="https://panda-market-choiys.netlify.app/">
     <meta property="og:title" content="판다마켓">
     <meta property="og:type" content="website">
-    <meta property="og:image" content="https://panda-market-choiys.netlify.app/preview_img.png">
+    <meta property="og:image" content="https://panda-market-choiys.netlify.app/images/carrot_panda.png">
     <meta property="og:description" content="일상의 모든 물건을 거래해보세요">
     <title>판다마켓</title>
     <link rel="stylesheet" href="home.css">
     <link rel="stylesheet" href="home_tablet.css">
     <link rel="stylesheet" href="global.css">
     <link rel="stylesheet" href="home_mobile.css">
-    <link rel="icon" href="images/판다얼굴.png" />
+    <link rel="icon" href="images/panda_face.png" />
 </head>
 <body>
   <header>
diff --git a/login.css b/login.css
index 326fff173..2e8071ca0 100644
--- a/login.css
+++ b/login.css
@@ -1,5 +1,6 @@
 * {
     box-sizing: border-box;
+    word-break: keep-all;
 }
 
 .logo {
@@ -55,6 +56,16 @@ button:focus {
     background-color: #3692FF;
 }
 
+.error {
+    color: red;
+    margin-left: 15px;
+    font-size: 14px;
+}
+
+.hide {
+    display: none;
+}
+
 #signup-pw,
 #signup-pwcheck {
     background: url('images/non_visibility.png') no-repeat 5px center;
@@ -63,6 +74,13 @@ button:focus {
     background-color: #F3F4F6;
 }
 
+.visibility {
+    background: url('images/visibility.png') no-repeat 5px center;
+    background-position : 97%;
+    background-size: 27px;
+    background-color: #F3F4F6;
+}
+
 
 button {
     width: 100%;
diff --git a/login.html b/login.html
index 1e4f8266c..2d558c442 100644
--- a/login.html
+++ b/login.html
@@ -6,7 +6,9 @@
     <title>판다마켓 로그인</title>
     <link rel="stylesheet" href="login.css">
     <link rel="stylesheet" href="global.css">
-    <link rel="icon" href="images/판다얼굴.png" />
+    <link rel="stylesheet" href="login_tablet.css">
+    <link rel="stylesheet" href="login_mobile.css">
+    <link rel="icon" href="images/panda_face.png" />
 </head>
 <body>
     <header>
@@ -19,13 +21,16 @@
             <label for="signup-email">이메일</lable>
             <input id="signup-email" name="email" type="email" 
                 placeholder="이메일을 입력해주세요" required>
+            <div class="error blank-message hide">이메일을 입력해주세요.</div>
+            <div class="error invalid-message hide">잘못된 이메일 형식입니다.</div>    
         
             <label for="signup-pw">비밀번호</lable>
                 <input id="signup-pw" name="pw" type="password" 
                 placeholder="비밀번호를 입력해주세요" required>
-            
+            <div class="error blank-message3 hide">비밀번호를 입력해주세요.</div>
+            <div class="error longer-message hide">비밀번호를 8자 이상 입력해주세요.</div>    
             <div class="login-btn">
-            <a href=#><button>로그인</button></a>
+            <a href=/items.html><button>로그인</button></a>
             </div>
         </form>
         <div class="easy-login">
@@ -39,6 +44,7 @@ <h3>간편 로그인하기</h3>
             판다마켓이 처음이신가요?
             <span><a href="/signup.html">회원가입</a></span>
         </div>
+        <script src="login_valid_check.js"></script>
     </main>
 </body>
 </html>
diff --git a/login_mobile.css b/login_mobile.css
new file mode 100644
index 000000000..8f0631e3c
--- /dev/null
+++ b/login_mobile.css
@@ -0,0 +1,43 @@
+@media (max-width : 767px) {
+    body {
+        font-size: 16px;
+        padding: 0 16px;
+    }
+
+    .logo {
+        width: auto;
+    }
+
+    .logo img {
+        margin: 20px auto;
+        height: 66px;
+    }
+
+    form {
+        margin: 16px auto;
+        width: 100%;
+    }
+    
+    label {
+        color: #1F2937;
+        display: block;
+        margin: 16px 0 8px;
+        font-size: 14px;
+    }
+
+    input {
+        font-size: 16px;
+        width: 100%;
+    }
+
+    button {
+        width: 100%;
+        height: 56px;
+        font-size: 16px;
+    }
+
+    .easy-login {
+        font-size: 14px;
+    }
+
+}
\ No newline at end of file
diff --git a/login_tablet.css b/login_tablet.css
new file mode 100644
index 000000000..1f2a66787
--- /dev/null
+++ b/login_tablet.css
@@ -0,0 +1,38 @@
+@media (max-width : 1199px) {
+    body {
+        font-size: 16px;
+        padding: 0 50px;
+    }
+
+    .logo {
+        width: auto;
+    }
+
+    form {
+        margin: 16px auto;
+        width: 100%;
+    }
+    
+    label {
+        color: #1F2937;
+        display: block;
+        margin: 16px 0 8px;
+        font-size: 14px;
+    }
+
+    input {
+        font-size: 16px;
+        width: 100%;
+    }
+
+    button {
+        width: 100%;
+        height: 56px;
+        font-size: 16px;
+    }
+
+    .easy-login {
+        font-size: 14px;
+    }
+
+}
\ No newline at end of file
diff --git a/login_valid_check.js b/login_valid_check.js
new file mode 100644
index 000000000..6a1f6697f
--- /dev/null
+++ b/login_valid_check.js
@@ -0,0 +1,72 @@
+// 아이디 입력창
+const inputEmail = document.querySelector('#signup-email'); 
+const blankMessage = document.querySelector('.blank-message'); 
+const invalidMessage = document.querySelector('.invalid-message');
+const check = document.querySelector('.check');
+
+// 비밀번호 입력창
+const inputPassword = document.querySelector('#signup-pw');
+const longerMessage = document.querySelector('.longer-message'); 
+const blankMessage3 = document.querySelector('.blank-message3');
+
+//유효성 검사 함수
+
+function pwLength(value) {
+    return value.length >= 8;
+  }
+
+function isEmail(value) {
+  const pattern = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/;
+  if (pattern.test(value) === false) { 
+    return false; 
+  } else { return true; }
+}
+
+function emailCheck () {
+  if (inputEmail.value.length == 0) {
+    blankMessage.classList.remove('hide');
+  } else if (isEmail(inputEmail.value) === false) {
+    // 유효한 이메일 형식이 아닐 경우
+        invalidMessage.classList.remove('hide'); 
+        blankMessage.classList.add('hide'); 
+      }
+      // 조건을 모두 만족할 경우
+      else {
+        invalidMessage.classList.add('hide'); 
+        blankMessage.classList.add('hide'); 
+      }
+};
+
+function pwCheck() {
+  // 값을 입력하지 않은 경우
+  if (inputPassword.value.length == 0) {
+    longerMessage.classList.remove('hide');
+    blankMessage3.classList.add('hide'); 
+    } else if (pwLength(inputPassword.value) === false) {
+    // 8자 이상이 아닐 경우
+        longerMessage.classList.remove('hide');
+        blankMessage3.classList.add('hide'); 
+      }
+      // 조건을 모두 만족할 경우
+      else {
+        longerMessage.classList.add('hide'); 
+        blankMessage3.classList.add('hide'); 
+      }
+  }
+
+  inputEmail.addEventListener("focusout", emailCheck);
+  inputPassword.addEventListener("focusout", pwCheck);
+
+
+  const inputValue = document.querySelector('input');
+  const signupButton = document.querySelector('.login-btn');
+  const errorMessage = document.querySelectorAll('.error');
+
+  //입력값을 모두 채웠을 때 + 에러메지시가 뜨지 않을 때 버튼 활성화
+  function activeButton() {
+    if (inputValue.value.length !== 0 && errorMessage.classList.contains('hide') ) {
+      signupButton.classList.add('.button-active');
+    } else {
+      signupButton.classList.add('.button-active');
+    }
+  }
\ No newline at end of file
diff --git a/signin.html b/signin.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/signup.css b/signup.css
index d8ef29205..c9a977c13 100644
--- a/signup.css
+++ b/signup.css
@@ -1,5 +1,6 @@
 * {
     box-sizing: border-box;
+    word-break: keep-all;
 }
 
 .logo {
@@ -51,7 +52,7 @@ input:focus {
     border: 2px solid #3692FF;
 }
 
-button:focus {
+.button-active {
     background-color: #3692FF;
 }
 
@@ -63,6 +64,22 @@ button:focus {
     background-color: #F3F4F6;
 }
 
+.visibility {
+    background: url('images/visibility.png') no-repeat 5px center;
+    background-position : 97%;
+    background-size: 27px;
+    background-color: #F3F4F6;
+}
+
+.error {
+    color: red;
+    margin-left: 15px;
+    font-size: 14px;
+}
+
+.hide {
+    display: none;
+}
 
 button {
     width: 100%;
diff --git a/signup.html b/signup.html
index bfcb6658b..d8776c0d8 100644
--- a/signup.html
+++ b/signup.html
@@ -6,7 +6,9 @@
     <title>판다마켓 회원가입</title>
     <link rel="stylesheet" href="signup.css">
     <link rel="stylesheet" href="global.css">
-    <link rel="icon" href="images/판다얼굴.png" />
+    <link rel="stylesheet" href="signup_tablet.css">
+    <link rel="stylesheet" href="signup_mobile.css">
+    <link rel="icon" href="images/panda_face.png" />
 </head>
 <body>
     <header>
@@ -19,37 +21,43 @@
             <label for="signup-email">이메일</lable>
             <input id="signup-email" name="email" type="email" 
                 placeholder="이메일을 입력해주세요" required>
+            <div class="error blank-message hide">이메일을 입력해주세요.</div>
+            <div class="error invalid-message hide">잘못된 이메일 형식입니다.</div>    
+    
             
         
             <label for="signup-nick">닉네임</lable>
             <input id="signup-nick" name="nick"
                 placeholder="닉네임을 입력해주세요" required>
-            
+            <div class="error blank-message2 hide">닉네임을 입력해주세요.</div>  
         
             <label for="signup-pw">비밀번호</lable>
                 <input id="signup-pw" name="pw" type="password" 
                 placeholder="비밀번호를 입력해주세요" required>
-            
+            <div class="error blank-message3 hide">비밀번호를 입력해주세요.</div>
+            <div class="error longer-message hide">비밀번호를 8자 이상 입력해주세요.</div>    
         
             <label for="signup-pwcheck">비밀번호 확인</lable>
                 <input id="signup-pwcheck" name="pwcheck" type="password" 
                 placeholder="비밀번호를 다시 한 번 입력해주세요" required>
+            <div class="error mismatch-message hide">비밀번호가 일치하지 않습니다.</div> 
 
             <div class="signup-btn">
-            <a href=#><button>회원가입</button></a>
+            <a href=/signin.html><button>회원가입</button></a>
             </div>
         </form>
         <div class="easy-login">
             <h3>간편 로그인하기</h3>
             <div>
-                <a href="https://www.google.com/"><img rel="icon" src="google.png"></a>
-                <a href="https://www.kakao.com/"><img rel="icon" src="kakao.png"></a>
+                <a href="https://www.google.com/"><img rel="icon" src="/images/google.png"></a>
+                <a href="https://www.kakao.com/"><img rel="icon" src="/images/kakao.png"></a>
             </div>
         </div>
         <div class="already-user">
             이미 회원이신가요?
             <span><a href="/login.html">로그인</a></span>
         </div>
+        <script src="signup_valid_check.js"></script>
     </main>
 </body>
 </html>
\ No newline at end of file
diff --git a/signup_mobile.css b/signup_mobile.css
new file mode 100644
index 000000000..8f0631e3c
--- /dev/null
+++ b/signup_mobile.css
@@ -0,0 +1,43 @@
+@media (max-width : 767px) {
+    body {
+        font-size: 16px;
+        padding: 0 16px;
+    }
+
+    .logo {
+        width: auto;
+    }
+
+    .logo img {
+        margin: 20px auto;
+        height: 66px;
+    }
+
+    form {
+        margin: 16px auto;
+        width: 100%;
+    }
+    
+    label {
+        color: #1F2937;
+        display: block;
+        margin: 16px 0 8px;
+        font-size: 14px;
+    }
+
+    input {
+        font-size: 16px;
+        width: 100%;
+    }
+
+    button {
+        width: 100%;
+        height: 56px;
+        font-size: 16px;
+    }
+
+    .easy-login {
+        font-size: 14px;
+    }
+
+}
\ No newline at end of file
diff --git a/signup_tablet.css b/signup_tablet.css
new file mode 100644
index 000000000..1f2a66787
--- /dev/null
+++ b/signup_tablet.css
@@ -0,0 +1,38 @@
+@media (max-width : 1199px) {
+    body {
+        font-size: 16px;
+        padding: 0 50px;
+    }
+
+    .logo {
+        width: auto;
+    }
+
+    form {
+        margin: 16px auto;
+        width: 100%;
+    }
+    
+    label {
+        color: #1F2937;
+        display: block;
+        margin: 16px 0 8px;
+        font-size: 14px;
+    }
+
+    input {
+        font-size: 16px;
+        width: 100%;
+    }
+
+    button {
+        width: 100%;
+        height: 56px;
+        font-size: 16px;
+    }
+
+    .easy-login {
+        font-size: 14px;
+    }
+
+}
\ No newline at end of file
diff --git a/signup_valid_check.js b/signup_valid_check.js
new file mode 100644
index 000000000..c4d9e439c
--- /dev/null
+++ b/signup_valid_check.js
@@ -0,0 +1,101 @@
+
+// 아이디 입력창
+const inputEmail = document.querySelector('#signup-email'); 
+const blankMessage = document.querySelector('.blank-message'); 
+const invalidMessage = document.querySelector('.invalid-message');
+const check = document.querySelector('.check');
+
+//닉네임 입력창
+const inputNickname = document.querySelector('#signup-nick'); 
+const blankMessage2 = document.querySelector('.blank-message2'); 
+
+// 비밀번호 입력창
+const inputPassword = document.querySelector('#signup-pw');
+const inputPasswordRetype = document.querySelector('#signup-pwcheck'); 
+const mismatchMessage = document.querySelector('.mismatch-message'); 
+const longerMessage = document.querySelector('.longer-message'); 
+const blankMessage3 = document.querySelector('.blank-message3');
+
+//유효성 검사 함수
+
+function pwLength(value) {
+    return value.length >= 8;
+  }
+
+function isEmail(value) {
+  const pattern = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/;
+  if (pattern.test(value) === false) { 
+    return false; 
+  } else { return true; }
+}
+
+function isMatch(password1, password2) {
+    return password1 === password2;
+  }
+
+function emailCheck () {
+  if (inputEmail.value.length == 0) {
+    blankMessage.classList.remove('hide');
+  } else if (isEmail(inputEmail.value) === false) {
+    // 유효한 이메일 형식이 아닐 경우
+        invalidMessage.classList.remove('hide'); 
+        blankMessage.classList.add('hide'); 
+      }
+      // 조건을 모두 만족할 경우
+      else {
+        invalidMessage.classList.add('hide'); 
+        blankMessage.classList.add('hide'); 
+      }
+};
+
+function nickCheck() {
+  if (inputNickname.value.length == 0) {
+    blankMessage2.classList.remove('hide');
+  } else {
+      blankMessage2.classList.add('hide'); 
+    }
+}
+
+function pwCheck() {
+  // 값을 입력하지 않은 경우
+  if (inputPassword.value.length == 0) {
+    longerMessage.classList.remove('hide');
+    blankMessage3.classList.add('hide'); 
+    } else if (pwLength(inputPassword.value) === false) {
+    // 8자 이상이 아닐 경우
+        longerMessage.classList.remove('hide');
+        blankMessage3.classList.add('hide'); 
+      }
+      // 조건을 모두 만족할 경우
+      else {
+        longerMessage.classList.add('hide'); 
+        blankMessage3.classList.add('hide'); 
+      }
+  }
+
+function pwMatchCheck() {
+  if (isMatch(inputPasswordRetype.value, inputPassword.value) === false) {
+    mismatchMessage.classList.remove('hide');
+    } else {
+        mismatchMessage.classList.add('hide'); 
+      }
+  }
+
+  inputEmail.addEventListener("focusout", emailCheck);
+  inputNickname.addEventListener("focusout", nickCheck);
+  inputPassword.addEventListener("focusout", pwCheck);
+  inputPasswordRetype.addEventListener("focusout", pwMatchCheck);
+
+
+  const inputValue = document.querySelector('input');
+  const signupButton = document.querySelector('.signup-btn');
+  const errorMessage = document.querySelectorAll('.error');
+
+  //입력값을 모두 채웠을 때 + 에러메지시가 뜨지 않을 때 버튼 활성화
+  function activeButton() {
+    if (inputValue.value.length !== 0 && errorMessage.classList.contains('hide') ) {
+      signupButton.classList.add('.button-active');
+    } else {
+      signupButton.classList.add('.button-active');
+    }
+  }
\ No newline at end of file
