Css Functions

1. RGB / RGBA

   background-color: rgb(255, 0, 0);
   background-color: rgba(255, 0, 0, 0.5);

2. HSL / HSLA

   color: hsl(120, 100%, 50%);
   color: hsla(120, 100%, 50%, 0.3);

3. Calc

   width: calc(100% - 40px);

4. Var

   :root {
     --main-color: blue;
   }
   div {
     color: var(--main-color, red);
   }

5. Linear-Gradient

   background: linear-gradient(to right, red, yellow);

6. Clamp

   font-size: clamp(1rem, 2vw, 1.5rem);

7. Min / Max

   width: min(100%, 600px);
   width: max(300px, 50%);

8. URL

   background-image: url("image.jpg");

9. Attr

   [data-value]:before {
     content: attr(data-value);
   }

10. Repeating-Linear-Gradient

    background: repeating-linear-gradient(45deg, red 0%, yellow 25%, green 50%);

11. Cubic-Bezier

    transition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);

12. Filter Functions

    filter: blur(5px) brightness(150%) contrast(75%);

13. Mathematical Functions: sin, cos, tan, acos, asin, atan, atan2

    --angle: 45deg;
    width: calc(100px * cos(var(--angle)));
    height: calc(100px * sin(var(--angle)));

이러한 함수들은 CSS에서 다양한 디자인과 레이아웃을 생성하는 데 사용됩니다. 일부 함수는 최신 브라우저에서만 지원될 수 있으므로, 여러 브라우저에서의 호환성을 확인하는 것이 좋습니다.