로그인 페이지 만들기
※중요) 기억해야 될 태그
- <form>
- <label>
- <input> : type = "text", "password", "submit", "checkbox"
01 예제 디자인
02 예제 속 필요한 태그 알아보기
- Login : <h2>
- Email 적는 칸 : <input type="text">
- Password 적는 칸 : <input type="password">
- 아이디 저장하기 : <label>, <input type="checkbox">
- login 버튼 : <input type="submit">
03 마크업 해보기
<body>
<div class="login-wrapper">
<h2>Login</h2>
<form method="post" action="서버의url" id="login-form">
<input type="text" name="userName" placeholder="Email">
<input type="password" name="userPassword" placeholder="Password">
<label for="remember-check">
<input type="checkbox" id="remember-check">아이디 저장하기
</label>
<input type="submit" value="Login">
</form>
</div>
</body>
1. <form> 부모 태그 안에 <input> 태그를 자식으로 넣어 마크업 한다.
2. placeholder는 입력 필드에 사용자가 어떤 값을 입력해야 하는지를 간략하게 알려주는 역할을 한다. 단어 혹은 짧은 문구가 들어가며 사용자가 입력하는 즉시 사라진다.
3. <label> 태그의 for=""와 <input> 태그의 id=""를 동일하게 적어 연결시켜주면, checkbox 혹은 '아이디 저장하기' 둘 중 아무거나 클릭해도 체크가 자동으로 활성화된다.
04 CSS 적용하기
*{
padding: 0;
margin: 0;
border: none;
}
body{
font-size: 14px;
font-family: 'Roboto', sans-serif;
}먼저 기본적으로 걸려있는 모든 속성을 reset 시켜주세요.
.login-wrapper{
width: 400px;
height: 350px;
padding: 40px;
box-sizing: border-box;
}
.login-wrapper > h2{
font-size: 24px;
color: #6A24FE;
margin-bottom: 20px;
}
#login-form > input{
width: 100%;
height: 48px;
padding: 0 10px;
box-sizing: border-box;
margin-bottom: 16px;
border-radius: 6px;
background-color: #F8F8F8;
}
#login-form > input::placeholder{
color: #D2D2D2;
}
#login-form > input[type="submit"]{
color: #fff;
font-size: 16px;
background-color: #6A24FE;
margin-top: 20px;
}기존의 checkbox를 없애고 label를 이용하여 디자인 시안과 동일하게 변경시켜줍니다.
#login-form > input[type="checkbox"]{
display: none;
}
#login-form > label{
color: #999999;
}
#login-form input[type="checkbox"] + label{
cursor: pointer;
padding-left: 26px;
background-image: url("checkbox.png");
background-repeat: no-repeat;
background-size: contain;
}
#login-form input[type="checkbox"]:checked + label{
background-image: url("checkbox-active.png");
background-repeat: no-repeat;
background-size: contain;
}checkbox 커스터마이징은 여러가지 방법이 사용되는데, 위 방법이 가장 쉬워서 종종 사용하는 편입니다.
간단한 로그인 페이지 완성!
'퍼블리싱 > html,css' 카테고리의 다른 글
| [html/css] 로그인 페이지 만들기2 (0) | 2023.04.11 |
|---|
