[CSS] Box Model 이해하기

모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부릅니다.

박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분합니다.

※출처 : 코딩의 시작 TCP School

 

- 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다.

- 패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다.

- 테두리(border) : 내용과 패딩 주변을 감싸는 테두리입니다.

- 마진(margin) : 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않습니다.

 

위 그림과 설명은 TCP School에서 가져온 것이다. 왜냐하면 개인적으로 가장 이해가 잘되는 그림이었습니다.

---

아래 그림은 두 개의 <div>를 생성한 상태이며 padding, margin값은 주지 않고 model 박스에 border-style:solid를 한 상태입니다. 가장 기본적인 상태이며 content 영역에 마우스를 올렸을 때 model박스가 모두 해당되는 것을 알 수 있습니다.

이제 여기서 model박스에 위아래 8px 왼쪽 오른쪽 12px의 padding 값을 넣어보겠습니다. content영역과 border영역 사이에 공간이 생긴 것을 확인할 수 있습니다.

 

margin은 실제로 보이지 않지만 주변의 요소들과 간격 조정할 수 있습니다. 다음은 model 박스에 margin-top:10px를 한 결과입니다. box 박스와 model 박스 사이에 10px의 간격이 생긴 것을 확인할 수 있습니다.

마지막으로 model 박스에 width:50px, height:30px를 지정해보겠습니다. 아래의 결과를 보면 width와 height는 content영역에 적용되는 것을 알 수 있습니다.

---

앞으로 웹 페이지를 만들때 Box Model을 신경 쓰면서 만들고 경험을 많이 쌓아야 할 것 같다.