# 배경 및 색상
웹페이지의 디자인을 풍부하게 만들려면 배경(Background)과 색상(Color) 관련 속성을 잘 활용해야 해!

| 속성 | 설명 | 옵션 |
|---|---|---|
| background | 요소의 배경 | |
| color | 글자 색상을 지정 | |
| opacity | 요소의 투명도 | 0 ~ 1 |

## background
```css
.box {
  background: lightblue url('background.jpg') no-repeat center/cover;
}
```

| 속성 | 설명 | 옵션 |
|---|---|---|
| background-image | 배경에 이미지 추가 | url('image.jpg'), none |
| background-size | 배경 이미지 크기 조정 | auto, cover, contain, px, % |
| background-position | 배경 이미지 위치 지정 | left top, center center, right bottom, % |
| background-repeat | 배경 이미지 반복 설정 | repeat, no-repeat, repeat-x, repeat-y | 
| background-attachment | 배경 이미지 스크롤 여부 | scroll, fixed, local |
| background-blend-mode | 배경과 이미지 혼합 모드 | normal, multiply, overlay, screen | 

### background-color
요소의 배경 색을 지정
* 색상 값: red, #ff0000, rgb(255, 0, 0), rgba(255, 0, 0, 0.5), transparent 등
```css
.box {
  background-color: lightblue;
}
```

### background-image
배경에 이미지를 추가할 때 사용
```css
.box1 {
  background-image: url('background.jpg');
}
.box2 {
  background-image: linear-gradient(to right, red, blue);
}
```

### background-size
배경 이미지를 어떻게 크기 조정할지 결정
* auto :	원본 크기 유지 (기본값)
* cover :	요소를 덮도록 확대 (비율 유지)
* contain :	요소 안에 맞춤 (비율 유지)
* 100px 200px :	가로 100px, 세로 200px 크기로 조정
```css
.box {
  background-image: url('background.jpg');
  background-size: cover;
}
```

### background-position 
배경 이미지가 요소 안에서 어디에 배치될지를 지정
* left top :	왼쪽 상단 (기본값)
* center center: 	정중앙
* right bottom :	오른쪽 하단
* 50% 50% :	가로 50%, 세로 50% (중앙 정렬)
```css
.box {
  background-image: url('background.jpg');
  background-position: center;
}
```

### background-repeat
배경 이미지가 반복되는 방식 설정
* repeat :	가로와 세로로 반복 (기본값)
* repeat-x :	가로 방향으로만 반복
* repeat-y :	세로 방향으로만 반복
* no-repeat :	반복 없음
```css
.box {
  background-image: url('pattern.png');
  background-repeat: no-repeat;
}
```

### background-attachment
배경 이미지가 스크롤될 때 움직이는 방식 설정
* scroll :	스크롤 시 배경도 함께 이동 (기본값)
* fixed :	배경을 고정 (스크롤해도 움직이지 않음)
* local :	콘텐츠 안에서만 스크롤됨
```css
.box {
  background-image: url('background.jpg');
  background-attachment: fixed;
}
```

### background-clip 
배경이 요소의 어느 영역까지 확장될지를 결정
* border-box :	테두리까지 확장 (기본값)
* padding-box :	패딩까지만 적용
* content-box :	내용 영역까지만 적용
```css
.box {
  background-color: lightblue;
  background-clip: padding-box;
}
```

### background-origin 
배경 이미지가 시작되는 기준점을 결정
* border-box :	테두리를 기준으로 시작
* padding-box :	패딩을 기준으로 시작 (기본값)
* content-box :	내용 영역을 기준으로 시작
```css
.box {
  background-image: url('background.jpg');
  background-origin: content-box;
}
```
### background-blend-mode
* normal, multiply, overlay, screen

## color
글자 색상을 지정
```css
p {
  color: red; /* 글자를 빨간색으로 설정 */
}
```
```css
p {
  color: rgba(255, 0, 0, 0.5);
}
```

## opacity
요소 전체의 투명도를 조절 
* 0 ~ 1 값 사용
```css
.box {
  background-color: black;
  opacity: 0.5;
}
```
> opacity를 사용하면 요소 전체가 투명해지므로,
배경만 투명하게 하려면 rgba()를 사용해야 함!
> ```css
> .box {
>   background-color: rgba(0, 0, 0, 0.5); /* 배경만 투명 */
> }
> ```

## 색상 값
CSS에서는 다양한 방식으로 색상을 표현할 수 있어.

### 색상 이름 (Color Keywords)
CSS는 기본적으로 140개 이상의 색상 이름을 제공해.
red, blue, green, yellow 같은 이름을 사용하면 쉽게 색상을 지정할 수 있어.

* 기본 색상: red, blue, green, yellow, black, white
* 밝은 색상: lightblue, lightgreen, lightgray
* 어두운 색상: darkblue, darkred, darkgray
* 투명한 색상: transparent

```css
h1 {
  color: red;   /* 빨간색 */
}
p {
  color: lightblue;  /* 연한 파란색 */
}
```
### HEX 코드 (#RRGGBB)
HEX 코드(16진수)는 빨강(R), 초록(G), 파랑(B) 값을 조합하여 색상을 표현하는 방식이야.
#RRGGBB 형식으로 사용되며, 각 값은 00(0%) ~ FF(100%) 사이의 숫자로 표현돼.
```css
h1 {
  color: #ff0000; /* 빨강 */
}
p {
  color: #00ff00; /* 초록 */
}
span {
  color: #0000ff; /* 파랑 */
}
```
> 세 자리 HEX 값은 자동으로 확장됨! (#F00 = #FF0000)
```css
h1 {
  color: #f00; /* 빨강 */
}
```
### RGB (rgb(R, G, B))
RGB는 빨강(R), 초록(G), 파랑(B) 값을 0~255 범위의 숫자로 지정하는 방식이야.
16진수를 이해하기 어려울 때 더 직관적으로 사용할 수 있어!

```css
h1 {
  color: rgb(255, 0, 0); /* 빨강 */
}
p {
  color: rgb(0, 255, 0); /* 초록 */
}
span {
  color: rgb(0, 0, 255); /* 파랑 */
}
```
### RGBA (rgba(R, G, B, A))
RGBA는 RGB 색상에 투명도(A: Alpha) 값을 추가한 형식이야.
A 값은 0(완전 투명) ~ 1(완전 불투명) 사이의 숫자로 설정돼.
```css
h1 {
  color: rgba(255, 0, 0, 0.5); /* 반투명 빨강 */
}
p {
  color: rgba(0, 255, 0, 0.3); /* 더 투명한 초록 */
}
span {
  color: rgba(0, 0, 255, 0.8); /* 조금만 투명한 파랑 */
}
```
### HSL (hsl(H, S, L))
HSL은 색상(Hue), 채도(Saturation), 밝기(Lightness) 를 기준으로 색상을 지정하는 방식이야.
직관적으로 색상을 조절할 수 있는 장점이 있어!
* H (색상) :	0~360 (빨강: 0, 초록: 120, 파랑: 240)
* S (채도) :	0% (회색) ~ 100% (선명한 색)
* L (밝기) :	0% (검정) ~ 100% (흰색)
```css
h1 {
  color: hsl(0, 100%, 50%); /* 빨강 */
}
p {
  color: hsl(120, 100%, 50%); /* 초록 */
}
span {
  color: hsl(240, 100%, 50%); /* 파랑 */
}
```
### HSLA (hsla(H, S, L, A))
HSLA는 HSL 색상에 투명도(A: Alpha) 값을 추가한 방식이야.
RGBA와 동일하게 투명도를 0(완전 투명) ~ 1(완전 불투명) 범위로 조절 가능!
```css
h1 {
  color: hsla(0, 100%, 50%, 0.5); /* 반투명 빨강 */
}
p {
  color: hsla(120, 100%, 50%, 0.3); /* 더 투명한 초록 */
}
span {
  color: hsla(240, 100%, 50%, 0.8); /* 조금만 투명한 파랑 */
}
```