[CSS] 박스 모델의 개념

Box Model이란?

모든 HTML 문서의 구성 요소는 Box(상자) 형태로 정의된다. 웹페이지의 레이아웃은 이 박스들을 적절하게 배치하고 스타일링하는 과정이다.

Box Model은 다음 네 가지 영역으로 구성된다.

1. 콘텐츠: 텍스트와 이미지가 표시되는 영역
2. 패딩(padding): 콘텐츠와 테두리(border) 사이의 내부 여백
3. 테두리(border): 패딩과 외부 여백(margin) 사이의 경계
4. 여백(margin): 박스 바깥의 외부 간격

각 영역은 상, 하, 좌, 우 네 영역을 독립적으로 설정할 수 있다.

---

Box Model의 영역별 설명

콘텐츠 영역

콘텐츠 영역은 각 요소의 본질적인 부분으로 텍스트나 이미지가 표시된다. width와 height속성을 통해 크기를 지정하며, 이는 기본적으로 콘텐츠 영역 에 적용된다.

<div style="width: 300px; height: 150px;"></div>

위의 코드는 콘텐츠 영역이 가로 300px, 세로 150px 사이즈라는 걸 의미한다.
그러나 실제 박스 크기를 계산할 때 border,padding가 포함되기 때문에, 각각의 박스를 정확하게 배치하기 위해서는 border와 padding도 고려하는게 좋다. 이는 box-xizing 속성을 사용하면 된다. box-sizing 이란?

개발자 도구(Ctrl + Shift + I)를 열면, 콘텐츠 영역은 파란색으로 표시된다.

---

패딩 영역

패딩은 콘텐츠와 테두리(border) 사이의 공간이다.
padding 속성을 이용해 네 방향에 여백을 설정할 수 있다.

패딩 속성의 종류

/* 모든 면에 동일한 값 */
padding: 10px;

/* 상/하와 좌/우에 서로 다른 값 */
padding: 5px 10px; /* 상,하: 5px / 좌,우: 10px */

/* 상, 우/좌, 하 각각 설정 */
padding: 5px 10px 15px;

/* 상, 우, 하, 좌 각각 설정 */
padding: 5px 10px 15px 20px;

개발자 도구(Ctrl + Shift + I)를 열면, 패딩 영역은 초록색으로 표시된다.

---

테두리(Border) 영역

테두리는 패딩과 외부 여백(margin) 사이의 경계선이다.
테두리의 두께, 색상, 스타일을 변경할 수 있다.

border: 1px solid black; /* 1px  검은색 실선 */

 

더 자세한 내용 : 테두리의 속성

---

마진(여백) 영역

여백이란 한 요소가 있고 또 다른 요소가 있을 때, 두 요소의 테두리 사이의 간격을 말한다.
이 때 테두리가 보이지 않는다고 테두리가 없는 건 아니라는 걸 명심하자!
마진 영역은 박스 외부 공간에 영향을 미치고, 박스 자체의 크기에는 포함되지 않는다.

/* 모든 면에 동일한 값 */
margin: 10px;

/* 상/하와 좌/우에 서로 다른 값 */
margin: 5px 10px; /* 상,하: 5px / 좌,우: 10px */

/* 상, 우/좌, 하 각각 설정 */
margin: 5px 10px 15px;

/* 상, 우, 하, 좌 각각 설정 */
margin: 5px 10px 15px 20px;

개발자 도구(Ctrl + Shift + I)를 열면, 여백 영역은 주황색으로 표시된다.

---

참고한 사이트

박스 모델