로그인화면.html 1.73 KB
<!DOCTYPE html>
<html>
<head>
	<title>로그인화면</title>
</head>
<style>
body {
	background-color: rgb(230, 243, 255);
}
img {
	display:block;
	margin:auto;
}
input[type=text] {
    width: 20%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 3px solid #ccc;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
	font-family: '배달의민족 도현';
}
input[type=text]:focus {
    border: 3px solid #555;
}
input[type=password] {
    width: 20%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 3px solid #ccc;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
	margin-right: 7px; 
}
input[type=password]:focus {
    border: 3px solid #555;
}
#btn1 {
	width: 120px;
	height: 45px;
	font-size:25px;
	font-family: '배달의민족 도현';
	color: gray;
	background: white;
	border: solid 5px white;
	border-radius: 5px;
}
#btn2 {
	width: 150px;
	height: 47px;
	font-size:25px;
	font-family: '배달의민족 도현';
	color: gray;
	background: white;
	border: solid 5px white;
	border-radius: 5px;
}
h2 {
	font-family: '배달의민족 도현';
}

</style>


<body>

<br>
<img style="border-radius:15px;" width="300px;" src="캡처6.png"/>
<form>

<br>
<center><H2>ID&nbsp;&nbsp;<input style="border-radius:10px;" type="text" name="id" placeholder="ID 입력" required><br></H2></center>
<center><H2>PW&nbsp;<input style="border-radius:10px;" type="password" name="password" placeholder="비밀번호 입력" required><br></H2></center>
<br>

<center><button id="btn1">로그인</button></center><br>
<center><button id="btn2">회원가입</button></center><br>

<br>
<img width="100;" height="70;" align="bottom;" src="khu.png"/>

</form>


</body>

</html>