[중요 포인트]
- div테그로 묶어서 진행하는 것이 효율적
- div로 묶은 다음 반드시 background-color로 표시하여야 사이즈, 여백 등을 조정할 때 유용함
- 여백 css margin과 padding의 차이점을 이해
- margin은 박스 밖의 여백을 담당
- padding은 박으 안의 여백을 담당
- margind을 설정할 때 margin-top or margin-bottom 등 조정할 수 있지만 auto로 지정하여 여백을 최대화 할 수 있기도 하고, margin : 00px 00px 이런식으로 위에부터 시계방향으로 설정할 수 있음
[많이 사용한 css 보기]
- width : 가로 크기 -> px로 크기 조정
- background-color : 배경 색깔 조정
- height : 세로 크기
- color : 폰트 색깔
- text-align : center로 지정하면 텍스트가 가운데 정렬됨
- 배경 조정시 항상 함께 다니는 3개 css
- background-image : url("") 로 진행
- background-size : cover로 지정하면 사진이 커버로 들어감
- background-position : center로 지정하면 배경사진이 가운데로 정렬됨
- border-radius : px로 지정하고 박스 모서시를 곡선으로 조정함
- 박스를 가운데로 정렬하기 위해서 아래와 같은 작업이 필요
- margin을 auto로 지정하고 display : block 으로 지정하여야 함
- css class테그는 중첩이 가능함 그래서 class="mybtn red-color" 이런식으로 띄어쓰기를 하여 중첩 적용할 수 있음
[코드 보기]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
<style>
.mytitle {
background-color: green;
width: 300px;
height: 200px;
color: white;
text-align: center;
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size : cover;
background-position: center;
border-radius: 10px;
padding-top: 20px;
}
.wrap {
width: 300px;
margin: auto;
}
.mybtn {
width: 100px;
margin: auto;
display: block;
}
.red-color {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 패스워드를 입력해주세요</h5>
</div>
<p>ID: <input type="text"/></p>
<p>pw: <input type="text"/></p>
<button class="mybtn red-color">로그인하기</button>
</div>
</body>
</html>
야하마 군산악기사 운영자