[CSS 강좌] 박스 모델(Box Model)
Box Model
HTML 요소는 박스(box)로 이루어져 있습니다. 박스 위에 박스를 얹거나 박스들을 배열하여 문서를 만들어 나갑니다.
예를 들어 다음과 같이 코드를 작성했다면
<body>
<header>
<h1>Lorem</h1>
</header>
</body>
body 박스 위에 header 박스가 있고, header 박스 위에 h1 박스가 있는 것입니다.
박스의 구성
하나의 박스는 바깥 여백 영역, 테두리 영역, 안쪽 여백 영역, 내용 영역으로 구성됩니다.
다음은 각 영역을 살펴보기 위한 간단한 예제입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
<!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>
|
cs |
웹브라우저로 보면 다음과 같이 나옵니다.
'홈페이지제작 > CSS' 카테고리의 다른 글
| [ CSS 기초] css padding 속성 (0) | 2018.03.05 |
|---|---|
| [CSS 강좌] 테이블 꾸미기 (0) | 2018.02.14 |
| [HTML과 CSS 코드예시] 스타일 적용으로 웹페이지 꾸미기 (0) | 2018.02.06 |
| CSS 강좌 /선택자 / 전체 선택자(Universal Selector) (0) | 2018.02.05 |
| [CSS 강좌] 워드프레스 테마 만들기 (0) | 2018.01.29 |
itworldkorea
IT korea가 세상(world)을 변화시킨다.