CSS Reference
HTML
JavaScript
SVG
Linux Server
Development
highlight_alt
Selector
work_outline
Properties
settings
Functions
rule
Rules
category
Types
straighten
Units
article
Documents
manage_search
Indexing
search
검색
Functions
Functions
Background
conic-gradient()
linear-gradient()
radial-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
Box Sizing
fit-content()
Color
hsl()
hsla()
rgb()
rgba()
Create Value
attr()
counter()
counters()
format()
leader()
local()
repeat()
target-counter()
target-counters()
target-text()
tech()
url()
var()
Filter
blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
Image
image()
Math
abs()
calc()
minmax()
Motion
cubic-bezier()
Shape
circle()
ellipse()
inset()
polygon()
rect()
Transform
matrix()
rotate()
scale()
scaleX()
scaleY()
skew()
skewX()
skewY()
translate()
translateX()
translateY()
Transform 3D
matrix3d()
perspective()
rotate3d()
rotateX()
rotateY()
rotateZ()
scaleZ()
translate3d()
translateZ()
CSS Functions
CSS는 속성 값을 설정할 때 사용할 수 있는 다양한 내장된 함수를 가지고 있다.
Background
배경 설정 관련 함수
conic-gradient()
중심점을 기준으로 회전하는 방식으로 그라데이션을 생성한다.
linear-gradient()
배경 이미지로 선형 그라디언트를 생성하여 값으로 사용한다.
radial-gradient()
배경이미지로 원형 그라디언트를 생성해서 값으로 사용한다.
repeating-linear-gradient()
반복되는 선형 그라디언트를 생성한다.
repeating-radial-gradient()
반복되는 원형 그라디언트를 생성한다.
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축으로 이동 처리한다.