개발일지/웹개발
자주 쓰이는 CSS 연습하기
E-room
2022. 6. 29. 00:05
728x90
간단한 로그인 페이지를 만들며 css를 연습해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<style>
.mytitle {
color: white;
width: 300px;
height: 200px;
background-image: url("이미지 주소");/* 배경으로 사용할 것을 지정하는 문구 */
background-size: cover;/* 사이즈를 정하는 문구 */
background-position: center;/* 배경의 위치를 정하는 문구 */
border-radius: 10px;/* 모깍기 */
text-align: center;/* 글자의 위치를 지정해주는 문구 */
padding-top: 40px;/* 안쪽 여백 */
}
.login {
margin: 20px auto;/* 바깥여백 지정 => 바깥여백이 페이지 이므로 login의 위치 */
width: 300px;/* margin과 세트 */
}
</style>
</head>
<body>
<div class="login">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<div>
<p>ID: <input type="text"></p>
<p>PW: <input type="text"></p>
</div>
<button>로그인하기</button>
</div>
</body>
</html>배경(background)로 이미지를 사용하고 싶을 때
background-image: url("이미지 주소");
background-size: cover;
background-position: center;
위 3줄을 세트로 많이 사용한다.
만들어둔 로그인 화면의 위치 조정할 때
width를 주고, margin: auto를 사용 (가운데)
728x90