0050 CSS 박스 모델(box model)

0050 CSS 박스 모델(box model)

CSS에서는 HTML 요소 하나하나를 네모난 박스(box)로 취급한다. CSS는 HTML 요소가 문단, 제목, 블록 인용구, 리스트, 리스트 항목 등 어떤 요소이든 박스로 다루어지고 <em>과 같은 인라인 요소라고 해도 마찬가지로 박스로 취급한다.

   

따라서 CSS 박스 모델(box model)이란 HTML 요소가 어떤 모양의 박스(box)인지를 제시하는 모델이다. 그리고 이 박스 모델을 알아야 HTML 요소들의 레이아웃(layout), 크기와 간격 등을 섬세하게 조절할 수 있게 된다.

HTML 요소를 이루고 있는 박스는 마진(margin), 테두리(border), 패딩(padding), 그리고 내용(content)으로 아래의 그림과 같이 구성된다.

각각의 부분에 대한 설명은 다음과 같다. 

내용(Content) - HTML 요소의 내용인 이미지나 텍스트가 나타나는 영역

패딩(Padding) - 내용(content) 영역을 둘러싸고 있는 영역으로 내용(content) 영역과 테두리(border) 사이에 여백으로 사용한다. 패딩은 자신만의 고유색은 없고 투명하므로 배경이 투과되어 보인다. CSS로 패딩 전체 두께 혹은 어느 특별한 방향(위, 오른쪽, 왼쪽, 아래쪽)의 두께를 제어할 수 있다. 

테두리(Border) - 테두리는 패딩(Padding)과 내용(content)을 둘러싸고 있는 바깥 경계선이다. 테두리의 두께, 색, 스타일은 변경할 수 있다.

마진(Margin) - 테두리 바깥을 둘러싸고 있는 영역으로 인접한 요소 사이에 빈 공간을 추가하는 용도로 사용한다. 마진은 자신만의 고유색은 없고 투명하므로 배경이 투과되어 보인다. CSS로 마진 전체 두께 혹은 어느 특별한 방향(위, 오른쪽, 왼쪽, 아래쪽)의 두께를 제어할 수 있다.

Anki 파일

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0050 CSS 박스 모델(box model).apkg