> 박스모델 (Box - Model)
- 박스 : 브라우저가 요소를 렌더링할 때, 요소가 사각형 형태로 차지하는 영역.
- 박스의 크기, 위치, 속성(색, 배경, 테두리 등)을 결정할 수 있음.
> 하나의 박스는 네 개의 영역으로 구성됨.
- 콘텐츠 영역
- 안쪽 여백
- 경계선 (테두리)
- 바깥쪽 여백
> 각 영역의 크기를 정의하는 속성
- 콘텐츠 영역 : width, height
- 안쪽 여백 : padding
- 경계선 (테두리) : border-width
- 바깥쪽 여백 : margin
> 박스모델 예시
바깥쪽 여백(margin) → 테두리(border) → 안쪽 여백(padding) → 콘텐츠 영역
바깥쪽 여백(margin) → 테두리(border) → 안쪽 여백(padding) → 콘텐츠 영역(width, height)
'CSS' 카테고리의 다른 글
| [CSS] background 속성에 대해서 (0) | 2023.11.02 |
|---|---|
| [CSS] padding 속성과 margin 속성 (0) | 2023.11.02 |
| [CSS] display 속성과 border 속성 (0) | 2023.11.01 |
| [CSS] 텍스트 관련 속성 (0) | 2023.10.30 |
| [CSS] 기본 선택자와 그룹 선택자 (0) | 2023.10.30 |