<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
박스모델 -> 생성하는 태그의 차지하는 공간의 모양이 네모 모양이다.
1) 바깥쪽 여백 (margin)
- 태그의 바깥쪽의 공백을 추가할 때 사용하는 속성
- 공백생성되면 그 공간은 죽는 공간 (사용할 수 없는 공간)
- margin : 값 -> 1개(사방향), 2개(상하, 좌우), 4개(상,우,하,좌), auto(가운데 정렬)
2) 테두리 (border)
- 바깥쪽 선을 제작 -> 종류, 색깔, 두께 1px solid black
3) 안쪽 여백 (padding)
- 태그의 안쪽 공백을 추가할 때 사용하는 속성
- 안쪽의 여백을 증가시키기 때문에 시각적으로 전체의 크기가 변한다.
- box-sizing: border-box; -> 컨텐츠, 공백의 크기를 합쳐서 원래 크기 유지
4) 내용 (content)
*/
#div1{
width: 200px;
height: 200px;
background-color: red;
margin: auto; /*값을 하나만 입력하면 ex)20px 상하좌우 모든 방면에 20px */
margin-bottom: 10px; /* 한 방향에만 줄 수도 있다! */
border: 1px solid black;
}
#div2{
width: 200px;
height: 200px;
background-color: blue;
padding: 50px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="div1">안녕하세요</div>
<div id="div2">안녕하세요</div>
</body>
</html>
개발자