106 lines
3.8 KiB
Markdown
106 lines
3.8 KiB
Markdown
# Box
|
|
|
|
블록 요소는 새로운 줄에서 시작하며, 상위 컨테이너 너비의 100%를 채웁니다. `<h1>`, `<p>`, `<div>` 등은 기본작으로 블록 요소입니다.
|
|
인라인 요소는 새로운 줄에서 시작하지 않으며, `width`, `height` 속성은 무시됩니다. `<a>`, `<em>`, `<strong>`, `<span>` 등은 기본적으로 인라인 요소입니다.
|
|
|
|
박스의 유형은 `display` 속성을 통해서 정의할 수 있습니다.
|
|
* display
|
|
* block
|
|
* inline
|
|
* inline-block
|
|
* flex
|
|
* inline-flex
|
|
|
|
## 박스 모델
|
|
|
|
* 컨텐트 영역 : 기본적으로, `width`와 `height` 속성을 지정하면 컨텐트 영역의 크기를 지정하게 됩니다.
|
|
* 패딩 영역 : `padding`
|
|
* 보더(테두리) 영역 : `border`
|
|
* 마진 영역 : `margin`
|
|
|
|
|
|
## 크기
|
|
|
|
* `width`
|
|
* `height`
|
|
* `min-wodth`, `min-height`
|
|
* `max-width`, `max-height`
|
|
|
|
### 보더 박스 모델
|
|
|
|
* `box-sizing` : content-box | border-box
|
|
`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` : none | hidden | dotted | dashed | solid | double | groove | rigid | inset | outset
|
|
* `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
|
|
|
|
* `box-shadow`
|
|
|
|
## 아웃라인
|
|
|
|
* `outline`
|
|
* `outline-color`, `outline-offset`, `outline-style`, `outline-width`
|
|
|
|
## 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
|