[CSS] 박스 모델의 개념
Box Model이란?
모든 HTML 문서의 구성 요소는 Box(상자) 형태로 정의된다. 웹페이지의 레이아웃은 이 박스들을 적절하게 배치하고 스타일링하는 과정이다.
Box Model은 다음 네 가지 영역으로 구성된다.
콘텐츠: 텍스트와 이미지가 표시되는 영역패딩(padding): 콘텐츠와 테두리(border) 사이의 내부 여백테두리(border): 패딩과 외부 여백(margin) 사이의 경계여백(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)를 열면, 여백 영역은 주황색으로 표시된다.