<style>
.mytitle {
color: white;
width: 500px;
height: 300px;
background-image: url('https://lh3.googleusercontent.com/proxy/UauoFirfyANtQdMT1xGNGm3h9FQKBg JKpVBeHlIq98BIFRqpLLFAL5cUodRb3LW8ZeN5pPYUbZjXU83BIEShkNzS96GhodyP5wNjhNEE9rBrRcUPgXIl8s0CleQ');
background-position: center;
background-size: 100%, 100%;
-> image 파일을 가져오기 위한 3가지 기본 태그
border-radius: 10px;
text-align: center;
padding-top: 40px;
}
-> image 파일 내에 텍스트 위치 설정
.wrap {
margin: auto;
width: 500px;
}
-> margin: auto; div class 설정한 image background의 여백을 좌우 동일하게 한다.
.login {
padding-left : 150px ;
}
.button1 {
margin: auto;
display : block;
}
</style>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<div class="login">
<p>
ID : <input type="text" />
</p>
<p>
PW : <input type="password" />
</p>
</div>
<button class="button1" >로그인하기</button>
</body>
</html>
'Coding' 카테고리의 다른 글
| [CSS] 부트스트랩 (bootstrap) (0) | 2021.09.02 |
|---|---|
| [FONT] 구글 웹 폰트 적용 (0) | 2021.09.02 |
| [CSS] class 사용법, 글자 색상 변경 (feat. 로그인 페이지) (0) | 2021.08.31 |
| [HTML] 로그인 페이지 (0) | 2021.08.31 |
| [HTML] BODY TAG 모음 (0) | 2021.08.31 |
