박스 모델

박스 모델

박스 모델은 좁은 범위로 보면 HTML로 구조화된 콘텐츠를 다른 콘텐츠와 구분하고 조화롭게 배치하기 위한 개념이며, 큰 범위로 보면 모든 HTML 요소가 갖는 블럭 개념입니다.

 

블럭 레벨 요소 뿐만 아니라, 인라인 레벨 요소 또한 박스 모델을 갖습니다. 다만, 지정할 수 있는 속성이 제한되어 있습니다.

 

박스 모델의 구성 요소

넓이 : 컨텐츠의 가로 크기

높이 : 컨텐츠의 세로 크기

패딩 : 컨텐츠와 테두리 사이의 간격, 테두리를 경계로 안쪽 여백이라고도 함. 배경이 표시됨

테두리 : 패딩과 마진의 경계

마진 : 인접한 박스와 간격, 테두리를 경계로 바깥 여백이라고도 함.

 

박스 모델의 크기

가로 크기 : "왼쪽 마진 + 왼쪽 테두리 + 왼쪽 패딩 + 컨텐츠 넓이 + 오른쪽 패딩 + 오른쪽 테두리 + 오른쪽 마진"의 크기를 모두 더한 값이다.

세로 크기 : "위쪽 마진 + 위쪽 테두리 + 위쪽 패딩 + 컨텐츠 높이 + 아래쪽 패딩 + 아래쪽 테두리 + 아래쪽 마진"의 크기를 모두 더한 값이다.

 

박스모델의 속성

• margin : border를 기준으로 박스의 여백을 지정, 시각적인 요소는 없음
• border : 박스의 테두리
• padding : 테두리와 content간의 간격
• content : 엘리먼트 안에 포함되는 컨텐츠

 

content(컨텐츠)

• 엘리먼트안에 포함되는 컨텐츠로 예를들어 <div>test</div>라고 태그를 기술했을 때 div앨리먼트의 content는 test임
• content는 폭(width)과 높이(height)를 지정할 수 있다.

border(보더), 테두리

• 엘리먼트의 테두리
• 테두리는 margin과 padding의 경계가 된다.
• 테두리의 굵기와 색상과 스타일을 지정할 수 있다.

padding(패딩)

• 테두리와 컨텐츠 간의 여백

margin(마진)

• 엘리먼트와 엘리먼트 간의 여백
• 위 아래에 인접한 엘리먼트 간에는 margin의 값이 더 큰 쪽의 margin이 적용됨(좌우는 아님)

 

- M I N -