diff --git a/common-responsive.css b/common-responsive.css
new file mode 100644
index 00000000..86da77bd
--- /dev/null
+++ b/common-responsive.css
@@ -0,0 +1,45 @@
+/* common */
+@media (min-width:375px)and (max-width:1199px){
+    footer-div{
+        flex-flow:wrap;
+    }
+    .main-left, .main-right {
+        width: 100%;
+        background-color: #ffffff;
+        flex-wrap: wrap;
+    }
+    .main-div, .main-div-right {
+        padding: 0 20px;
+    }
+    .main-img{
+        width: 100%;
+    }
+    .top-section {
+        height: auto;
+    }
+    .top-div{
+        flex-direction: column;
+        align-items: center;
+    }
+    .top-content{
+        width: 100%;
+    }
+    .content {
+        width: 100%;
+        height: 300px;
+        text-align: center;
+    }
+    .img-home{
+        width: 100%;
+   } 
+   .footer-div {
+    flex-flow:wrap;
+   }
+   .br-none{
+    display: none;
+   }
+  
+}
+
+
+
diff --git a/common.js b/common.js
new file mode 100644
index 00000000..f6d5c507
--- /dev/null
+++ b/common.js
@@ -0,0 +1,77 @@
+export const pwd = document.getElementById('login-pwd');
+export const email = document.getElementById('login-email');
+export const nick = document.getElementById('login-nickname');
+export const confirmPwd = document.getElementById('login-pwd-confirm');
+export const loginBtn = document.getElementById('login-btn');
+export const signBtn= document.getElementById('sign-btn');
+export const visibilityIcon = document.querySelectorAll(".visibility-off");
+
+// 에러 메세지 추가
+export function addErrorMessage(target,message) {
+    removeErrorMessage(target);
+    const error = document.createElement("div");
+    error.textContent= message;
+    error.classList.add("alert-empty");
+    target.classList.add("empty");
+    target.after(error);
+  }
+  
+  // 에러 메세지 삭제
+  export function removeErrorMessage(target){
+    const error = target.nextElementSibling;
+    if(error && error.classList.contains("alert-empty")){
+      error.remove();
+    }
+    target.classList.remove("empty");
+  }
+
+  // 비밀번호 체크
+export function checkedPwd(){
+    if(pwd.value==''){
+      addErrorMessage(pwd,'비밀번호를 입력해주세요');
+    }else if (pwd.value.length < 8) {
+      addErrorMessage(pwd, "비밀번호를 8자 이상 입력해주세요");
+    }
+  }
+  
+  // 이메일 체크
+  export function checkedEmail(){
+    if(email.value===''){
+      addErrorMessage(email,'이메일을 입력해주세요');
+    }else if(!email.value.includes('@')||email.value.split("@")[1] === ""||email.value.split("@")[0] === ""){
+      addErrorMessage(email,'잘못된 이메일 형식입니다.')
+    }
+  }
+
+  // 비밀번호 확인
+export function confirmPassword() {
+
+    if (confirmPwd.value === "") {
+      addErrorMessage(confirmPwd, "비밀번호를 입력해주세요");
+    } else if (pwd.value !== confirmPwd.value) {
+      addErrorMessage(confirmPwd, "비밀번호가 일치하지 않습니다.");
+    }
+  }
+
+  // 닉네임 체크
+export function checkedNickname(){
+    if(nick.value===''){
+      addErrorMessage(nick,'닉네임을 입력해주세요');
+    }
+  }
+  
+
+  // 비밀번호 보이기 아이콘 변화
+export function visibileIcon(event,icon,input) {
+    event.preventDefault(); 
+    icon.classList.toggle("on");
+    if (icon.classList.contains("on")) {
+        icon.setAttribute("src", "image/visibility_on.png");
+        input.setAttribute("type", "text");
+    } else {
+        icon.setAttribute("src", "image/visibility_off.png");
+        input.setAttribute("type", "password");
+    }
+}
+
+
diff --git a/image/visibility_on.png b/image/visibility_on.png
new file mode 100644
index 00000000..e2b65cba
Binary files /dev/null and b/image/visibility_on.png differ
diff --git a/index-responsive.css b/index-responsive.css
new file mode 100644
index 00000000..5f306389
--- /dev/null
+++ b/index-responsive.css
@@ -0,0 +1,22 @@
+/* Mobile */
+@media (min-width:375px) and (max-width:767px){
+    .main-header-div {
+        margin: 0 16px;
+    }
+   .img-home{
+        width: 100%;
+   }
+   
+}
+/* Tablet */
+@media (min-width:768px) and (max-width:1199px){
+    .main-header-div {
+        margin: 0 24px;
+    }
+    .main-left, .main-right {
+        max-width: 900px;
+    }
+    .br-none-title {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index fa6b500c..fe2c7dd7 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,8 @@
         <meta property="og:description" content="일상의 모든 물건을 거래해보세요">
        
         <link rel="stylesheet" href="style.css">
-        <link rel="stylesheet" href="responsive.css">
+        <link rel="stylesheet" href="common-responsive.css">
+        <link rel="stylesheet" href="index-responsive.css">
         <link rel="stylesheet" href="root.css">
         <link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
     </head>
@@ -23,7 +24,7 @@
         <section class="top-section">
             <div class="top-div">
                 <div class="content">
-                    <div class="top-content">일상의 모든 물건을<br>거래해 보세요</div>
+                    <div class="top-content">일상의 모든 물건을<br class="br-none-title">거래해 보세요</div>
                     <a href="/items.html" class="top-btn">구경하러 가기</a>
                 </div>
                 <img src="image/img_home.png" class="img-home" alt="배너이미지">
@@ -34,7 +35,7 @@
                 <img src="image/main_01.png" class="main-img" alt="첫 번째 본문 이미지">
                 <div class="main-div">
                     <div class="title">Hot Item</div>
-                    <div class="main-content-bold">인기 상품을<br> 확인해 보세요</div>
+                    <div class="main-content-bold">인기 상품을<br class="br-none"> 확인해 보세요</div>
                     <div class="main-content">가장 HOT한 중고거래 물품을<br> 판다 마켓에서 확인해 보세요</div>
                 </div>
             </div>
@@ -42,7 +43,7 @@
                 <img src="image/main_02.png" class="main-img" alt="두 번째 본문 이미지">
                 <div class="main-div-right">
                     <div class="title">Search</div>
-                    <div class="main-content-bold">구매를 원하는<br>상품을 검색하세요</div>
+                    <div class="main-content-bold">구매를 원하는<br class="br-none">상품을 검색하세요</div>
                     <div class="main-content">구매하고 싶은 물품은 검색해서<br> 쉽게 찾아보세요</div>
                 </div>
                 
@@ -51,7 +52,7 @@
                 <img src="image/main_03.png" class="main-img" alt="세 번째 본문 이미지">
                 <div class="main-div">
                     <div class="title">Register</div>
-                    <div class="main-content-bold">판매를 원하는<br> 상품을 등록하세요</div>
+                    <div class="main-content-bold">판매를 원하는<br class="br-none"> 상품을 등록하세요</div>
                     <div class="main-content">어떤 물건이든 판매하고 싶은 상품을<br> 쉽게 등록하세요</div>
                 </div>
             </div>
diff --git a/login.html b/login.html
index 0fe0ce5c..0814de23 100644
--- a/login.html
+++ b/login.html
@@ -3,10 +3,12 @@
     <head>
         <meta charset="utf-8">
         <link rel="stylesheet" href="sign.css">
-        <link rel="stylesheet" href="responsive.css">
+        <link rel="stylesheet" href="common-responsive.css">
+        <link rel="stylesheet" href="sign-responsive.css">
         <link rel="stylesheet" href="root.css">
         <link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
         <title>로그인</title>
+        
     </head>
     <body class="sign-body">
         <a href="/"><img src="image/logo_large.png" alt="로그인 로고" class="sign-logo"></a>
@@ -25,7 +27,7 @@
                     placeholder="비밀번호를 입력해주세요" class="sign-form-input" required/>
                 <img src="image/visibility_off.png" class="visibility-off" alt="비밀번호 숨기기">
             </div>
-            <button class="sign-btn">로그인</button>
+            <a class="sign-btn" id="login-btn">로그인</a>
             
         </form>
         <div class="simple-login-div">
@@ -38,5 +40,7 @@
         <div class="footer">판다마켓이 처음이신가요?
             <a href="/signup.html" class="footer-signup-link">회원가입</a>
         </div>
+        <script type="module" src="login.js"></script>
     </body>
+    
 </html>
\ No newline at end of file
diff --git a/login.js b/login.js
new file mode 100644
index 00000000..213d91d7
--- /dev/null
+++ b/login.js
@@ -0,0 +1,40 @@
+import {pwd,email,loginBtn,visibilityIcon} from './common.js'
+import {removeErrorMessage,visibileIcon,checkedPwd,checkedEmail} from './common.js'
+
+// 비밀번호 체크
+pwd.addEventListener('focusout',checkedPwd);
+pwd.addEventListener("focusin", () => removeErrorMessage(pwd));
+
+// 이메일 체크
+email.addEventListener("focusout",checkedEmail);
+email.addEventListener('focusin',()=>removeErrorMessage(email));
+
+// 비밀번호 보이기 아이콘 변화
+visibilityIcon.forEach((icon,i) => {
+    icon.addEventListener("mousedown", ()=>visibileIcon(event,
+      visibilityIcon[i]
+      ,visibilityIcon[i].parentElement.firstElementChild));
+  });
+
+// 로그인 버튼 체크
+function blockLoginBtn(){
+  if(document.querySelector('.alert-empty')||email.value==='' 
+    || !email.value.includes('@')||email.value.split("@")[1] === ""||email.value.split("@")[0] === ""
+    ||pwd.value==''||pwd.value.length < 8){
+    loginBtn.classList.remove('ok-btn')
+    loginBtn.removeAttribute('href');
+  }else{
+    loginBtn.classList.add('ok-btn')
+    loginBtn.setAttribute('href','items.html')
+  }
+}
+
+loginBtn.addEventListener('click',()=>{
+    checkedEmail();
+    checkedPwd();
+    blockLoginBtn();
+  });
+
+loginBtn.addEventListener('mouseover',blockLoginBtn);
+
+
diff --git a/responsive.css b/responsive.css
deleted file mode 100644
index 3b920d43..00000000
--- a/responsive.css
+++ /dev/null
@@ -1,84 +0,0 @@
-/*style.css*/
-/* common */
-@media (min-width:375px)and (max-width:1199px){
-    footer-div{
-        flex-flow:wrap;
-    }
-    .main-left, .main-right {
-        width: 100%;
-        background-color: #ffffff;
-        flex-wrap: wrap;
-    }
-    .main-div, .main-div-right {
-        padding: 0 20px;
-    }
-    .main-img{
-        width: 100%;
-    }
-    .top-section {
-        height: auto;
-    }
-    .top-div{
-        flex-direction: column;
-        align-items: center;
-    }
-    .content {
-        height: 40vh;
-        text-align: center;
-    }
-    .img-home{
-        width: 100%;
-   } 
-   .footer-div {
-    flex-flow:wrap;
-   }
-  
-}
-/* Mobile */
-@media (min-width:375px) and (max-width:767px){
-    .main-header-div {
-        margin: 0 16px;
-    }
-   .img-home{
-        width: 100%;
-   } 
-   
-}
-/* Tablet */
-@media (min-width:768px) and (max-width:1199px){
-    .main-header-div {
-        margin: 0 24px;
-    }
-    .main-left, .main-right {
-        max-width: 900px;
-    }
-}
-
-/* sign.css */
-
-/* Mobile */
-@media (min-width:375px) and (max-width:767px) {
-    .sign-body {
-         width: 100%;
-         padding-left: 16px;
-         padding-right: 16px;
-    }
-    .sign-logo{
-        width: 55%;
-        height: 20%;
-    }
-
-    .sign-form  * , .sign-logo {
-        max-width: 400px;
-        display: block;
-        margin-left:  auto;
-        margin-right: auto;
-    }
-
-    .simple-login-div{
-        max-width: 400px;
-        margin-left:  auto;
-        margin-right: auto;
-    }
-
-}
diff --git a/root.css b/root.css
index 8a9a3727..f5636ec7 100644
--- a/root.css
+++ b/root.css
@@ -10,4 +10,7 @@
     --gray50 : #f9fafb;
     --blue:#3692ff;
     --white:#ffffff;
-  }
\ No newline at end of file
+    --red :#F74747;
+  }
+
+  
\ No newline at end of file
diff --git a/sign-responsive.css b/sign-responsive.css
new file mode 100644
index 00000000..e5ec08ef
--- /dev/null
+++ b/sign-responsive.css
@@ -0,0 +1,26 @@
+/* Mobile */
+@media (min-width:375px) and (max-width:767px) {
+    .sign-body {
+         width: 100%;
+         padding-left: 16px;
+         padding-right: 16px;
+    }
+    .sign-logo{
+        width: 55%;
+        height: 20%;
+    }
+
+    .sign-form  * , .sign-logo {
+        max-width: 400px;
+        display: block;
+        margin-left:  auto;
+        margin-right: auto;
+    }
+
+    .simple-login-div{
+        max-width: 400px;
+        margin-left:  auto;
+        margin-right: auto;
+    }
+
+}
diff --git a/sign.css b/sign.css
index 20d09137..6559e99a 100644
--- a/sign.css
+++ b/sign.css
@@ -69,12 +69,11 @@
     font-size: 20px;
     font-weight: 500;
     color: var(--gray100);
-    cursor:pointer;
+    text-align: center;
+    display: inline-block;
+    text-decoration: none;
   }
 
-  .sign-btn:hover {
-    background-color: var(--blue);
-  }
 
 .simple-login-div {
   display: flex;
@@ -84,6 +83,7 @@
   padding :16px 23px;
   width: 100%;
   background-color: #e6f2ff;
+  border-radius: 8px;
 }
 
 .simple-login-txt {
@@ -115,8 +115,24 @@
   color: var(--blue);
 }
 
-
+/*이벤트발생 시 적용할 css*/
 .footer-signup-link:hover {
   color : #1251aa
 }
 
+.sign-form-input.empty {
+  margin-bottom: 0;
+  outline : 1px solid var(--red);
+}
+.alert-empty{
+  font-size: 14px;
+  color: var(--red);
+  margin-top: 10px;
+  margin-bottom: 16px;
+  padding : 0 15px; 
+}
+.ok-btn:hover{
+  background-color: var(--blue);
+  cursor:pointer;
+  text-decoration: none;
+}
diff --git a/signin.html b/signin.html
new file mode 100644
index 00000000..d01f779f
--- /dev/null
+++ b/signin.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/signup.html b/signup.html
index d69610b0..cf3c7099 100644
--- a/signup.html
+++ b/signup.html
@@ -3,7 +3,8 @@
     <head>
         <meta charset="utf-8">
         <link rel="stylesheet" href="sign.css">
-        <link rel="stylesheet" href="responsive.css">
+        <link rel="stylesheet" href="common-responsive.css">
+        <link rel="stylesheet" href="sign-responsive.css">
         <link rel="stylesheet" href="root.css">
         <link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
         <title>회원가입</title>
@@ -41,7 +42,7 @@
                 <img src="image/visibility_off.png" class="visibility-off" alt="비밀번호 숨기기">
             </div>
 
-            <button class="sign-btn">회원가입</button>
+            <a class="sign-btn" id="sign-btn">회원가입</a>
             
         </form>
         <div class="simple-login-div">
@@ -54,5 +55,6 @@
         <div class="footer">이미 회원이신가요?
             <a href="/login.html" class="footer-signup-link">로그인</a>
         </div>
+        <script type="module" src="signup.js"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/signup.js b/signup.js
new file mode 100644
index 00000000..42bcd73d
--- /dev/null
+++ b/signup.js
@@ -0,0 +1,57 @@
+import {pwd,email,nick,confirmPwd,signBtn,visibilityIcon} from './common.js'
+import {checkedPwd,checkedEmail,removeErrorMessage,visibileIcon,confirmPassword,checkedNickname} from './common.js'
+const pwdParent = document.querySelector('.password-container');
+
+// 비밀번호 체크
+pwd.addEventListener('focusout',checkedPwd);
+pwd.addEventListener("focusin", () => removeErrorMessage(pwd));
+
+// 이메일 체크
+email.addEventListener("focusout",checkedEmail);
+email.addEventListener('focusin',()=>removeErrorMessage(email));
+
+
+// 닉네임 체크
+nick.addEventListener("focusout",checkedNickname);
+nick.addEventListener("focusin",()=>removeErrorMessage(nick));
+
+// 비밀번호 확인
+confirmPwd.addEventListener("focusout", confirmPassword);
+confirmPwd.addEventListener("focusin", () => removeErrorMessage(confirmPwd));
+
+// 비밀번호 보이기 아이콘 변화
+  visibilityIcon.forEach((icon,i) => {
+    icon.addEventListener("mousedown", ()=>visibileIcon(event,
+      visibilityIcon[i]
+      ,visibilityIcon[i].parentElement.firstElementChild));
+  });
+
+// 회원가입 버튼 체크
+function blockLoginBtn(){
+  if(document.querySelector('.alert-empty')||email.value==='' 
+    || !email.value.includes('@')||email.value.split("@")[1] === ""||email.value.split("@")[0] === ""
+    ||pwd.value==''||pwd.value.length < 8
+    ||nick.value===''||pwd.value !== confirmPwd.value){
+      signBtn.classList.remove('ok-btn')
+      signBtn.removeAttribute('href');
+  }else{
+    signBtn.classList.add('ok-btn')
+    signBtn.setAttribute('href','signin.html')
+  }
+}
+signBtn.addEventListener('click',()=>{
+    checkedEmail();
+    checkedPwd();
+    checkedNickname();
+    confirmPassword()
+    blockLoginBtn();
+  });
+
+  signBtn.addEventListener('mouseover',blockLoginBtn);
+
+
+
+
+
+
+