코딩스쿨

▶ CSS References

CSS Functions

CSS Functions : 주요 CSS 함수 가이드

CSS 함수는 스타일 속성 값에 동적으로 계산된 값을 사용할 수 있게 해주는 기능입니다. 다양한 CSS 함수는 색상 조작, 수학적 계산, 이미지 처리, 애니메이션 제어 등 다양한 작업을 수행할 수 있습니다. 이 가이드는 CSS의 주요 함수와 사용 방법을 설명합니다.

1. `calc()`: 수학적 계산 함수

calc() 함수는 CSS 속성 값에서 사칙연산(+, -, *, /)을 사용하여 동적으로 계산된 값을 적용할 수 있게 해줍니다. 주로 너비, 높이, 여백, 패딩 등을 계산할 때 사용됩니다.

구문:
```
property: calc(expression);
```

예시:

.container {
    width: calc(100% - 50px);  /* 100%에서 50px을 뺀 너비 */
    padding: calc(20px + 10px); /* 20px과 10px을 더한 패딩 */
}

주의: 연산자와 피연산자 사이에는 반드시 공백이 있어야 합니다.

2. `var()`: CSS 변수 사용 함수

var() 함수는 CSS에서 정의된 사용자 지정 변수(CSS Custom Properties)를 참조하여 동적으로 값을 설정할 수 있게 해줍니다.

구문:
```
var(--custom-property, fallback-value);
```
- -custom-property: 참조할 CSS 변수.
- fallback-value: 변수가 정의되지 않았을 때 사용할 기본값.

예시:

:root {
    --main-color: blue;
    --padding-size: 20px;
}

.box {
    color: var(--main-color);     /* 변수 사용 */
    padding: var(--padding-size); /* 변수 사용 */
}

변수의 기본값 사용:

.box {
    color: var(--main-color, red);  /* 변수가 없으면 빨간색 사용 */
}

3. `rgb()` 및 `rgba()`: 색상 정의 함수

rgb() 함수는 빨강, 초록, 파랑 색상값을 지정하며, rgba()는 여기에 불투명도(투명도) 값을 추가할 수 있습니다.

구문:
```
rgb(red, green, blue);
rgba(red, green, blue, alpha);
```
- red, green, blue: 각각 0~255의 값을 가지며, 색상을 결정합니다.
- alpha: 0(완전 투명)에서 1(완전 불투명) 사이의 값으로 불투명도를 결정합니다.

예시:

.text {
    color: rgb(255, 0, 0);         /* 빨간색 */
    background-color: rgba(0, 0, 255, 0.5);  /* 반투명 파란색 배경 */
}

4. `hsl()` 및 `hsla()`: 색상 정의 함수 (색상, 채도, 밝기)

hsl() 함수는 색상, 채도, 밝기(Hue, Saturation, Lightness)를 사용하여 색상을 정의하며, hsla()는 여기에 불투명도 값을 추가할 수 있습니다.

구문:
```
hsl(hue, saturation, lightness);
hsla(hue, saturation, lightness, alpha);
```
- hue: 색상을 나타내는 0~360도의 값. 0은 빨강, 120은 초록, 240은 파랑.
- saturation: 0%~100%의 값으로 색의 강도를 나타냅니다.
- lightness: 0%~100%의 값으로 밝기를 나타냅니다.
- alpha: 0~1 사이의 불투명도.

예시:

.box {
    background-color: hsl(120, 100%, 50%);   /* 밝은 초록색 */
    color: hsla(0, 100%, 50%, 0.7);          /* 반투명 빨간색 텍스트 */
}

5. `url()`: 리소스 경로 지정 함수

url() 함수는 이미지, 폰트 등 외부 리소스 파일을 참조하는 데 사용됩니다.

구문:
```
url(path-to-resource);
```

예시:

.background {
    background-image: url('images/background.jpg');
}

@font-face {
    font-family: 'CustomFont';
    src: url('fonts/customfont.woff2') format('woff2');
}

6. `linear-gradient()`: 그라디언트 배경 설정 함수

linear-gradient() 함수는 선형 그라디언트를 생성하여 배경으로 적용할 수 있습니다.

구문:
```
linear-gradient(direction, color-stop1, color-stop2, ...);
```
- direction: 그라디언트의 방향(각도 또는 키워드).
- color-stop: 시작 및 끝 색상과 중간에 위치할 색상들.

예시:

.box {
    background: linear-gradient(to right, red, yellow);
}

.diagonal {
    background: linear-gradient(45deg, blue, green);
}

7. `radial-gradient()`: 방사형 그라디언트 설정 함수

radial-gradient() 함수는 중심에서 바깥쪽으로 퍼지는 방사형 그라디언트를 설정합니다.

구문:
```
radial-gradient(shape-size, color-stop1, color-stop2, ...);
```
- shape-size: 그라디언트의 모양(기본값은 ellipse)과 크기.
- color-stop: 그라디언트에 포함될 색상들.

예시:

.circle {
    background: radial-gradient(circle, red, yellow);
}

.ellipse {
    background: radial-gradient(ellipse, blue, green);
}

8. `conic-gradient()`: 원형 그라디언트 설정 함수 (CSS 4)

conic-gradient() 함수는 원형의 각도를 기준으로 그라디언트를 생성합니다.

구문:
```
conic-gradient(from angle, color-stop1, color-stop2, ...);
```
- angle: 그라디언트 시작 각도.
- color-stop: 그라디언트에 포함될 색상들.

예시:

.pie-chart {
    background: conic-gradient(from 90deg, red, yellow, green);
}

9. `rotate()`, `translate()`, `scale()`: 변환 함수

변환 함수는 요소의 위치, 크기, 회전 등을 조작하는 데 사용됩니다. 주로 transform 속성과 함께 사용됩니다.

9.1 `rotate()`: 회전 변환

구문:
```
transform: rotate(angle);
```
- angle: 회전 각도 (예: 45deg, 90deg).

예시:

.rotate {
    transform: rotate(45deg);
}

9.2 `translate()`: 이동 변환

구문:
```
transform: translate(x, y);
```
- x, y: 각각 X축과 Y축으로 이동할 거리.

예시:

.move {
    transform: translate(50px, 100px);
}

9.3 `scale()`: 크기 변환

구문:
```
transform: scale(x, y);
```
- x, y: 각각 너비와 높이 비율.

예시:

.scale {
    transform: scale(2, 1.5); /* 너비 2배, 높이 1.5배 확대 */
}

10. `cubic-bezier()`: 커스텀 애니메이션 타이밍 함수

cubic-bezier() 함수는 CSS 애니메이션과 전환의 타이밍을 커스터마이징할 수 있게 해줍니다. 4개의 숫자를 사용해 애니메이션 속도의 시작과 끝을 제어합니다.

구문:
```
transition
```
timing-function: cubic-bezier(x1, y1, x2, y2);


- **`x1`, `y1`, `x2`, `y2`**: 베지어 곡선을 정의하는 제어점.

- **예시**:

```css
.box {
    transition: all 2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

요약

CSS 함수는 스타일 속성 값을 동적으로 처리하거나, 색상, 크기, 위치, 애니메이션 등을 제어하는 강력한 도구입니다. calc(), var(), rgb(), linear-gradient(), **transform()**과 같은 함수들은 CSS 속성 값의 계산을 자동화하고, 복잡한 디자인 작업을 단순화하는 데 유용합니다. 이 가이드는 CSS에서 자주 사용되는 함수들의 기본 개념과 사용법을 설명하여, 웹 디자인과 스타일링 작업에 효율성을 더할 수 있습니다.

코딩 스쿨 CSS

CSS Functions

CSS Functions : 주요 CSS 함수 가이드

1. calc(): 수학적 계산 함수

2. var(): CSS 변수 사용 함수

3. rgb() 및 rgba(): 색상 정의 함수

4. hsl() 및 hsla(): 색상 정의 함수 (색상, 채도, 밝기)

5. url(): 리소스 경로 지정 함수

6. linear-gradient(): 그라디언트 배경 설정 함수

7. radial-gradient(): 방사형 그라디언트 설정 함수

8. conic-gradient(): 원형 그라디언트 설정 함수 (CSS 4)

9. rotate(), translate(), scale(): 변환 함수

9.1 rotate(): 회전 변환

9.2 translate(): 이동 변환

9.3 scale(): 크기 변환

10. cubic-bezier(): 커스텀 애니메이션 타이밍 함수

요약