CSS 박스 모델
CSS 박스 모델은 웹 페이지의 레이아웃을 구성하는 데 사용되는 개념으로, HTML 요소들이 사각형 박스로 표현되며 이 박스들이 배치되고 크기가 결정되는 방식을 정의한다.
Box Model은 각 요소의 내용(content), 패딩(padding), 테두리(border), 마진(margin) 등을 포함하는 구성 요소들을 기반으로 하며, 웹 페이지의 디자인과 레이아웃을 제어하는 데 중요한 역할을 한다.
크게 두 가지 버전으로 나뉜다.
Content Box Model:
- 콘텐트 영역(content area)만을 포함하여 크기를 정의
- 패딩, 테두리, 마진은 콘텐트 영역을 둘러싼다.
box-sizing: content-box;로 정의
Border Box Model:
- 콘텐트 영역 뿐만 아니라 패딩과 테두리까지 포함하여 크기를 정의
- 마진은 박스의 외부를 둘러싼다.
box-sizing: border-box;로 정의
주요 구성 요소:
Content: 박스의 실제 내용을 감싸는 영역으로, 텍스트나 이미지 등이 위치Padding: 콘텐트 영역과 테두리 사이의 공간으로, 내용과 테두리 사이의 여백을 제어Border: 콘텐트 영역과 패딩을 감싸고, 박스의 외각을 표시하는 선Margin: 박스와 주변 요소 간의 간격으로, 다른 박스와의 간격을 조절