[CSS ] 03. 박스 모델(Box Model)

[CSS ] 03. 박스 모델(Box Model)

---

1. 박스 모델이란?

CSS에서 모든 HTML 요소는 사각형 박스로 구성되어 있다. 이 구조를 박스 모델(Box Model)이라고 한다.

하나의 요소는 내용(Content)을 중심으로 여백과 테두리를 포함한 형태를 가진다.

---

2. 박스 모델 구성 요소

• Content : 실제 내용 영역
• Padding : 내용과 테두리 사이의 여백
• Border : 요소의 테두리
• Margin : 요소 바깥쪽 여백

---

3. Content 영역

텍스트나 이미지 등 실제 내용이 표시되는 영역이다.

div {
    width: 200px;
    height: 100px;
}

---

4. Padding

Content와 Border 사이의 내부 여백을 의미한다.

div {
    padding: 20px;
}

방향별로 지정할 수도 있다.

div {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

---

5. Border

요소의 테두리를 의미한다.

div {
    border: 1px solid black;
}

각 방향별로도 설정 가능하다.

div {
    border-top: 2px solid red;
}

---

6. Margin

요소 바깥쪽의 여백을 의미한다. 다른 요소와의 간격을 조절한다.

div {
    margin: 20px;
}

가로 중앙 정렬에 자주 사용되는 형태:

div {
    margin: 0 auto;
}

---

7. 박스 크기 계산 방식

기본적으로 width와 height는 Content 영역의 크기만을 의미한다.

따라서 실제 요소 크기는 다음을 모두 포함한다.

• Content
• Padding
• Border

---

8. box-sizing 속성

box-sizing은 박스 크기 계산 방식을 변경한다.

div {
    box-sizing: content-box;
}

기본값이며 Content 영역 기준으로 크기를 계산한다.

---

div {
    box-sizing: border-box;
}

Padding과 Border를 포함한 크기로 계산한다.

---

9. 정리

• 모든 요소는 박스 구조를 가진다
• Padding은 내부 여백
• Margin은 외부 여백
• box-sizing으로 크기 계산 방식 제어 가능