박스 모델(Box-Model)이란?
- 브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다. 이 영역을 '박스'라 표현하며, CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정할 수 있다.
- 하나의 박스는 네 개의 영역으로 구성된다
- 콘텐츠 영역, 안쪽 여백, 경계선(테두리), 바깥쪽 여백
- 콘텐츠 영역: width, height (파란 영역)
- 안쪽 여백: padding
- 바깥쪽 여백: margin
- 테두리: border
padding과 margin
하위 속성 정의하기
- 개별 속성을 통해 상하좌우 여백을 정의할 수 있다
여러 값을 한 번에 정의하기
- padding과 margin은 네 면의 여백에 대한 단축속성이다
box-sizing
- box-sizing 속성은 요소의 너비(width)와 높이(height)를 계산하는 방법을 지정함
| 속성값 | 의미 |
|---|
| conten-box | 기본값. 너비와 높이가 콘텐츠 영역만을 포함한다 |
| border-box | 너비와 높이가 안쪽 여백과 테두리까지 포함한다 |
=> 너비와 높이가 같더라도, box-sizing 속성값에 따라 크기가 달라질 수도 있다
background
- 배경(background)은 콘텐츠의 배경을 정의한다
| 하위 속성 | 역할 |
|---|
| background-color | 배경색을 정의한다 |
| background-image | 배경 이미지를 정의한다 |
| background-position | 배경 이미지의 초기 위치를 정의한다 |
| background-size | 배경 이미지의 크기를 정의한다 |
| background-repeat | 배경 이미지의 반복 방법을 정의한다 |
