웹개발 기초: html & css
로그인 페이지 만들기
div 배경이미지 넣을 때 쓰이는 css 세 가지 속성:
background-image:
background-position:
background-size: div 내용 가운데 정렬할 때 쓰이는 css 네 가지 속성:
display:
flex-direction:
justify-content:
align-items:
마치 명찰을 달아주듯 이러한 css 속성들을 적용하고 싶은 html 뼈대에 달아줘야 한다. 꾸미고 싶은 body 밑 특정 html 태그에 class를 지정해주고 head 밑에 style 태그를 달고 그 밑에 .class { }를 처넣어 적용한다. class에 속성을 부여할 땐 class명 앞에 .을 붙인다.
<!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>
.my_title {
background-image: url('https://static.spartacodingclub.kr/media/main_carousel/1kq0i51tuqc2kfzp.png');
background-position: center;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 300px;
height: 250px;
border-radius: 10px;
}
.wrap {
height: 800px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.btn {
background-color: brown;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 300px;
height: 50px;
border-radius: 10px;
border: none;
}
</style>
</head>
<body>
<div class="wrap">
<div class="my_title">
<h1>로그인 페이지</h1>
<h3>코딩의 시작, 띵동코딩</h3>
</div>
<p>ID : <input type = "text"></p>
<p>PW : <input type = "password"></p>
<button class="btn">로그인 하기</button>
</div>
</body>
</html>
coding을 잘하고 싶은 아저씨