# CSS 함수(Function)

CSS에서는 값을 동적으로 계산하거나 조작할 수 있는 다양한 함수를 제공해.
색상, 크기, 위치, 애니메이션, 변형(Transform) 등을 다룰 때 유용해!

## 수학 관련 함수 (Math Functions)

### calc()
calc() 함수는 다양한 단위를 혼합하여 연산할 수 있는 함수야.

* +, -, *, / 연산 가능
* 픽셀(px), 백분율(%), em, rem 등 서로 다른 단위도 조합 가능!
* 동적으로 크기를 계산할 때 매우 유용!

```css
.box {
  width: calc(100% - 50px); /* 부모 너비에서 50px 빼기 */
  height: calc(50vh + 20px); /* 화면 높이의 50% + 20px */
}
```

### min()
여러 값 중 가장 작은 값 선택

* `min(a, b, c, ...)`

```css
.box {
  width: min(500px, 80%); /* 500px과 80% 중 작은 값 적용 */
} /* 너비가 80%를 넘지 않도록 제한 가능! */
```

### max()
여러 값 중 가장 큰 값 선택

* `max(a, b, c, ...)`

```css
.box {
  width: max(300px, 50%); /* 300px과 50% 중 큰 값 적용 */
} /* 너비가 최소 300px 이상 유지되도록 설정 가능! */
```
### clamp()
값이 특정 범위를 벗어나지 않도록 제한

* `clamp(최소값, 기본값, 최대값)`

```css
p {
  font-size: clamp(12px, 2vw, 24px);
} /* 기본적으로 2vw(화면 너비 2%)를 적용하지만, 최소 12px, 최대 24px로 제한! */
```

## 색상 관련 함수 (Color Functions)
### rgb() / rgba()
* `rgb(r, g, b)` : RGB 색상 지정
* `rgba(r, g, b, a)` : 투명도(A: 0~1) 추가

```css
h1 {
  color: rgb(255, 0, 0); /* 빨강 */
}
p {
  color: rgba(0, 0, 255, 0.5); /* 반투명 파랑 */
}
```

### hsl() / hsla()
HSL 방식은 색상을 직관적으로 조절할 때 유용해!
* `hsl(hue, saturation, lightness)` : 색상, 채도, 밝기로 색상 지정
* `hsla(hue, saturation, lightness, alpha)` : 투명도 추가

```css
h1 {
  color: hsl(120, 100%, 50%); /* 초록색 */
}
p {
  color: hsla(240, 100%, 50%, 0.7); /* 반투명 파랑 */
}
```

### currentColor
currentColor는 현재 요소의 color 값을 자동으로 상속받음
```css
h1 {
  color: blue;
  border: 2px solid currentColor;
} /* 텍스트 색상이 파란색이면, 테두리도 자동으로 파란색이 됨! */
```

## 변형(Transform) 관련 함수
CSS에서 요소를 변형할 때 사용되는 함수들!

### translate(x, y)
* x, y 방향으로 요소를 이동
* %, px, vw 등의 단위 사용 가능

```css
.box {
  transform: translate(50px, 20px);
  /* 가로 50px, 세로 20px 이동! */
}
```
### rotate(deg)
요소를 각도(deg) 만큼 회전
```css
.box {
  transform: rotate(45deg); /*  45도 회전! */
}
```

### scale(x, y)
요소의 크기를 확대/축소
* 1은 원래 크기, 0.5는 절반 크기
```css
.box {
  transform: scale(1.5, 2); /* 가로 1.5배, 세로 2배 확대! */
}
```

### skew(x, y)
요소를 x, y 방향으로 기울이기
```css
.box {
  transform: skew(20deg, 10deg); /* 가로 20도, 세로 10도 기울이기! */
}
```

### rotateX(deg)
```css
.box { /* X축 기준으로 45도 회전! */
  transform: rotateX(45deg);
}
```
### rotateY(deg)
```css
.box { /* Y축 기준으로 60도 회전! */
  transform: rotateY(60deg);
}
```
### rotateZ(deg)
```css
.box { /* Z축 기준으로 30도 회전! */
  transform: rotateZ(30deg);
}
```
### translate3d(x, y, z)
```css
.box {
  transform: translate3d(50px, 20px, 100px);
}
```
### scale3d(x, y, z)
```css
.box {
  transform: scale3d(1.5, 1.5, 1.5);
}
```



## 애니메이션 관련 함수

### cubic-bezier()
애니메이션 속도를 조절하는 베지어 곡선
```css
.box {
  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}
```

### steps()
애니메이션을 부드럽게 하지 않고 계단식으로 나눠 실행
```css
.loading {
  animation: blink 1s steps(5, end) infinite;
  /* 5단계로 깜빡이는 애니메이션! */
}
```