CSS Functions

Background

• linear-gradient()

  배경 이미지로 선형 그라디언트를 생성하여 값으로 사용한다. CSS에서 가능한 방법으로 색조를 형성할 색상을 매개 변수로 추가한다. 인수 설정 방식에 따라 다양한 선형 그라디언트를 만들수 있다. rgba() 함수를 이용하여 색상을 설정하는 경우에는 투명도가 반영된 그라디언트를 만들어 낼 수 있다.

• radial-gradient()

  배경이미지로 원형 그라디언트를 생성해서 값으로 사용한다. CSS에서 가능한 방법으로 색조를 형성할 색상을 매개 변수로 추가한다. 인수 설정 방식에 따라 다양한 원형 그라디언트를 만들수 있다. rgba() 함수를 이용하여 색상을 설정하는 경우에는 투명도가 반영된 그라디언트를 만들어 낼 수 있다.

• repeating-linear-gradient()

  반복되는 선형 그라디언트를 생성한다. 기본적으로 linear-gradient() 함수와 그라데이션을 생성하는 방식은 동일하지만 요소의 영역에 무한으로 그라데이션으로 반복된다. 그라데이션으로 사용될 색을 설정시 범위를 지정해 줘야 반복되는 패턴으로 적용시킬 수 있다.

• repeating-radial-gradient()

  반복되는 원형 그라디언트를 생성한다. 기본적으로 radial-gradient() 함수와 그라데이션을 생성하는 방식은 동일하지만 요소의 영역에 무한으로 그라데이션으로 반복된다. 그라데이션으로 사용될 색을 설정시 범위를 지정해 줘야 반복되는 패턴으로 적용시킬 수 있다.

Color

• hsl()

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

• hsla()

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

• rgb()

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

• rgba()

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

Create Value

• attr()

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

• calc()

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

• counter()

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

• counters()

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

• repeat()

  그리드 레이아웃에서 트랙내 반복되는 그리드 항목의 지정된 횟수와 패턴에 따라 반복적인 배치를 한다. 이 함수는 CSS Grid 속성 grid-template-columns 및 grid-template-rows에서 사용할 수 있다.

• url()

  CSS에서 사용할 외부 리소스를 가져온다.  background, background-image, list-style, list-style-image, content, cursor, border, border-image, border-image-source, mask, mask-image의 값으로 사용된다. 또한 at-rules에서 @font-face의 src 속성, @counter-style의  symbols의 값으로도 사용된다.

• var()

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

Filter

• blur()

  가우시한 블러(Gaussian blur)를 적용하여 이미지를 흐리게 처리한다. filter와 backdrop-filter 속성에서 값으로 사용된다.

• brightness()

  이미지의 밝기를 조절한다. filter와 backdrop-filter 속성에서 값으로 사용된다.

• contrast()

  이미지의 색상 대비를 조절한다. filter와 backdrop-filter 속성에서 값으로 사용된다.

• drop-shadow()

  그림자를 생성한다. filter와 backdrop-filter 속성에서 값으로 사용된다.

• grayscale()

  이미지를 흑백으로 변환한다. filter와 backdrop-filter 속성에서 값으로 사용된다.

• hue-rotate()

  이미지의 전체 색조를 조절한다. filter와 backdrop-filter 속성에서 값으로 사용된다.

• invert()

  이미지의 색상을 반전한다. filter와 backdrop-filter 속성에서 값으로 사용된다.

• opacity()

  이미지의 투명도를 조절한다. filter와 backdrop-filter 속성에서 값으로 사용된다.

• saturate()

  이미지의 채도를 조절한다. filter와 backdrop-filter 속성에서 값으로 사용된다.

• sepia()

  이미지에 세피아 톤을 적용한다. filter와 backdrop-filter 속성에서 값으로 사용된다.

Motion

• cubic-bezier()

  애니메이션 중 1차원 값이 얼마나 빠르게 변화하는 지를 설명하는 수학 함수를 나타낸다. 이를 통해 움직임의 지속 시간에 대한 속도 변화를 줄 수 있는 3차원 베지어 곡선을 정의한다.

Shape

• circle()

  원을 생성한다.

• ellipse()

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

• inset()

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

• polygon()

  다각형을 생성한다. 다각형을 형성하기 위한 최소 3개의 포인트에 대한 좌표를 인수로 지정되어야 한다.

Transform

• matrix()

  6개의 매개 변수 값을 이용해서 2차원적인 변환 처리를 해준다. 매개 변수의 타입은 소수를 포함한 정수이다. 6개의 매개 변수 값은 차례대로 scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() 함수 값을 의미한다.

• matrix3d()

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

• perspective()

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

• rotate()

  매개 변수의 각도로 2차원 방식으로 회전 처리한다. 매개 변수의 타입은 정수이며 단위를 'deg'를 사용한다.

• rotate3d()

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

• rotateX()

  매개 변수로 지정된 각도를 통해 X축으로 3차원 방식으로 회전처리 한다. 매개 변수의 타입은 정수이며 단위를 'deg'를 사용한다.

• rotateY()

  매개 변수로 지정된 각도를 통해 Y축으로 3차원 방식으로 회전처리 한다. 매개 변수의 타입은 정수이며 단위를 'deg'를 사용한다.

• 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차원 방식으로 이동처리한다. 매개 변수의 타입은 단위 px를 사용한 정수이다.

• translateX()

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

• translateY()

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

• translateZ()

  매개 변수의 값을 통해 z축으로 이동 처리한다. 매개 변수의 타입은 단위 px를 사용한 정수이다.

Transform 3D