[CSS] 박스 모델 (margin, padding, border)

박스 모델(Box Model)은 CSS에서 요소의 크기와 레이아웃을 결정하는데 사용되는 개념입니다. HTML 요소들은 모두 사각형 박스 형태로 간주되며, 각각의 박스는 컨텐츠(content), 패딩(padding), 테두리(border), 마진(margin)으로 구성됩니다. 박스 모델을 이해하고 활용하면 요소들을 정확한 위치에 배치하고 간격을 조절하는 등의 레이아웃 작업을 쉽게 할 수 있습니다.

---

1. 컨텐츠(Content)

컨텐츠 영역은 HTML 요소의 실제 내용을 포함하는 부분입니다. 글자, 이미지, 미디어 등의 콘텐츠가 이 부분에 들어갑니다.

---

2. 패딩(Padding)

패딩은 컨텐츠 영역과 테두리(border) 사이의 공간을 말합니다. 패딩은 요소의 크기에 영향을 주며, 요소의 크기를 증가시키는 역할을 합니다.

/* 패딩 적용 예제 */
div {
    padding: 10px;
}

위의 예제에서는 <div> 요소의 패딩을 10px로 설정하고 있습니다.

---

3. 테두리(Border)

테두리는 패딩을 감싸고 있는 선으로, 요소의 경계를 나타냅니다. 테두리의 스타일, 두께, 색상을 지정할 수 있습니다.

/* 테두리 적용 예제 */
div {
    border: 1px solid #333;
}

위의 예제에서는 <div> 요소의 테두리를 1px 두께의 검은색 실선으로 설정하고 있습니다.

---

4. 마진(Margin)

마진은 테두리와 다른 요소와의 간격을 의미합니다. 마진은 주변 요소들과의 공간을 확보하기 위해 사용되며, 요소의 외부 여백을 조절합니다.

/* 마진 적용 예제 */
div {
    margin: 20px;
}

위의 예제에서는 <div> 요소의 마진을 20px로 설정하고 있습니다.

---

5. 박스 모델의 상속과 계산

요소들은 박스 모델의 속성들을 상속합니다. 즉, 부모 요소에 적용된 패딩, 테두리, 마진 등의 속성은 자식 요소에도 영향을 미칩니다. 또한, 박스 모델의 속성들은 서로 계산됩니다. 예를 들어, 너비(width)가 100px이고 패딩이 10px인 요소의 전체 너비는 120px가 됩니다.

---

박스 모델은 CSS에서 요소의 크기와 레이아웃을 다루는 핵심 개념입니다. 컨텐츠, 패딩, 테두리, 마진으로 구성되는 이 모델을 이해하고 활용하여 웹 페이지의 요소들을 효과적으로 배치하고 꾸밀 수 있습니다. CSS의 박스 모델을 마스터하면 다양한 디자인과 레이아웃을 구현하는데 도움이 될 것입니다. 계속해서 박스 모델에 대해 익숙해지고 웹 페이지 개발을 즐기시기 바랍니다!