css-examples/docs/12_CSS 함수.md

CSS 함수(Function)

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

수학 관련 함수 (Math Functions)

calc()

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

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

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

min()

여러 값 중 가장 작은 값 선택

• min(a, b, c, ...)

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

max()

여러 값 중 가장 큰 값 선택

• max(a, b, c, ...)

.box {
  width: max(300px, 50%); /* 300px과 50% 중 큰 값 적용 */
} /* 너비가 최소 300px 이상 유지되도록 설정 가능! */

clamp()

값이 특정 범위를 벗어나지 않도록 제한

• clamp(최소값, 기본값, 최대값)

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) 추가

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) : 투명도 추가

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

currentColor

currentColor는 현재 요소의 color 값을 자동으로 상속받음

h1 {
  color: blue;
  border: 2px solid currentColor;
} /* 텍스트 색상이 파란색이면, 테두리도 자동으로 파란색이 됨! */

변형(Transform) 관련 함수

CSS에서 요소를 변형할 때 사용되는 함수들!

translate(x, y)

• x, y 방향으로 요소를 이동
• %, px, vw 등의 단위 사용 가능

.box {
  transform: translate(50px, 20px);
  /* 가로 50px, 세로 20px 이동! */
}

rotate(deg)

요소를 각도(deg) 만큼 회전

.box {
  transform: rotate(45deg); /*  45도 회전! */
}

scale(x, y)

요소의 크기를 확대/축소

• 1은 원래 크기, 0.5는 절반 크기

.box {
  transform: scale(1.5, 2); /* 가로 1.5배, 세로 2배 확대! */
}

skew(x, y)

요소를 x, y 방향으로 기울이기

.box {
  transform: skew(20deg, 10deg); /* 가로 20도, 세로 10도 기울이기! */
}

rotateX(deg)

.box { /* X축 기준으로 45도 회전! */
  transform: rotateX(45deg);
}

rotateY(deg)

.box { /* Y축 기준으로 60도 회전! */
  transform: rotateY(60deg);
}

rotateZ(deg)

.box { /* Z축 기준으로 30도 회전! */
  transform: rotateZ(30deg);
}

translate3d(x, y, z)

.box {
  transform: translate3d(50px, 20px, 100px);
}

scale3d(x, y, z)

.box {
  transform: scale3d(1.5, 1.5, 1.5);
}

애니메이션 관련 함수

cubic-bezier()

애니메이션 속도를 조절하는 베지어 곡선

.box {
  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

steps()

애니메이션을 부드럽게 하지 않고 계단식으로 나눠 실행

.loading {
  animation: blink 1s steps(5, end) infinite;
  /* 5단계로 깜빡이는 애니메이션! */
}