# Background
## 1. 개요
Background 관련 프로퍼티는 해당 요소의 배경으로 이미지 또는 색상을 정의한다. 웹 문서의 전체 배경뿐만 아니라 텍스트, 목록 등 특정한 요소에도 배경을 지정할 수 있다.
***
## 2. background-image 프로퍼티
요소에 배경 이미지를 지정한다.
기본형 `background-color: url("이미지 파일 경로")`
```html
Background-image
```
***
## 3. background-repeat 프로퍼티
배경 이미지의 반복을 지정한다. 수직, 수평 또는 수직과 수평 모두의 반복을 지정할 수 있다.
| 종류 | 설명 |
| --------- | ----------------------------------- |
| repeat | 브라우저 화면에 가득 찰 때까지 가로와 세로로 반복한다. 기본값 |
| repeat-x | 브라우저 화면 너비에 가득 찰 때까지 가로로 반복한다. |
| repeat-y | 브라우저 화면 높이에 가득 찰 때까지 세로로 반복한다. |
| no-repeat | 한 번만 표시하고 반복하지 않는다. |
```html
Background-image
```
반복 출력을 멈추고 싶은 경우, `background-repeat` 프로퍼티값에 no-repeat를 설정한다.
```html
Background-image
```
`background-image`에 복수개의 이미지를 설정할 경우, 먼저 설정된 이미지가 전면에 출력된다.
```html
Background-image
```
***
## 4. background-size 프로퍼티
배경 이미지의 사이즈를 지정한다. 배경 이미지의 고유 비율을 유지하기 때문에 설정에 따라 이미지의 일부가 보이지 않을 수 있다. `background-size` 프로퍼티를 사용하여 배경 이미지의 크기를 조절할 수 있다. 특히 화면에 배경 이미지를 가득 채워야 할 경우에 유용하다.
아래의 표는 background-size 프로퍼티값이다.
| 종류 | 설명 |
| ------- | --------------------------------------------------------------------------- |
| auto | 원래 배경 이미지 크기만큼 표시한다. 기본값 |
| contain | 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대 축소한다. |
| cover | 배경 이미지로 요소를 모두 덮도로 이미지를 확대 축소한다. |
| <크기> | 이미지의 너비와 높이를 지정한다. 값이 하나만 주어질 경우 너빗값으로 인식하며, 이미지의 너비와 너빗값에 맞춘 높이값도 자동 계산된다. |
| <백분율> | 배경 이미지가 들어갈 요소의 크기를 기준으로 값을 백분율로 지정하고 그 크기에 맞도록 배경 이미지를 확대 축소한다. |
```html
background-size: auto
background-size: contain
background-size: cover
background-size: 크기
background-size: 백분율
```
***
## 5. background-attachment 프로퍼티
일반적으로 화면을 스크롤하면 문서 전체가 움직이므로 배경 이미지도 함께 스크롤된다. 화면이 스크롤되더라도 배경이미지는 스크롤되지 않고 고정되어 있게 하려면 `background-attachment` 프로퍼티에 fixed 키워드를 지정한다.
```html
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia harum
consequatur reprehenderit id nulla tenetur fugit aperiam natus
asperiores quos facilis veniam perferendis omnis doloremque ipsum,
delectus laudantium, commodi accusamus?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia harum
consequatur reprehenderit id nulla tenetur fugit aperiam natus
asperiores quos facilis veniam perferendis omnis doloremque ipsum,
delectus laudantium, commodi accusamus?
```
위와 아래의 배경화면을 모두 고정시켰기 때문에 스크롤을 해도 움직이지 않는다.
> 지금까지 한 번도 사용하지 않았던 프로퍼티이다. 하지만 직접 적용하고 보니 완전 멋져..
***
## 6. background-position 프로퍼티
일반적으로 `background-image`는 좌상단부터 이미지를 출력한다. `background-position` 속성을 이용하면 배경 이미지의 수평 위치 또는 수직 위치의 값을 지정할 수 있다.
기본값 `background-position: 0% 0%;`\
기본형 `background-position: <수평 위치> <수직 위치>;`
프로퍼티값을 하나만 지정한다면 웹 브라우저에서는 지정한 값을 수평 위치값으로 간주하고, 수직 위칫값은 50%나 center로 간주한다.
```html
top
bottom
center
left
right
25% 75%
10px 20px
```
***
## 7. background-origin 프로퍼티
`background-origin` 프로퍼티를 지정하여 배경 이미지를 패딩까지 표시하거나 테두리까지 포함해서 표시할 수 있다.
아래의 표는 `background-origin` 프로퍼티값이다.
| 종류 | 설명 |
| ----------- | ------------------------------ |
| content-box | 박스 모델에서 내용 부분에만 이미지를 표시한다. 기본값 |
| padding-box | 박스 모델에서 패딩까지 배경 이미지를 표시한다. |
| border-box | 박스 모델에서 테두리까지 배경 이미지를 표시한다. |
```html
content-box
padding-box
border-box
```
***
## 8. background-color 프로퍼티
배경색을 지정하려면 배경을 넣고 싶은 요소의 스타일 규칙을 만들 때 `background-color` 프로퍼티를 사용한다. `background-color`는 16진수나 rgb값 또는 색상 이름을 사용하여 지정한다. 또한 transparent키워드를 지정할 수 있다.
```css
div {
background-color: #000000;
background-color: rgb(255, 255, 255);
background-color: white;
}
```
***
## 9. background-clip 프로퍼티
배경을 넣고 싶은 요소마다 속성을 입력하면 되지만 박스 모델 관점에서 배경의 범위를 조절할 수도 있다. 테두리까지 적용할지, 패딩 범위까지 적용할지, 아니면 내용 부분에만 적용할지 선택할 수 있다.
| 종류 | 설명 |
| ----------- | ----------------------------- |
| border-box | 박스 모델의 가장 외곽인 테두리까지 적용한다. 기본값 |
| padding-box | 박스 모델에서 테두리를 뺀 패딩 범위까지만 적용한다. |
| content-box | 박스 모델에서 내용(콘텐츠) 부분에만 적용한다. |
```html
content-box
padding-box
border-box
```
***
## 10. background Shorthand
background-color, background-image, background-repeat, background-position를 하번에 정의하기 위한 Shorthand Syntax이다.
기본형 `background: color || image || repeat || attachment || position`
```html
```
***
## 11. Conclusion
> `background`관련 프로퍼티는 자주 사용하는 것 중 하나이다. 그래서 많이 사용해왔다. 처음 해당 프로퍼티를 사용했을 때에는 `backgrounbd-position`, `background-size`를 통해 이미지를 박스에 잘 맞게 구성하는 것 까지만 해도 굉장히 기분이 좋았고 이후에는 다른 프로퍼티에 대해 잘 알아보지 않고 지내왔다.\
> 이번에 공부하면서 한 번도 사용해보지 않았던 `background-attachment` 프로퍼티를 처음 사용해봤는데 정말 신세계였다. 배경이미지가 스크롤되지 않고 그 자리 그대로 있다는 것이 글로는 이해가 잘 되지 않았는데 직접 코드를 작성하고 결과물을 보니 너무 멋졌다. 그래서 해당 프로퍼티를 배우고 잠깐 멈춘 후 계속해서 여러가지 시도를 했다. 이 프로퍼티를 앞으로 잘 활용하여 더 멋진 웹 페이즈를 만들어야 겠다😃
***
## 참고
[poiemaweb 2-6 백그라운드](https://poiemaweb.com/css3-background)\
도서 - HTML + CSS + 자바스크립트 웹 표준의 정석
***
[👆](#background)
📅 2022-07-19