Functions

Draft

CSS Functions

설명

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

관련 속성들

  • Background

    배경 설정 관련 함수
  • Color

    색상 설정 관련 함수
    • hsl()

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

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

      RGB 방식으로 색상을 설정한다.
    • rgba()

      기본적으로 rgb() 함수와 동일하나 투명도를 지정할 수 있다.
  • Create Value

    값 생성과 관련된 함수
    • attr()

      선택자의 속성 값을 반환해준다.
    • calc()

      매개 변수로 주어진 값을 이용하여 속성 값으로 사용할 크기에 대한 계산을 처리한다.
    • counter()

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

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

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

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

      사용자 지정 속성 값을 적용할 수 있다.
  • Filter

    이미지를 변형하는 등의 그래픽 효과를 위한 다양한 함수이미 filter 속성의 값으로 사용
    • blur()

      Gaussian blur를 적용하여 이미지를 흐리게 처리한다.
    • brightness()

      이미지의 밝기를 조절한다.
    • contrast()

      이미지의 색상 대비를 조절한다.
    • drop-shadow()

      그림자를 생성한다.
    • grayscale()

      이미지를 흑백으로 변환한다.
    • hue-rotate()

      이미지의 전체 색조를 조절한다.
    • invert()

      이미지의 색상을 반전한다.
    • opacity()

      이미지의 투명도를 조절한다.
    • saturate()

      이미지의 채도를 조절한다.
    • sepia()

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

    전이효과, 애니메이션에 사용되는 함수
    • cubic-bezier()

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

    Shape 처리 관련 함수
    • circle()

      원을 생성한다.
    • ellipse()

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

      삽입될 직사각형을 정의한다.
    • polygon()

      다각형을 생성한다.
  • Transform

    변형처리에 사용될 수 있는 함수
    • matrix()

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

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

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

      매개 변수의 각도로 2차원 방식으로 회전 처리한다.
    • rotate3d()

      3차원 방식으로 회전처리한다.
    • rotateX()

      매개 변수로 지정된 각도를 통해 X축으로 3차원 방식으로 회전처리 한다.
    • rotateY()

      매개 변수로 지정된 각도를 통해 Y축으로 3차원 방식으로 회전처리 한다.
    • rotateZ()

      매개 변수로 지정된 각도를 통해 Z축으로 3차원 방식으로 회전처리 한다.
    • scale()

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

      가로 방향으로만 크기 비율을 지정하여 크기 변형을 처리한다.
    • scaleY()

      세로 방향으로만 크기 비율을 지정하여 크기 변형을 처리한다.
    • scaleZ()

      z축 방향으로만 크기 비율을 지정하여 크기 변형을 처리한다.
    • skew()

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

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

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

      transform 속성의  값으로 사용되며 요소를 x, y 좌표 위치로 이동할 수 있다.
    • translate3d()

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

      transform 속성의 값으로 사용되며 요소를 x축으로 이동할 수 있다.
    • translateY()

      매개 변수의 값을 통해 y축으로 이동 처리한다. 
    • translateZ()

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