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
Auto Box Sizing
fit-content()
Color
color()
hsl()
hsla()
hwb()
lab()
lch()
oklab()
oklch()
rgb()
rgba()
Custom Properties for Cascading Variables
var()
Easing Functions
cubic-bezier()
steps()
Environment Variables
env()
Filter Effects
blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
Grid Layout
minmax()
repeat()
Image
conic-gradient()
cross-fade()
element()
image-set()
linear-gradient()
radial-gradient()
repeating-conic-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
List and Counter
counter()
counters()
Shapes
circle()
ellipse()
inset()
path()
polygon()
rect()
Transform
matrix()
matrix3d()
perspective()
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
skew()
skewX()
skewY()
translate()
translate3d()
translateX()
translateY()
translateZ()
Values and Units
acos()
asin()
atan()
atan2()
attr()
calc()
clamp()
cos()
max()
min()
sin()
tan()
url()
CSS Functions
CSS는 속성 값을 설정할 때 사용할 수 있는 다양한 내장된 함수를 가지고 있다.
Auto Box Sizing
fit-content()
인수(argument)로 전달된 값은 minmax(auto, max-content)와 minmax(auto, argument) 중 더 작은 값으로 계산된다.
Color
CSS에는 기본적으로 색상 값을 생성해 주는 내장된 함수들이 존재한다. RGB에서 부터 최근에 많이 채택되고 있는 HWB까지 다양한 방식으로 색을 만들어 낼 수 있는 함수들을 지원한다.
color()
다른 색상 함수처럼 암시적인 sRGB 색상 공간이 아닌 명시적인 색상 공간에서 색상을 지정한다.
hsl()
색상(Hue), 채도(Saturation), 밝기(Lightness) 매개 변수 값으로 색상을 생성한다.
hsla()
색상(Hue), 채도(Saturation), 밝기(Lightness), 투명도(Alpha) 매개 변수 값으로 색상을 생성한다.
hwb()
색상(hue), 백색률(whiteness), 흑색률(blackness)을 사용해서 색상을 생성한다.
lab()
CIE(국제조명위원회)에서 규정한 중앙에 밝기 축이 있는 직사각형 좌표계를 이용해 색을 생성한다.
lch()
Lab 색 공간이 사용하는 좌표계에서 L 축은 동일하지만 극좌표의 C(채도)와 H(색조)를 사용하여 색을 생성한다.
oklab()
CIE Lab에 비해 개선된 색 공간을 통해 색을 지정한다.
oklch()
LCH에 비해 개선된 색 공간을 통해 색을 지정한다.
rgb()
RGB 방식으로 색상을 설정한다.
rgba()
기본적으로 rgb() 함수와 동일하며 추가적으로 투명도(alpha)를 지정할 수 있다.
Custom Properties for Cascading Variables
var()
작성자 지정 속성 값을 사용할 수 있다.
Easing Functions
cubic-bezier()
애니메이션 중 1차원 값이 얼마나 빠르게 변화하는 지를 설명하는 수학 함수를 나타낸다.
steps()
주어진 애니메이션 시간을 길이가 동일한 지정된 수의 간격으로 나누어서 동작을 만든다.
Environment Variables
env()
유저 에이전트(user agent)의 환경 변수의 값을 CSS에서 사용 하고자 할 때 제공되는 함수이다.
Filter Effects
blur()
가우시안 블러(gaussian blur)를 적용하여 이미지를 흐리게 처리한다.
brightness()
이미지의 밝기를 조절한다.
contrast()
이미지의 색상 대비를 조절한다.
drop-shadow()
그림자를 생성한다.
grayscale()
이미지를 흑백으로 변환한다.
hue-rotate()
이미지의 전체 색조를 조절한다.
invert()
이미지의 색상을 반전한다.
opacity()
이미지의 투명도를 조절한다.
saturate()
이미지의 채도를 조절한다.
sepia()
이미지에 세피아 톤을 적용한다.
Grid Layout
minmax()
최소값과 최대값을 한번에 지정한다. 따라서 이 값을 갖는 속성은 최소값과 최대값 사이에서 100% 값으로 처리된다.
repeat()
그리드 레이아웃에서 트랙내 반복되는 그리드 항목의 지정된 횟수와 패턴에 따라 반복적인 배치를 한다.
Image
conic-gradient()
중심점을 기준으로 회전하는 방식으로 그라데이션을 생성한다.
cross-fade()
이미지 사이를 전환할 때 CSS는 시작 및 종료 이미지의 조합인 중간 이미지를 명시적으로 참조하는 방법이 필요하다. 이것은 결합할 두 이미지와 결합이 전환에서 얼마나 멀리 있는지를 나타내는 cross-fade() 함수로 수행된다.
element()
작성자가 문서의 요소를 이미지로 사용할 수 있다. 참조된 요소의 모양이 변경되면 이미지도 변경된다.
image-set()
사용자의 장치에서 가장 적합한 이미지의 해상도를 보여줄 수 있도록 한다.
linear-gradient()
선형 그라디언트를 생성한다.
radial-gradient()
원형 그라디언트를 생성한다.
repeating-conic-gradient()
설정된 <conic-gradient> 타입의 값을 중심점을 기준으로 회전하는 방식으로 반복 그라데이션을 생성한다.
repeating-linear-gradient()
설정된 <linear-gradient> 값이 반복되는 선형 그라디언트를 생성한다.
repeating-radial-gradient()
설정된 <radial-gradient> 값이 반복되는 원형 그라디언트를 생성한다.
List and Counter
counter()
문서의 구성 요소에 따라 순서를 설정하여 번호를 매길 수 있다. 일반적으로 가상 요소로 사용된다.
counters()
중첩된 목록 요소에 일관성 있는 순서를 설정하여 차례를 지정할 수 있다. 일반적으로 가상 요소로 사용된다.
Shapes
circle()
정원을 생성한다.
ellipse()
x축과 y축 반지름 값을 설정해 타원을 생성한다.
inset()
삽입될 직사각형을 정의한다.
path()
자유로운 패스를 생성한다.
polygon()
다각형을 생성한다.
rect()
사각형을 생성하는 함수이다.
Transform
matrix()
6개의 매개 변수 값을 이용해서 2차원적인 변환 처리를 해준다.
matrix3d()
16개의 매개 변수 값으로 4x4 행렬을 사용하여 3차원적인 변형을 처리한다.
perspective()
사용자와 z축으로 평면상의 거리를 설정한다.
rotate()
2차원 방식으로 회전 처리한다.
rotate3d()
3차원 공간에 회전축을 지정하여 회전처리한다.
rotateX()
x 회전축으로 3차원 방식으로 회전처리 한다.
rotateY()
y 회전축으로 3차원 방식으로 회전처리 한다.
rotateZ()
z 회전축으로 3차원 방식으로 회전처리 한다.
scale()
가로, 세로 비율을 지정하여 크기를 변경한다.
scale3d()
x, y, z 축 방향으로 크기 조정을 한다.
scaleX()
x축 방향으로 크기 비율을 지정하여 크기 변형을 처리한다.
scaleY()
y축 방향으로 크기 비율을 지정하여 크기 변형을 처리한다.
scaleZ()
3D 공간에서 z축 방향으로 크기 비율을 지정하여 크기 변형을 처리한다.
skew()
매개 변수로 지정된 X, Y축의 각도에 따라 2차원 방식으로 기울기를 처리한다.
skewX()
매개 변수로 지정된 X축의 각도에 따라 2차원 방식으로 기울기를 처리한다.
skewY()
매개 변수로 지정된 Y축의 각도에 따라 2차원 방식으로 기울기를 처리한다.
translate()
요소를 지정된 x, y 좌표 위치로 이동한다.
translate3d()
x축과 y축 그리고 z축의 값을 이용하여 3차원 방식으로 이동처리한다.
translateX()
대상을 x축으로 이동한다. 음수값을 허용한다.
translateY()
매개 변수의 값을 통해 y축으로 이동 처리한다. 음수값을 허용한다.
translateZ()
매개 변수의 값을 통해 z축으로 이동 처리한다. 음수값을 허용한다.
Values and Units
acos()
cos() 삼각 함수에 대한 역함수이다.
asin()
sin() 삼각 함수에 대한 역함수이다.
atan()
tan() 삼각 함수에 대한 역함수이다.
atan2()
-infinity(음수 무한대)와 infinity(양수 무한대) 사이의 두 값의 역탄젠트(atan)를 계산한다.
attr()
선택자의 속성 값을 반환해준다.
calc()
숫자 또는 숫자와 단위로 구성된 속성의 값을 수학 표현식으로 생성한다.
clamp()
최소값(MIN), 비교값(VAL), 최대값(MAX) 세 개의 인자를 받아 max(MIN, min(VAL, MAX))와 동일한 결과 값을 계산한다.
cos()
코사인(cosine)을 계산하는 삼각 함수이다.
max()
설정된 인수 중에서 최대값을 사용한다.
min()
설정된 인수 중에서 최소값을 사용한다.
sin()
사인(sine)을 계산하는 삼각함수이다.
tan()
탄젠트(tangent)를 계산하는 삼각 함수이다.
url()
CSS에서 사용할 외부 리소스를 가져온다.