[html] 실습 - 로그인 구현2

 

 

 

 

 

 

 

1. 로그인 기초 구현

 

 

login.html

 

<input type="text" placeholder="ID">
<input type="password" placeholder="password">
<button>Login</button>
<label> <input type="checkbox">Keep Login </label>

<link rel="stylesheet" href="style.css">

 

 

style.css

 

 

.input {
    display: block;
    width: 200px;
    height: 30px;
    text-indent: 10px;
    border: 2px solid lightgray;
  }
  #id-input {
    border-radius: 10px 10px 0 0;
  }
  #password-input {
    border-radius: 0 0 10px 10px;
    border-top: 0;
    margin-bottom: 5px;
  }
  .focus:focus {
    background-color: rgb(227, 237, 255);
  }
  
  #login-button {
    display: block;
    height: 35px;
    width: 200px;
    border-radius: 10px;
    border: 2px solid rgb(132, 175, 255);
    background-color: rgb(58, 133, 255);
    transition: 0.1s;
    color: white;
    font-weight: 900;
  }
  #login-button:hover {
    background-color: rgb(136, 179, 255);
  }
  #login-button:active {
    transform: translateY(1px);
    background-color: rgb(188, 213, 255);
    border: 2px solid rgb(167, 197, 255);
  }
  
  #keep-checkbox {
    margin-top: 10px;
    margin-left: 50px;
  }
  
  body {
    margin: 30px;
  }

 

 

 

 

 

2. id 추가하기

 

 

<input id="id-input" type="text" placeholder="ID">

 

 

 

 

 

3. class 추가하기

 

 

<input id="id-input" class="input" type="text" placeholder="ID">

 

 

 

 

4. 전체 적용하기

 

 

<input id="id-input" class="input focus" type="text" placeholder="ID">
<input id="password-input" class="input focus" type="password" placeholder="password">
<button id="login-button">Login</button>
<label> <input id="keep-checkbox" type="checkbox">Keep Login </label>

<link rel="stylesheet" href="style.css">