CSS 강좌 / 박스 모델(Box Model)
HTML 요소는 박스(box)로 이루어져 있습니다. 박스 위에 박스를 얹거나 박스들을 배열하여 문서를 만들어 나갑니다.
예를 들어 다음과 같이 코드를 작성했다면
<body>
<header>
<h1>Lorem</h1>
</header>
</body>
body 박스 위에 header 박스가 있고, header 박스 위에 h1 박스가 있는 것입니다.
박스의 구성
하나의 박스는 바깥 여백 영역, 테두리 영역, 안쪽 여백 영역, 내용 영역으로 구성됩니다. 다음은 각 영역을 살펴보기 위한 간단한 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
h1 {
margin: 30px;
border: 30px solid #dddddd;
padding: 30px;
}
</style>
</head>
<body>
<h1>Box Model</h1>
</body>
</html>
웹브라우저로 보면 아래와 같은 결과 값이 나옵니다.
각 영역의 구분이 명확하지 않으므로 IE의 요소 검사로 보도록 하겠습니다.
색이 있는 모든 영역이 h1 요소입니다. 각 색이 나타내는 영역은 다음과 같습니다.
•① : 바깥 여백 영역(Margin Area)
•② : 테두리 영역(Border Area)
•③ : 안쪽 여백 영역(Padding Area)
•④ : 내용 영역(Content Area)
각 영역을 꾸밀 때 사용하는 속성은 다음과 같습니다.
•바깥 여백 : margin 속성
•테두리 : border 속성
•안쪽 여백 : padding 속성
•박스의 가로 크기 : width 속성
•박스의 세로 크기 : height 속성
•박스의 크기 기준 : box-sizing 속성
•박스의 배경 : background 속성
'홈페이지제작 > CSS' 카테고리의 다른 글
| [CSS3기초] 홈페이지 레이아웃 만들기 [웹사이트의 레이아웃](2) (0) | 2018.01.01 |
|---|---|
| [CSS 기초] 홈페이지 레이아웃 만들기 [웹사이트의 레이아웃] (0) | 2017.12.30 |
| [CSS 강좌 ] 폰트속성 ( font-family) (0) | 2017.12.13 |
| [CSS 강좌 ] 컨텐트 만들기 ( content ) (0) | 2017.12.12 |
| [CSS 강좌] Table 표 만들 때 사용하는 태그 (0) | 2017.12.11 |
itworldkorea
IT korea가 세상(world)을 변화시킨다.