위와 같은 화면을 만들어보자.
- 이전에 했던 로그인 화면에서 로그인 페이지 문구만 있는것이 아니라, 배경화면과 밑의 문구가 추가되어서 다른 공간이 사용되고 있으며 배경화면의 모서리가 둥글게 깎여있다.
- div로 공간 지정 h3~5정도로 사용한 보조문구, 그리고 img 속성으로 배경화면을 추가했다.
- id와 pw는 변한 것은 없으나. 로그인하기의 버튼 모서리가 둥글게 깎여있는 모습이 보인다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1주차 실습 간단한 로그인 화면</title>
<style>
.mytitle {
display: block;
width: 300px;
height: 200px;
text-align: center;
color: white;
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-positoin: center;
border-radius: 10px;
padding-top: 40px;
}
.wrap{
width: 300px;
margin: auto;
}
.loginbtn{
border-radius: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1> 로그인 화면 </h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<p>ID: <input type="text"></input></p>
<p>PW: <input type="text"></input></p>
<button type="button" class="loginbtn">로그인하기</button>
</div>
</body>
</html>- 로그인 화면 문구와 보조설명의 문구를 하나의 div(mytitle)로 묶어서 코딩했다.
- mytitle 에서 가로너비(width)와 세로높이(height)를 지정했고 문자의 정렬상태(text-align)을 center로 지정했다.
- 텍스트의 색깔(color)를 white라고 지정했다.
- 배경화면의 이미지(background-image)는 강의자료에 첨부된 url을 복사하여 사용했고, 배경화면의 크기는, 아까 지정한 mytitle의 가로 세로 너비안에 맞게 전체크기가 조절된(cover) 상태로 구현하며, 배경화면의 정렬 상태(background-position)은 중앙(center)로 맞춘다.
- 공간의 모서리 끝부분을 둥글게 만든다(border-radius)
- 윗쪽에 내부여백(padding-top)을 넣어서 가운데로 오게끔 이동시켰다.
- wrap에 mytitle을 감싸고 가로너비(width)를 지정한되 외부여백(margin)을 자동(auto)로 지정해서 가운데로 정렬을 했다.
- 로그인하기 버튼에 loginbtn 클래스를 추가했고 모서리끝부분을 둥글게 만든다(border-raduis)
외우지 말고, 코딩을 하면서 어떤 요소가 어떤 기능을 하는지 하나하나 살피자.
개발자 꿈나무