이제부터 CSS로 예쁘게 꾸며줄건데요!
그전에 태그에 이름표를 붙여주는게 먼저입니다!
이름표를 붙이는 방법은 태그에 class 혹은 id를 추가해주는건데요!
평소에 코딩을 하면서! 강의들을 들으면서 들었던 의문!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인페이지</title>
<style>
body {
background-color: antiquewhite;
}
.login {
text-align: center;
margin-top: 10em;
}
.title {
color: tomato;
}
.login-form {
border: none;
border-right: 1px solid rgba(0, 0, 0, 0.5);
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
.login-form:focus {
outline: none;
}
button {
background-color: tomato;
border: 1px solid tomato;
border-radius: 10px;
color: white;
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="login">
<h1 class="title">로그인 페이지</h1>
<p>ID: <input type="text"> </p>
<p>Password: <input type="text"></p>
<button>로그인하기</button>
</div>
</body>
</html>
위 코드는 앞서 제작한 로그인 페이지를이런저런 css를 적용하여 간단하게 꾸며본 것 입니다!
→제작한 화면