728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<title>신호등</title>
<meta charset="UTF-8">
<style>
body > form {
width: 400px;
background-color: gray;
}
body > form > label {
display: block;
}
body > form > label:nth-child(1){
background-color: black;
color: white;
font-size: 50px;
padding: 20px;
}
body > form > label:nth-child(2){
background-color: rgb(214, 234, 248);
padding: 30px;
}
body > form > div{
background-color: rgb(214, 234, 248);
padding-left: 30px;
padding-bottom: 20px;
padding-top: 0px;
}
body > form > label:nth-child(3){
background-color: rgb(133, 193, 233 );
padding: 20px;
}
.button {
background-color: rgb(52, 152, 219);
border-radius: 5px;
display: inline-block;
padding: 5px 10px;
color: white;
font-size: 20px;
font-weight: lighter;
}
</style>
</head>
<body>
<form>
<label>로그인</label>
<label>
<span><input type="email" autofocus name="email" placeholder="이메일" type="email" size="35"></span>
<span><input type="password" name="password" placeholder="비밀번호" type="password" size="35"></span>
<div><input type="radio">이메일 주소 기억하기</div>
<div class="button">로그인</div>
</label>
<label>
<div>아직 계정이 없으신가요? <a href="#">회원가입</a></div>
<div>계정 정보를 분실하셨나요? <a href="#">계정 복구</a></div>
</label>
</form>
</body>
</html>
728x90
반응형
'정보 > WEB' 카테고리의 다른 글
| background-color(배경색) (0) | 2022.12.21 |
|---|---|
| style(중간정렬하기) (0) | 2022.12.21 |
| style활용(신호등모양배열) (0) | 2022.12.21 |
| style활용(회원가입+약관선택) (0) | 2022.12.21 |
| style활용(약관선택) (0) | 2022.12.21 |