로그인 페이지 만들기
로그인 페이지 만들기 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>순코수딩 | 로그인페이지</title>
<!--구글 폰트 링크 달기-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<style>
/*전체 폰트 지정하기*/
* {
font-family: 'Jua', sans-serif;
}
.mytitle {
color: white;
width: 300px;
height: 200px;
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-position: center;
background-size: cover;
border-radius: 10px;
text-align: center;
padding-top: 40px;
}
.wrap {
/*위치를 지정해준다 margin: 가운데로 옮겨 준다.*/
margin: 10px auto;
width: 300px;
}
/*로그인 버튼*/
.btn {
width: 100px;
margin: auto;
display: block; /*로그인 박스를 박스로 지정해서 위치를 변경해준다.*/
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<div>
<p>
ID: <input type="text"/>
</p>
<p>
PW: <input type="password"/>
</p>
</div>
<button class="btn">로그인하기</button>
</div>
</body>
</body>
</html>