▣ 박스 모델
· 웹 문서에 텍스트, 이미지, 테이블 등의 요소를 배치하기 위해 사용
· 웹 문서의 전체 레이아웃을 정의
· 각종 요소들을 웒라는 위치에 배치
▣ 박스의 속성
· content : 실제 내용이 표현되는 곳
· padding : 콘텐츠와 테두리 사이의 여백
· border : 박스의 테두리 두께
· margin : 테두리와 박스의 최종 경계 사이의 여백
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스 모델 이해하기</title>
<style>
div {
background-color: yellow;
width: 300px;
padding: 25px;
border: 15px solid navy;
margin: 25px;
}
</style>
</head>
<body>
<p>CSS3 박스 모델은 content, padding, border, margin으로 구성되어 있다.</p>
<div>박스 모델의 padding, border, margin 속성의 기본 값은 0이며, 상하좌우 네 가지 방향을 top, bottom, left, right를 이용하여 지정할 수 있습니다.</div>
</body>
</html>
▣ Content
· 실제 내용이 표헌되는 곳
· 속성 : width(너비 지정), height(높이 지정)
| 속성 | 설명 |
| value | 셀지로 측정한 데이터 값이다. |
| min, max | 데이터가 인식하는 최솟값과 최댓값이다. 기본값은 0~1이다. |
| low, high | 허용되는 범위의 최솟값과 최댓값이다. low~high 값은 항상 min~max값 범위 내에 있다. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스의 내용 영역 크기 지정하기</title>
<style>
body {
height: 100px;
}
p {
background-color: yellow;
color: red;
font-weight: bold;
font-size: 16pt;
}
p.c1 {
width: 700px;
height: 80px;
color: green;
}
p.c2 {
width: 50%;
height: 150%;
color: purple;
}
p.c3 {
width: 10cm;
height: 3cm;
color: blue;
}
</style>
</head>
<body>
<p>박스 모델의 내용 영역 크기 지정</p>
<p class="c1">(1) 박스 모델의 크기를 픽셀(px) 단위로 지정</p>
<p class="c2">(2) 박스 모델의 크기를 퍼센트(%) 단위로 지정</p>
<p class="c3">(3) 박스 모델의 크기를 센티미터(cm) 단위로 지정</p>
</body>
</html>
▣ Padding, margin
· padding : 박스의 안쪽 여백 설정
· margin : 박스의 바깥쪽 여백 설정
| 속성값 | 설명 |
| 수치 | 여백은 픽셀(px), 포인트(pt), 센티미터(cm) 같은 수치 단위로 지정한다. |
| 백분율 | 여백을 부모 요소를 기준으로 하여 백분율로 지정한다. |
| auto | 여백을 웹 브라우저가 자동으로 지정한다. 기본값이다. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스의 안쪽 여백과 바깥쪽 여백 지정하기</title>
<style>
p {
background-color: yellow;
color: red;
font-weight: bold;
font-size: 16pt;
}
p.pad {
color: purple;
padding: 20px;
}
p.mar {
color: green;
margin: 30px;
}
p.mp {
color: blue;
padding: 5%;
margin: 5%;
}
</style>
</head>
<body>
<p>박스의 안쪽 여백과 바깥쪽 여백 지정</p>
<p class="pad">(1) 안쪽 여백 지정 - padding 20px</p>
<p class="mar">(2) 바깥쪽 여백 지정 - margin 30px</p>
<p class="mp">(3) 안쪽, 바깥쪽 여백 지정 - padding 5%, margin 5%</p>
</body>
</html>
▣ 네 방향 여백 크기 설정
| 형식 | 설명 |
| padding-top: 속성값; | 위쪽 패딩 |
| padding-bottom: 속성값; | 아래쪽 패딩 |
| padding-right: 속성값; | 오른쪽 패딩 |
| padding-left: 속성값; | 왼쪽 패딩 |
| margin-top : 속성값; | 위쪽 마진 |
| margin-bottom : 속성값; | 아래쪽 마진 |
| margin-right : 속성값; | 오른쪽 마진 |
| margin-left : 속성값; | 왼쪽 마진 |
▣ 속성값의 개수에 따라 적용되는 위치
h1 { margin: 5px 10px 5px 10px; }
top right bottom left
h1 { margin: 5px 10px 5px; }
top right & left bottom
h1 { margin: 5px 10px }
top & bottom right & left
h1 { margin: 5px; }
top & right & bottom & left
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스의 여백을 네 방향으로 지정하기</title>
<style>
body {
font-weight: bold;
font-size: 16pt;
}
.mp1 {
background-color: aqua;
color: red;
margin-bottom: 40px;
padding-left: 50px;
}
.mp2 {
background-color: yellow;
color: green;
margin: 20px;
padding: 10px 20px;
}
.mp3 {
background-color: gray;
color: purple;
margin: 50px 15px 20px;
padding: 20px;
}
</style>
</head>
<body>
<p>박스 모델의 네 방향 여백 지정</p>
<p class="mp1">mp1</p>
<p class="mp2">mp2</p>
<p class="mp3">mp3</p>
</body>
</html>