CSS 함수 참조 매뉴얼

CSS 함수

CSS 함수는 값 계산, 문자열 작업, 색상, 복잡한 그레이드렌트 및 형상 생성 등에 사용될 수 있습니다.

CSS 함수는 일반적으로 다양한 CSS 속성 값으로 사용됩니다.

함수 설명
acos() -1과 1 사이의 수의 반코사인값으로 반환합니다.
asin() -1과 1 사이의 수의 반사인값으로 반환합니다.
atan() -∞와 ∞ 사이의 수의 반사인값으로 반환합니다.
atan2() -∞와 ∞ 사이의 두 값을 반사인값으로 반환합니다.
attr() 선택된 요소의 속성 값을 반환합니다.
blur() 요소에 모호한 효과를 적용합니다.
brightness() 요소의 밝기를 조정합니다(더 밝거나 더 어둡게).
calc() CSS 속성 값을 결정하기 위해 계산을 할 수 있습니다.
circle() 원을 정의합니다.
clamp() 미리 설정된 값이 뷰포트 크기에 따라 최소값과 최대값 사이에서 조정될 값을 설정합니다.
color() 지정된 특정 색상 공간에서 색상을 지정할 수 있습니다.
color-mix() 지정된 색상 공간에서 지정된 비율로 두 색상 값을 혼합합니다.
conic-gradient() 콘형 그레이드렌트를 생성합니다.
contrast() 요소의 대비도를 조정합니다.
cos() 각도의 코사인 값을 반환합니다.
counter() 이름이 주어진 계산자의 현재 값을 반환합니다.
counters() 이름이 주어진 이름과 숨겨진 계산자의 현재 값을 반환합니다.
cubic-bezier() 삼차 베塞尔 곡선을 정의합니다.
drop-shadow() 이미지에 프로젝션 효과를 적용합니다.
ellipse() 椭圆形을 정의합니다.
exp() E의 지정된 수 x를 E의 지정된 횟수로 거듭 제곱합니다 (Ex)
fit-content() 요소의 크기를 내용에 따라 조정할 수 있습니다.
grayscale() 이미지를 그레이스케일로 변환.
hsl() / hsla() 색상을 정의하는 톤-보간-밝기 (HSL) 모델을 사용; 선택적으로 alpha 구성 요소를 포함.
hue-rotate() 요소에 색상 회전을 적용.
hwb() 색상을 정의하는 톤-밝기-검게 (HWB) 모델을 사용; 선택적으로 alpha 구성 요소를 포함.
hypot() 인자의 제곱之和의 제곱근을 반환.
inset() 참조 프레임의 각 측면에 지정된 내부 간격을 유지하는 사각형을 정의.
invert() 이미지의 색상을 반전.
lab() CIE Lab 색 공간에서 색을 지정.
lch() LCH (빛-색도-색상) 색 공간에서 색을 지정.
light-dark() 두 가지 색상 값을 설정하면 사용자가 하이브리드 테마를 설정한 경우 첫 번째 값을 반환;
사용자가 다크 테마를 설정한 경우 두 번째 값을 반환.
linear-gradient() 선형 그레이더를 생성.
log() 지정된 수의 자연대수적 로그를 반환 (E를 기준으로), 또는 지정된 기준의 로그.
matrix() 여섯 값 행렬을 사용하여 2D 변환을 정의.
matrix3d() 4x4 행렬을 사용하여 3D 변환을 정의.
max() 콤마로 구분된 값을 포함한 목록의 최대 값을 속성 값으로 사용.
min() 콤마로 구분된 값을 포함한 목록의 최소 값을 속성 값으로 사용.
minmax() 최소값과 최대값 사이의 크기를 정의하는 크기 범위를 정의 (CSS 그리드에 사용).
mod() 두 수를 나눈 나머지 값을 반환.
oklab() OKLAB 색 공간에서 색을 지정.
oklch() OKLCH 색 공간에서 색을 지정.
opacity() 불투명도 효과를 요소에 적용.
perspective() 3D 변환 요소에 전망 뷰를 정의.
polygon() 다각형을 정의.
pow() x 값의 y 차원의 항구의 값을 반환.
radial-gradient() 원심적 그레이더를 생성.
ray() 아니메이션 요소가 따라야 할 경로선 단계를 정의.
rem() 두 수를 나눈 나머지 값을 반환.
repeat() 그리드에서 반복되는 열이나 행을 지정.
repeating-conic-gradient() 반복된 원추형 그레이더.
repeating-linear-gradient() 반복된 선형 그레이더.
repeating-radial-gradient() 반복된 원심적 그레이더.
rgb() / rgba() 빨강-녹색-파(RGB) 모델을 사용하여 색상을 정의합니다；alpha 구성 요소를 선택적으로 포함할 수 있습니다.
rotate() 요소의 2D 회전을 정의합니다.
rotate3d() 요소의 3D 회전을 정의합니다.
rotateX() 요소가 x축(수평)을 중심으로 3D 회전을 정의합니다.
rotateY() 요소가 y축(수직)을 중심으로 3D 회전을 정의합니다.
rotateZ() 요소가 z축을 중심으로 3D 회전을 정의합니다.
round() 지정된 라운딩 전략에 따라 수를 라운딩합니다.
saturate() 요소의 충실도(색상 강도)를 조정합니다.
scale() 요소의 2D 확대를 정의합니다.
scale3d() 요소의 3D 확대를 정의합니다.
scaleX() 요소를 수평으로 확대합니다（너비）.
scaleY() 요소를 수직으로 확대합니다（높이）.
sepia() 이미지를 브론즈 톤으로 변환합니다.
sin() 수(각도)의 sine 값을 반환합니다.
skew() 요소를 x축과 y축에 따라 기울입니다.
skewX() 요소를 x축에 따라 기울입니다.
skewY() 요소를 y축에 따라 기울입니다.
sqrt() 수의 square root 값을 반환합니다.
steps() 애니메이션에 분할 시간 함수를 생성합니다.
tan() 수의 tangent 값을 반환합니다.
translate() 요소를 x축과 y축에 따라 다시 위치시킬 수 있습니다.
translateX() 요소를 x축에 따라 다시 위치시킬 수 있습니다.
translateY() 요소를 y축에 따라 다시 위치시킬 수 있습니다.
url() 스타일 시트에 파일을 포함할 수 있습니다.
var() 사용자 정의 속성 값을 삽입하십시오.