*html은 글 속성과 박스 속성이 있음
글은 가로, 세로 개념이 존재하지 않음 ->버튼
이때, 글의 위치를 변경하는 것이 'display:block임'
*클래스에는 중첩이라는 것이 존재함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<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;
background-position:center;
border-radius:10px;
padding-top:20px ;
}
.contents{
width:300px;
margin:auto;
}
.mybtn{
width:100px;
margin:auto;
}
.red-font{
color:red;
font-size:20px;
}
</style>
</head>
<body>
<div class="contents">
<div class ="mytitle">
<h1 >로그인 페이지</h1>
<h5>아이디, 패스워드를 입력해주세요</h5>
</div>
<p>ID: <input type="text" /></p>
<p>PW: <input type="text" /></p>
<button class="mybtn red-font"> 로그인하기 </button>
</div>
</body>
</html>
'폭넓은 영역 > 웹페이지만들기_초보' 카테고리의 다른 글
| 웹개발종합반1-5 CSS기초 (0) | 2022.01.04 |
|---|---|
| 웹개발종합반1-4 로그인 페이지 만들기 (0) | 2022.01.04 |
| 웹페이지 만들기 기초- 이론 (0) | 2022.01.03 |
| 웹개발종합반-1주차-01(HTML기초) (0) | 2022.01.03 |
