<head> ~ </head> 안에 <style> ~ </style>
mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것을 꼭! 기억하세요!
<style>
.mytitle {
background-color: green;
width: 300px;
height: 200px;
color: white;
text-align: center;
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover; => 백그라운드 이미지를 width와 height에 맞게 조절
background-position: center;
border-radius: 10px;
padding-top: 30px;
}
.wrap{
width: 300px ; => div의 크기를 300px로 하고
margin : auto; => 좌우마진을 자동으로해서 중앙정렬
}
.mybtn{
width: 100px;
margin : auto;
display: block; => 글자로 박스로 취급하게
}
.red-font{
color: red;
font-size: 16px;
}
</style>
<div class="wrap"> => div에 부여된 라벨
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 패스워드를 입력해주세요</h5>
</div>
<p>I D : <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button class="mybtn red-font"=> mybtn과 red-font 2개 중첩시키기 >로그인하기</button>
</div>