Functions

Functions

CSS Functions

CSS는 속성 값을 설정할 때 사용할 수 있는 다양한 내장된 함수를 가지고 있다.

  • Auto Box Sizing

    • fit-content()

      인수(argument)로 전달된 값은 minmax(auto, max-content)와 minmax(auto, argument) 중 더 작은 값으로 계산된다.

  • Color

    CSS에는 기본적으로 색상 값을 생성해 주는 내장된 함수들이 존재한다. RGB에서 부터 최근에 많이 채택되고 있는 HWB까지 다양한 방식으로 색을 만들어 낼 수 있는 함수들을 지원한다.

    • color()

      다른 색상 함수처럼 암시적인 sRGB 색상 공간이 아닌 명시적인 색상 공간에서 색상을 지정한다.

    • hsl()

      색상(Hue), 채도(Saturation), 밝기(Lightness) 매개 변수 값으로 색상을 생성한다.

    • hsla()

      색상(Hue), 채도(Saturation), 밝기(Lightness), 투명도(Alpha) 매개 변수 값으로 색상을 생성한다.

    • hwb()

      색상(hue), 백색률(whiteness), 흑색률(blackness)을 사용해서 색상을 생성한다.

    • lab()

      CIE(국제조명위원회)에서 규정한 중앙에 밝기 축이 있는 직사각형 좌표계를 이용해 색을 생성한다.

    • lch()

      Lab 색 공간이 사용하는 좌표계에서 L 축은 동일하지만 극좌표의 C(채도)와 H(색조)를 사용하여 색을 생성한다.

    • oklab()

      CIE Lab에 비해 개선된 색 공간을 통해 색을 지정한다.

    • oklch()

      LCH에 비해 개선된 색 공간을 통해 색을 지정한다.

    • rgb()

      RGB 방식으로 색상을 설정한다.

    • rgba()

      기본적으로 rgb() 함수와 동일하며 추가적으로 투명도(alpha)를 지정할 수 있다.

  • Custom Properties for Cascading Variables

    • var()

      작성자 지정 속성 값을 사용할 수 있다.

  • Easing Functions

    • cubic-bezier()

      애니메이션 중 1차원 값이 얼마나 빠르게 변화하는 지를 설명하는 수학 함수를 나타낸다.

    • steps()

      주어진 애니메이션 시간을 길이가 동일한 지정된 수의 간격으로 나누어서 동작을 만든다.

  • Environment Variables

    • env()

      유저 에이전트(user agent)의 환경 변수의 값을 CSS에서 사용 하고자 할 때 제공되는 함수이다.

  • Filter Effects

    • blur()

      가우시안 블러(gaussian blur)를 적용하여 이미지를 흐리게 처리한다.

    • brightness()

      이미지의 밝기를 조절한다.

    • contrast()

      이미지의 색상 대비를 조절한다.

    • drop-shadow()

      그림자를 생성한다.

    • grayscale()

      이미지를 흑백으로 변환한다.

    • hue-rotate()

      이미지의 전체 색조를 조절한다.

    • invert()

      이미지의 색상을 반전한다.

    • opacity()

      이미지의 투명도를 조절한다.

    • saturate()

      이미지의 채도를 조절한다.

    • sepia()

      이미지에 세피아 톤을 적용한다.

  • Grid Layout

    • minmax()

      최소값과 최대값을 한번에 지정한다. 따라서 이 값을 갖는 속성은 최소값과 최대값 사이에서 100% 값으로 처리된다.

    • repeat()

      그리드 레이아웃에서 트랙내 반복되는 그리드 항목의 지정된 횟수와 패턴에 따라 반복적인 배치를 한다.

  • Image

    • conic-gradient()

      중심점을 기준으로 회전하는 방식으로 그라데이션을 생성한다.

    • cross-fade()

      이미지 사이를 전환할 때 CSS는 시작 및 종료 이미지의 조합인 중간 이미지를 명시적으로 참조하는 방법이 필요하다. 이것은 결합할 두 이미지와 결합이 전환에서 얼마나 멀리 있는지를 나타내는 cross-fade() 함수로 수행된다.

    • element()

      작성자가 문서의 요소를 이미지로 사용할 수 있다. 참조된 요소의 모양이 변경되면 이미지도 변경된다.

    • image-set()

      사용자의 장치에서 가장 적합한 이미지의 해상도를 보여줄 수 있도록 한다.

    • linear-gradient()

      선형 그라디언트를 생성한다.

    • radial-gradient()

      원형 그라디언트를 생성한다.

    • repeating-conic-gradient()

      설정된 <conic-gradient> 타입의 값을 중심점을 기준으로 회전하는 방식으로 반복 그라데이션을 생성한다.

    • repeating-linear-gradient()

      설정된 <linear-gradient> 값이 반복되는 선형 그라디언트를 생성한다.

    • repeating-radial-gradient()

      설정된 <radial-gradient> 값이 반복되는 원형 그라디언트를 생성한다.

  • List and Counter

    • counter()

      문서의 구성 요소에 따라 순서를 설정하여 번호를 매길 수 있다. 일반적으로 가상 요소로 사용된다.

    • counters()

      중첩된 목록 요소에 일관성 있는 순서를 설정하여 차례를 지정할 수 있다. 일반적으로 가상 요소로 사용된다.

  • Shapes

    • circle()

      정원을 생성한다.

    • ellipse()

      x축과 y축 반지름 값을 설정해 타원을 생성한다.

    • inset()

      삽입될 직사각형을 정의한다.

    • path()

      자유로운 패스를 생성한다.

    • polygon()

      다각형을 생성한다.

    • rect()

      사각형을 생성하는 함수이다.

  • Transform

    • matrix()

      6개의 매개 변수 값을 이용해서 2차원적인 변환 처리를 해준다.

    • matrix3d()

      16개의 매개 변수 값으로 4x4 행렬을 사용하여 3차원적인 변형을 처리한다.

    • perspective()

      사용자와 z축으로 평면상의 거리를 설정한다.

    • rotate()

      2차원 방식으로 회전 처리한다.

    • rotate3d()

      3차원 공간에 회전축을 지정하여 회전처리한다.

    • rotateX()

      x 회전축으로 3차원 방식으로 회전처리 한다.

    • rotateY()

      y 회전축으로 3차원 방식으로 회전처리 한다.

    • rotateZ()

      z 회전축으로 3차원 방식으로 회전처리 한다.

    • scale()

      가로, 세로 비율을 지정하여 크기를 변경한다.

    • scale3d()

      x, y, z 축 방향으로 크기 조정을 한다.

    • scaleX()

      x축 방향으로 크기 비율을 지정하여 크기 변형을 처리한다.

    • scaleY()

      y축 방향으로 크기 비율을 지정하여 크기 변형을 처리한다.

    • scaleZ()

      3D 공간에서 z축 방향으로 크기 비율을 지정하여 크기 변형을 처리한다.

    • skew()

      매개 변수로 지정된 X, Y축의 각도에 따라 2차원 방식으로 기울기를 처리한다.

    • skewX()

      매개 변수로 지정된 X축의 각도에 따라 2차원 방식으로 기울기를 처리한다.

    • skewY()

      매개 변수로 지정된 Y축의 각도에 따라 2차원 방식으로 기울기를 처리한다.

    • translate()

      요소를 지정된 x, y 좌표 위치로 이동한다.

    • translate3d()

      x축과 y축 그리고 z축의 값을 이용하여 3차원 방식으로 이동처리한다.

    • translateX()

      대상을 x축으로 이동한다. 음수값을 허용한다.

    • translateY()

      매개 변수의 값을 통해 y축으로 이동 처리한다. 음수값을 허용한다.

    • translateZ()

      매개 변수의 값을 통해 z축으로 이동 처리한다. 음수값을 허용한다.

  • Values and Units

    • acos()

      cos() 삼각 함수에 대한 역함수이다.

    • asin()

      sin() 삼각 함수에 대한 역함수이다.

    • atan()

      tan() 삼각 함수에 대한 역함수이다.

    • atan2()

      -infinity(음수 무한대)와 infinity(양수 무한대) 사이의  두 값의 역탄젠트(atan)를 계산한다.

    • attr()

      선택자의 속성 값을 반환해준다.

    • calc()

      숫자 또는 숫자와 단위로 구성된 속성의 값을 수학 표현식으로 생성한다.

    • clamp()

      최소값(MIN), 비교값(VAL), 최대값(MAX) 세 개의 인자를 받아 max(MIN, min(VAL, MAX))와 동일한 결과 값을 계산한다.

    • cos()

      코사인(cosine)을 계산하는 삼각 함수이다.

    • max()

      설정된 인수 중에서 최대값을 사용한다.

    • min()

      설정된 인수 중에서 최소값을 사용한다.

    • sin()

      사인(sine)을 계산하는 삼각함수이다.

    • tan()

      탄젠트(tangent)를 계산하는 삼각 함수이다.

    • url()

      CSS에서 사용할 외부 리소스를 가져온다.

©2023 devdic.com, Korea

출처를 밝힌 리소스 이외의 본 레퍼런스에 사용된 모든 생성물의 소유 및 저작권은 devdic.com에 있습니다. 특별히 재배포를 금지한 것 이외는 재배포가 가능하며 반드시 출처를 표기해 주시기 바랍니다.
현재는 베타 버전으로 미등록 및 불완전한 콘텐츠가 일부 있을 수 있습니다. 오류 및 기술 자료 제보(건의)는 언제든지 환영하며 감사드립니다.
기본적으로 W3C 기술 사양을 기준으로 작성하였으며 일반적이지 않은 기술 설명에 대한 내용의 일부는 Mozilla의 MDN web docs에서 도움 받았음을 밝힙니다. 그들을 존경합니다.

master@cydemy.com