# Box

블록 요소는 새로운 줄에서 시작하며, 상위 컨테이너 너비의 100%를 채웁니다. `<h1>`, `<p>`, `<div>` 등은 기본작으로 블록 요소입니다.
인라인 요소는 새로운 줄에서 시작하지 않으며, `width`, `height` 속성은 무시됩니다. `<a>`, `<em>`, `<strong>`, `<span>` 등은 기본적으로 인라인 요소입니다.

박스의 유형은 `display` 속성을 통해서 정의할 수 있습니다.

* block
* inline
* inline-block
* flex
* inline-flex

## 박스 모델

* 컨텐트 영역 : 기본적으로, `width`와 `height` 속성을 지정하면 컨텐트 영역의 크기를 지정하게 됩니다.
* 패딩 영역 : `padding`
* 보더(테두리) 영역 : `border`
* 마진 영역 : `margin`


## 크기

* `width`
* `height`
* `min-wodth`, `min-height`
* `max-width`, `max-height`

### 보더 박스 모델

`width`와 `height` 속성이 컨텐트 영역의 크기를 지정하는 대신, 보더 영역의 크기를 지정하도록 합니다.

```CSS
html {
    box-sizing: border-box;
}
```

## 마진

* `margin`
* `margin-top`
* `margin-right`
* `margin-bottom`
* `margin-left`

### Margin Collapsing

여백이 서로 맞닿은 두 개의 요소가 있으면 해당 여백은 합쳐져 하나의 여백이 되어서, 그 중 가장 큰 여백의 크기가 됩니다.

## 보더

* `border`
* `border-top`, `border-right`, `border-bottom`, `border-left`
* `border-width`
* `border-style`
* `border-color`
* `border-top-width`, `border-top-style`, `border-top-color`
* `border-right-width`, `border-right-style`, `border-right-color`
* `border-bottom-width`, `border-bottom-style`, `border-bottom-color`
* `border-left-width`, `border-left-style`, `border-left-color`

* `border-radius`
* `border-bottom-left-radius`, `border-bottom-right-radius`, `border-top-left-radius`, `border-top-right-radius`

## 패딩

패딩은 테두리와 콘텐츠 영역 사이에 위치합니다. 마진과는 다르게 패딩은 음수의 크기를 가질 수 없습니다.

* `padding`
* `padding-top`, `padding-right`, `padding-bottom`, `padding-left`

## 배경

* `background`
* `background-color`
* `background-image`
  * url()
  * linear-gradient()
  * radial-gradient()
* `background-repeat` : no-repeat | repeat-x | repeat-y | repeat
* `background-size` : cover | contain
  * cover : 이미지를 박스 면적을 완전히 덮으면서 가로 세로 비율을 유지하며 이미지를 충분히 크게 만듭니다. 이 경우 일부 이미지가 박스 외부에 있을 수 있습니다.
  * contain : 이미지를 박스 안에 들어가기에 적합한 크기로 만듭니다. 이 경우 이미지의 종횡비가 박스의 종횡비와 다른 경우, 이미지의 한쪽 또는 위쪽과 아래쪽에 간격이 생길 수 있습니다.
* `background-position`
* `background-attachment` : scroll | fixed | local


## Overflow

`overflow` 의 기본값은 visible 이므로, overflows 가 발생하면 기본적으로 콘텐츠를 볼 수 있습니다. 콘텐츠가 넘칠 때 내용을 자르려면 박스에 `overflow: hidden` 을 설정할 수 있습니다.
`word-break`는 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정합니다.
`overflow-wrap`는 어떤 문자가 내용 칸 밖으로 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용됩니다.

* `overflow` : visible | hidden | clip | scroll | auto
* `overflow-x`, `overflow-y`
* `word-break` : normal | break-all | keep-all | break-word
* `overflow-wrap` = `word-wrap` : normal | break-word