Functions

Functions

CSS Functions

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

  • Background

    배경 설정 관련 함수

  • Box Sizing

    • fit-content()

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

  • Color

    색상 설정 관련 함수

    • hsl()

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

    • hsla()

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

    • rgb()

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

    • rgba()

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

  • Create Value

    값 생성과 관련된 함수

    • attr()

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

    • counter()

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

    • counters()

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

    • format()

    • leader()

      수평 공간에서 콘텐츠를 시각적으로 연결하는데 사용되는 반복 패턴을 생성한다.

    • local()

    • repeat()

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

    • target-counter()

    • target-counters()

    • target-text()

    • tech()

    • url()

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

    • var()

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

  • Filter

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

    • blur()

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

    • brightness()

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

    • contrast()

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

    • drop-shadow()

      그림자를 생성한다.

    • grayscale()

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

    • hue-rotate()

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

    • invert()

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

    • opacity()

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

    • saturate()

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

    • sepia()

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

  • Image

    • image()

      새로운 <image>를 정의한다.

  • Math

    수학관련 함수

    • abs()

      절대값을 반환한다.,

    • calc()

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

    • minmax()

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

  • Motion

    전이효과, 애니메이션에 사용되는 함수

    • cubic-bezier()

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

  • Shape

    Shape 처리 관련 함수

    • circle()

      원을 생성한다.

    • ellipse()

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

    • inset()

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

    • polygon()

      다각형을 생성한다.

    • rect()

      shape 타입의 값을 생성하는 함수이다. 클리핑 영역을 설정한다.

  • Transform

    변형처리에 사용될 수 있는 함수

    • matrix()

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

    • rotate()

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

    • scale()

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

    • scaleX()

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

    • scaleY()

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

    • skew()

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

    • skewX()

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

    • skewY()

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

    • translate()

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

    • translateX()

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

    • translateY()

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

  • Transform 3D

    입체 효과 처리에 사용되는 함수

    • matrix3d()

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

    • perspective()

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

    • rotate3d()

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

    • rotateX()

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

    • rotateY()

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

    • rotateZ()

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

    • scaleZ()

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

    • translate3d()

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

    • translateZ()

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

©2023 devdic.com, Korea

레퍼런스에 사용된 모든 소스 코드의 저작권은 devdic.com에 있으며 오류 및 기술 자료 제보(건의)는 언제든지 환영하며 감사드립니다.
일반적이지 않은 기술 설명에 대한 내용의 일부는 Mozilla의 MDN web docs에서 도움 받았음을 밝힙니다. 그들을 존경합니다.

master@cydemy.com