login 페이지 홈으로 변경

front-end/src/views/Home.vue

 <template>
   <div class="container">
-        <div class="admin">
-            <img src="../assets/img/icon_admin.png" alt="" id="icon_admin">
-            <h1>관리자페이지</h1>
-            <p>Admin page</p>
-            <button type="button" @click="$router.push('login')">시작</button>
+    <form action="">
+      <h1>LOGIN</h1>
+      <div class="form-group">
+        <label for="">ID</label>
+        <input type="text" class="form-control" required>
       </div>
-        <div class="user">
-            <img src="../assets/img/icon_user.png" alt="" id="icon_user">
-            <h1>사용자페이지</h1>
-            <p>User page</p>
-            <button type="button" @click="$router.push('user')">시작</button>
+      <div class="form-group">
+        <label for="">PASSWORD</label>
+        <input type="password" class="form-control" required>
       </div>
+      <input type="submit" class="btn" value="LOGIN">
+    </form>
   </div>
 </template>
 
@@ -20,85 +20,65 @@ export default {
   
 }
 </script>
-
 <style>
-.container {
-    display: flex;
-    justify-content: center;
-    margin-top: 150px;
-}
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
+  *{
+    margin: 0; 
+    padding: 0; 
+    box-sizing: border-box;
+   }
 
-.admin {
-    display: inline-block;
-    text-align: center;
-    background-color: #448ccb;
-    width: 600px;
-    height: 600px;
-    margin-right: 10px;
-    border-radius: 30px;
-    box-shadow: 2px 2px 30px #bababa;
   
-}
+  .container{
+    margin: auto;
 
-.admin img {
-    margin-top: 150px;
-}
-
-.admin h1 {
-    font-size: 50px;
-    color: #fff;
+    width: 500px;
+    max-width: 90%;
+  }
 
-}
-
-.admin p {
-    font-size: 30px;
-    color: #fff;
-
-}
-
-.container button{
-    font-size:16px;
-    width: 200px;
-    height: 50px;
-    border: solid 2px #fff;
-    border-radius: 8px;
-    background-color: rgba(0, 0,0, 0);
-    color: #fff;
-    padding: 5px;
-
-}
+  .container form{
     
-.container button:hover{
-    background-color: #fff;
-    color:#448ccb
+    width: 100%;
+    height: 100%;
+    padding:20px;
+    background: white;
+    border-radius: 4px;
+    box-shadow: 0 8px 16px rgba(0,0,0,.3);
+  }
 
-}
-
-.user {
-    display: inline-block;
+  .container form h1{
     text-align: center;
-    background-color: #3cb878;
-    width: 600px;
-    height: 600px;
-    margin-left: 10px;
-    border-radius: 30px;
-    box-shadow: 2px 2px 30px #bababa;
-
-}
-
-.user img {
-    margin-top: 150px;
-}
-
-.user h1 {
-    font-size: 50px;
-    color: #fff;
-    
-}
-
-.user p {
-    font-size: 30px;
-    color: #fff;
-
-}
+    margin-bottom: 24px;
+    color: #222;
+  }
+
+  .container form .form-control{
+    width:100%;
+    height: 40px;
+    background: white;
+    border-radius: 4px;
+    border:1px solid silver;
+    margin: 10px 0 18px 0;
+    padding: 0 10px;
+  }
+
+  .container form .btn{
+    margin-left: 50%;
+    transform: translateX(-50%);
+    width: 120px;
+    height: 34px;
+    border:none;
+    outline: none;
+    background: skyblue;
+    cursor: pointer;
+    font-size: 16px;
+    text-transform: uppercase;
+    color:white;
+    border-radius: 4px;
+    transition: .3s;
+  }
+
+  .container form .btn:hover{
+    opacity: .7;
+  }
 </style>
\ No newline at end of file