[CSS] 박스 모델

 html/css를 처음 다룰때 인라인 요소와 블록 요소를 다뤘었습니다. 이 중 블록 요소는 한 칸을 차지하며, 자동 줄바꿈이 이루어진다고 했습니다. 그래서 블록 요소를 살펴보면 웹 페이지에서 박스 모양의 공간을 가지게 되는데 이런 요소들을 박스 모델이라고 부릅니다.

 

 인라인 요소와 블록 요소에 대한 설명은 아래 링크로...

2020/08/18 - [Programming/HTML,CSS] - [HTML/CSS] 블록 요소와 인라인 요소

 

마진과 패딩, 테두리를 조작하는 속성

2021/01/25 - [Programming/HTML,CSS] - [CSS] 마진(margin)과 패딩(padding)

2021/01/25 - [Programming/HTML,CSS] - [CSS] 콘텐츠 영역 설정하기

2021/01/27 - [Programming/HTML,CSS] - [CSS] 테두리 속성 BORDER

---

 - 박스 모델의 구조

 박스 모델의 기본 구조는 위 사진과 같습니다. 콘텐츠(요소)를 패딩이 감싸고 있고 그 겉을 테두리가 감싸며,

그 위를 마진이라는 것이 또 감싸고 있습니다. 각 요소에 대한 간략한 설명은 다음과 같습니다.

 

콘텐츠: 실제 요소가 표현되는 공간

패딩: 콘텐츠와 테두리 사이의 여백 공간

테두리: 마진을 감싸고 있는 테두리

마진: 다른 박스 모델 혹은 여백과 현재 콘텐츠(콘텐츠+패딩+테두리) 사이의 여백 

 

 

 웹 페이지가 박스 모델 하나로 구성되어있다면 고려할것이 전혀 없겠지만 웹 페이지는 여러개의 박스 모델로 구성되어있는 경우가 대다수 입니다. 그렇기에 원하는 디자인의 웹 페이지를 작성하기 위해서는 박스 모델을 이해하는 것이 도움이 됩니다.

---

 이전 포스트에서 박스 모델의 각 구성요소를 조작하는 것을 배웠다면 다음 포스트에서는 박스 모델전체를 배치하거나 조정하는 속성을 소개하겠습니다.