WEB.CSS

chapter35 : form_test1

GAWON 2023. 5. 19. 09:13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.d1 {
width: 100%;
height: 200px;
background-color: #C0C0C0;
text-align: center;
line-height: 200px;
}

.sp1 {
font-size: 30px;
font-weight: bold;
float: center;
}

.d2 {
width: 100%;
height: 600px;
background-color: gray;
text-align: center;
padding-top: 20px;
}

.d3 {
border: 1px solid #C0C0C0;
margin: auto;
width: 190px;
border-radius: 5px;
text-align: center;
padding: 20px;
}

.d3 > input {
margin-bottom: 10px;
}

.in {
width: 96%;
}

#btn {
width: 100%;
background-color: #C0C0C0;
margin-top: 20px;
margin-bottom: 30px;
}

```
a {
   color: white;
   text-decoration: none;
   font-size: 10px;
}

```

</style>
</head>
<body>
<div class="d1">
<span class="sp1">로그인 화면</span>
</div>
<div class="d2">
<div class="d3">
<form action="">
<input type="text" placeholder="id" class="in">
<input type="password" placeholder="password" class="in">
<input type="submit" id="btn" value="로그인"><br>
<input type="checkbox"> <a style="color: red;">로그인 유지</a>
<a href="#">아이디 / 비밀번호 찾기</a>
</form>
</div>
</div>
</body>
</html>