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

• blur()

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

• brightness()

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

• contrast()

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

• drop-shadow()

  그림자를 생성한다.

• grayscale()

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

• hue-rotate()

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

• invert()

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

• opacity()

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

• saturate()

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

• sepia()

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

Motion

• cubic-bezier()

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

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

Transform 3D