box model 이란

html 의 요소들은 박스로 표현될 수 있습니다. 개발자 도구에서 테그들이 박스 형태로 표현된 걸 보면 쉽게 아실 수 있을 겁니다. box model 은 html 의 요소들을 두르고 있는 박스를 의미합니다.

box model 구성 요소

margin
border
padding
content 
box model 은 content, padding, border, margin 으로 구성되어있습니다. 이들을 간략하게 설명하자면 다음과 같습니다.

content 는 요소의 content 가 오는 공간으로 글이나 이미지가 나타나는 공간입니다.

padding 은 content 주변에 투명한 빈공간을 생성합니다.

border 는 padding 겉에 테두리를 생성합니다.

margin 은 border 주변에 투명한 빈공간을 생성합니다.

content

content 는 요소의 content 가 오는 공간으로 글이나 이미지가 나타나는 공간입니다. width 와 height 속성으로 content 의 가로 길이와 세로 길이를 설정 가능합니다. 요소의 content 가 주어진 width 또는 height 보다 크면 생각과 다른 방식으로 요소가 나타날 수 있습니다. 이럴 때에는 overflow 속성같이 추가적인 속성을 통해서 원하는 데로 디자인 할 수 있습니다.
content - 코드
content 의 가로 길이가 500px 인 div 를 생성하겠습니다. 배경은 gray 로 하겠습니다.

1
2
3
4

<div style="background-color:gray;
            width:500px;">
  content 의 가로 길이가 500px 인 div 를 생성하였습니다.
</div>
content - 결과
content 의 가로 길이가 500px 인 div 를 생성하였습니다.

padding

padding 은 content 주변에 투명한 빈공간을 생성합니다. 위의 "content - 결과"를 보시면 content 가 너무 왼쪽에 붙어있어 보입니다. 이럴 때는 padding 으로 주변에 투명한 빈공간을 만들어서 content 를 원하는 만큼 떨어뜨릴 수 있습니다.

padding 은 content 의 상하좌우를 기준으로 줄 수 있습니다. 요소의 padding 을 설정하는 방법은 아래와 같습니다.

padding-top: 10px; // content 위쪽에 10px 공간 생성
padding-bottom: 10px; //      아래쪽에 10px 공간 생성
padding-left: 10px;   //      왼쪽에 10px 공간 생성
padding-right: 10px;  //      오른쪽에 10px 공간 생성

padding: 10px;        //    상하좌우에 10px 공간 생성
padding: 10px 20px;   //      상하에 10px
                      //      좌우에 20px 공간 생성
padding: 10px 20px 30px; //   위쪽에 10px
                         //   좌우에 20px
                         //   아래쪽에 10px 공간 생성
padding: 10px 20px 30px 40px;
                         //   위에 10px
                         //   오른쪽에 20px
                         //   아래에 30px
                         //   왼쪽에 40px 공간 생성
padding - 코드
이전에 사용한 코드에서 padding 20px 을 추가하겠습니다.

1
2
3
4
5

<div style="background-color:gray;
            width:500px;
            padding:20px;">
  content 의 가로 길이가 500px 인 div 를 생성하였습니다.
</div>
padding - 결과
결과를 보시면 content 상하좌우에 빈공간이 생성됨을 알 수 있습니다.
content 의 가로 길이가 500px 인 div 를 생성하였습니다. 

그런데 div 의 가로 길이를 "content - 결과" 와 비교하면 조금 다르다는 사실을 알 수 있습니다. 이는 이전의 결과는 content 의 가로 길이가 500px 인 div 였지만 이번 div 는 content 의 가로 길이가 500px 이고 또한 좌우에 총합 40px 의 padding 이 추가된 div 이기 때문입니다. 즉 이전 div 는 가로 길이가 500px 이고 이번 div 는 가로 길이가 540px 이 됩니다.

이런 식으로 여러분이 어떤 요소를 생성했을 때 그 요소의 가로 길이는 그 요소의 box model 에서 가로 길이에 영향을 주는 모든 요소의 합이 됩니다. 세로도 마찬가지입니다.

border

border 는 padding 겉에 테두리를 생성합니다. border 를 설정하는 방법은 다음과 같습니다.

border: 1px solid black;

위의 코드는 요소의 padding 상하좌우에 1px 크기의 검은선으로 테두리를 생성합니다. padding 때와 같이 원하는 쪽에만 테두리를 생성할 수 있습니다. 아래 코드는 왼쪽에만 생성하는 방법입니다.

border-left: 1px solid black;

border 는 길이 뿐만 아니라 style, color 등등 고려할 게 많아서 다음 포스트에서 더 자세한 설정 방법에 대하여 알아보도록 하겠습니다.
border - 코드
이번에는 width 가 300px 이고 padding 10px border 5px 인 div 를 생성하겠습니다. 테두리 색은 빨간색으로 하겠습니다.

1
2
3
4
5
6

<div style="background-color:gray;
            width:300px;
            padding:10px;
            border: 5px solid black;">
  content 의 가로 길이가 300px 인 div 를 생성하였습니다.
</div>
border - 결과
결과를 보시면 padding 겉에 테두리가 생김을 알 수 있습니다.
content 의 가로 길이가 300px 인 div 를 생성하였습니다.

margin

margin 은 border 주변에 투명한 빈공간을 생성합니다. padding 과 비슷한 역할을 하지만 margin 으로 생성된 공간은 background-color 등등에 영향을 받지 않습니다.

margin 또한 border 의 상하좌우를 기준으로 줄 수 있습니다. 요소의 margin 을 설정하는 방법은 아래와 같습니다.

margin-top: 10px; // content 위쪽에 10px 공간 생성
margin-bottom: 10px; //      아래쪽에 10px 공간 생성
margin-left: 10px;   //      왼쪽에 10px 공간 생성
margin-right: 10px;  //      오른쪽에 10px 공간 생성

margin: 10px;        //    상하좌우에 10px 공간 생성
margin: 10px 20px;   //      상하에 10px
                      //      좌우에 20px 공간 생성
margin: 10px 20px 30px; //   위쪽에 10px
                         //   좌우에 20px
                         //   아래쪽에 10px 공간 생성
margin: 10px 20px 30px 40px;
                         //   위에 10px
                         //   오른쪽에 20px
                         //   아래에 30px
                         //   왼쪽에 40px 공간 생성
margin - 코드
border 에서 만든 코드에 margin 50px 을 주도록 하겠습니다.

1
2
3
4
5
6
7

<div style="background-color:gray;
            width:300px;
            padding:10px;
            border: 5px solid black;
            margin: 50px;">
  content 의 가로 길이가 300px 인 div 를 생성하였습니다.
</div>
margin - 결과
결과를 보시면 div 가 상하좌우로 50px 의 빈공간을 생성함을 알 수 있습니다.
content 의 가로 길이가 300px 인 div 를 생성하였습니다.