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 속성

               

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,