[연습할 것들] h1, h5, background-image, background-size, background-position color, width, height, border-radius, margin, padding
- margin은 바깥 여백을, padding은 내 안쪽 여백을 준다.
- div에 색깔을 넣고, 직접 사용해서 차이 비교
<style>
.mytitle {
background-color: green;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력하세요</h5>
</div>
background 컬러지정시 한 줄 전체를 다 먹는다. >> 그래서 먼저 박스 사이즈을 정해준다.
사이즈를 맞추고 > 모서리 둥글게 정리 > 글자색도 변경 > 글자를 중앙 정렬(text-align: center)> 위쪽으로 여백(padding)을 주고 >> 이미지를 넣어준다.
<style>
.mytitle {
background-color: green;
width: 300px;
height: 200px;
border-radius: 10px;
color: white;
text-align: center;
padding: 30px 0px 0px 0px;
background-image: url('');
background-position: center;
background-size: cover;
}
</style>
이제 박스 안 이미지가 완성되었다면 전체 화면에 맞게 중앙으로 배치하도록 한다. 그렇게 하려면 먼저 [박스 씌우고 >> 양쪽 여백 조정] >> 전체 div를 만들고 class="wrap" 설정 >> width >> margin: auto
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력하세요</h5>
</div>
<p>ID : <input type="text" /></p>
<p>PW : <input type="text" /></p>
<button>로그인하기</button>
</div>
<style>
.wrap {
background-color: green;
}
</style>
.wrap {
width: 300px;
margin: 20px auto 0px auto;
}
background-color는 디자인 간격 조정을 위한 것이니 작업을 마쳤다면 빼준다.
'Web development' 카테고리의 다른 글
| 코드_주석 달기 (0) | 2023.07.10 |
|---|---|
| 구글 웹폰트_코드 적용 (0) | 2023.07.10 |
| 로그인 페이지 만들기_ CSS 기본 (0) | 2023.07.10 |
| 로그인 페이지 만들기_1. html (0) | 2023.07.10 |
| html 구조 (0) | 2023.07.08 |
