1. 박스 모델(box model)

---

• 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 한다.

• 박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분한다.

1. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분이다.
2. 패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않는다.
3. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리다.
4. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않는다.

2. CSS 박스 모델에서의 height와 weight 속성

---

• CSS에서 height, width 속성을 설정할 때 그 크기가 가리키는 부분은 내용(content) 부분만을 대상으로 한다.

• HTML 요소의 height와 width 속성으로 설정된 높이와 너비에 패딩(padding), 테두리(border), 마진(margin)의 크기는 포함되지 않는다.

div {
    width: 320px;
    padding: 10px;
    border: 5px solid maroon;
    margin: 0;
}

3. 박스 크기 측정 기준

---

1) content-box

• 박스의 크기를 측정하는 기본값
• content-box인 경우 box의 높이 : height

* {
    box-sizing: content-box;
}

2) border-box

• 여백과 테두리를 포함하는 박스 크기 계산법(권장)
• border-box인 경우 box의 높이 : height + padding-top + padding-bottom + border-top + border=-bottom

* {
    box-sizing: border-box;
}

• 아래 그림에서 전체 너비(width)를 계산해 보면, width(70px) + left margin(10px) + left padding(5px) + right padding(5px) + right margin(10px) = 100px 이 된다.

• 즉, HTML 요소의 전체 너비(width)를 계산하는 공식은 width + left padding + right padding + left border + right border + left margin + right margin 이다.

• 또한, HTML 요소의 전체 높이(height)를 계산하는 공식은 height + top padding + bottom padding + top border + bottom border + top margin + bottom margin 입니다.