2025-02-03T13:25:31

docs/12_CSS 함수.md

@@ -0,0 +1,182 @@
+# 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단계로 깜빡이는 애니메이션! */
+}
+```
+
+
+