CSS Functions

관련 속성들

• Background

  배경 설정 관련 함수

  • linear-gradient()

    배경 이미지로 선형 그라디언트를 생성하여 값으로 사용한다.

  • radial-gradient()

    배경이미지로 원형 그라디언트를 생성해서 값으로 사용한다.

  • repeating-linear-gradient()

    반복되는 선형 그라디언트를 생성한다.

  • repeating-radial-gradient()

    반복되는 원형 그라디언트를 생성한다.

• 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축으로 이동 처리한다.