<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>로그인</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
.form-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#login-form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#login-form input, #login-form button { =====>같은 위치와 크기 공통인부분
margin: 10px 0;
padding: 10px;
font-size: 14px;
width: 300px;
box-sizing: border-box; /* 패딩과 테두리를 포함한 크기 설정 */
}
#login-form button {
background-color: red;
color: white;
border: none;
cursor: pointer;
}
#login-form button:hover {
background-color: darkred;
}
</style>
</head>
<body>
<h1>LINK 로그인</h1>
<div class="form-container">
<form id="login-form">
<input type="email" id="email" name="email" placeholder="이메일" required>
<input type="password" id="password" name="password" placeholder="비밀번호" required>
<button type="submit">로그인</button>
</form>
</div>
</body>
</html>