크기와 계산 ⤢ calc()혼합 단위를 포함한 산술 표현식의 결과. width: calc(100% - 2rem); ⤢ min()주어진 값 중 가장 작은 값. width: min(100%, 60ch); ⤢ max()주어진 값 중 가장 큰 값. width: max(320px, 40vw); ⤢ clamp()최솟값, 선호값, 최댓값 사이로 제한된 값. font-size: clamp(1rem, 2vw, 1.5rem); ⤢ env()사용자 에이전트가 제공하는 환경 변수를 읽습니다. padding: env(safe-area-inset-top); ⤢ fit-content()콘텐츠의 고유 너비로 제한된 크기. width: fit-content(200px); ⤢ round()한 값을 다른 값의 가장 가까운 배수로 반올림합니다. width: round(up, 133px, 50px); ⤢ mod()나눗셈의 양수 나머지. 항상 0 이상입니다. margin: mod(100px, 30px); ⤢ rem()나눗셈의 나머지. 피제수의 부호를 유지합니다. margin: rem(-100px, 30px); ⤢ abs()절댓값. translateX(abs(-10px)); ⤢ sign()값의 부호에 따라 -1, 0 또는 1. padding: sign(-5px) * 10px; 그리드 ⤢ minmax()그리드 트랙을 위한 크기 범위. 최솟값과 최댓값 사이. grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr); ⤢ repeat()트랙 패턴을 지정한 횟수만큼, 또는 채워질 때까지 반복합니다. grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); 논리와 조건 ⤢ if()조건에 따라 두 값 중 하나를 고릅니다. font-size: if(media(width > 600px), 1.25rem, 1rem); ⤢ media()미디어 쿼리가 일치하면 참. if() 안에서 사용합니다. padding: if(media(width > 40rem), 2rem, 1rem); ⤢ supports()브라우저가 선언을 지원하면 참. if() 안에서 사용합니다. display: if(supports(color: oklch(0 0 0)), oklch(0 0 0), #333); ⤢ selector()선택자가 일치하면 참. if() 안에서 사용합니다. font-weight: if(selector(:hover), 700, 400); 사용자 지정 속성 ⤢ var()사용자 지정 속성의 값. 선택적 폴백을 지정할 수 있습니다. color: var(--accent, #333); 색상 ⤢ rgb() / rgba()빨강, 초록, 파랑(및 알파) 채널로 만든 색. color: rgb(59 130 246 / 0.8); ⤢ hsl() / hsla()색상, 채도, 명도로 만든 색. color: hsl(210 80% 50%); ⤢ oklch()지각 균등한 OKLCH 색 공간의 색(일관된 밝기). color: oklch(0.7 0.15 250); ⤢ color-mix()지정한 색 공간에서 두 색을 섞은 색. color: color-mix(in srgb, red 40%, blue); ⤢ color-contrast()목록 중 기준색과 대비가 가장 큰 선택지. color: color-contrast(#fff vs #000, #777); ⤢ hwb()색상, 백색도, 흑색도로 만든 색. color: hwb(210 10% 20%); ⤢ lab()CIELAB 색 공간의 색(밝기, a축, b축). color: lab(52% 40 59); ⤢ lch()CIELAB 색 공간의 색(밝기, 채도, 색상). color: lch(52% 49 24); ⤢ color()좌표로 지정한, 미리 정의된 임의의 색 공간의 색. color: color(display-p3 1 0.4 0.2); ⤢ light-dark()라이트 모드에서는 첫 번째 색, 다크 모드에서는 두 번째 색. color: light-dark(#1a1a1a, #f5f5f5); 그라데이션과 이미지 ⤢ linear-gradient()직선을 따라 색상이 전환되는 그라데이션. background: linear-gradient(90deg, #4b9fff, #2ee6a6); ⤢ radial-gradient()한 점에서 바깥으로 퍼지는 그라데이션. background: radial-gradient(circle, #fff, #000); ⤢ conic-gradient()중심점을 중심으로 회전하며 쓸어 가는 그라데이션. background: conic-gradient(red, yellow, red); ⤢ url()외부 리소스를 불러옵니다: 이미지, 폰트, SVG. background-image: url(hero.webp); ⤢ image-set()기기 해상도에 가장 맞는 이미지를 고릅니다. background-image: image-set("hero.webp" 1x, "hero@2x.webp" 2x); ⤢ cross-fade()두 이미지를 지정한 비율로 섞습니다. background-image: cross-fade(30%, url(a.webp), url(b.webp)); 필터와 도형 ⤢ blur() / brightness() / saturate()filter 속성 안에서 사용하는 픽셀 필터. filter: blur(4px) brightness(1.1); ⤢ path()클립이나 도형을 그리는 데 쓰는 SVG 패스 문자열. clip-path: path('M10 10 H 90 V 90 Z'); ⤢ attr()HTML 속성 값을 읽습니다. content 밖에서는 용도가 제한적입니다. content: attr(data-label); ⤢ contrast()요소의 대비를 조정합니다. filter: contrast(1.4); ⤢ drop-shadow()요소의 알파 모양을 따라가는 그림자를 그립니다. filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3)); ⤢ grayscale()요소를 회색조로 변환합니다. filter: grayscale(100%); ⤢ invert()요소의 색을 반전합니다. filter: invert(1); ⤢ sepia()세피아 톤을 적용합니다. filter: sepia(0.6); ⤢ hue-rotate()요소 색상의 색조를 회전합니다. filter: hue-rotate(90deg); ⤢ opacity()filter로 요소의 불투명도를 설정합니다. filter: opacity(0.5); ⤢ circle()clip-path나 shape-outside용 원형 도형. clip-path: circle(40% at 50% 50%); ⤢ ellipse()clip-path나 shape-outside용 타원형 도형. clip-path: ellipse(50% 35% at 50% 50%); ⤢ inset()clip-path용 둥근 사각형 도형. clip-path: inset(10px 10px 10px 10px round 8px); ⤢ polygon()점 목록으로 만든 다각형 도형. clip-path: polygon(50% 0, 100% 100%, 0 100%); 변환 ⤢ translate()요소를 X축과 Y축 방향으로 이동합니다. transform: translate(10px, 20px); ⤢ rotate()요소를 자기 중심 기준으로 회전합니다. transform: rotate(45deg); ⤢ scale()요소를 X축과 Y축 방향으로 확대·축소합니다. transform: scale(1.25); ⤢ skew()요소를 X축과 Y축 방향으로 기울입니다. transform: skew(10deg, 0deg); ⤢ matrix()여섯 개 행렬 값으로 만든 하나의 2D 변환. transform: matrix(1, 0, 0.5, 1, 10, 0); ⤢ perspective()요소의 자식을 위한 3D 원근 깊이를 설정합니다. transform: perspective(600px) rotateY(20deg); 애니메이션과 카운터 ⤢ cubic-bezier()네 개 제어점으로 만든 이징 곡선. transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1); ⤢ steps()같은 크기의 단계로 건너뛰는 이징. animation-timing-function: steps(8, end); ⤢ counter()CSS 카운터의 현재 값. content로 사용합니다. content: counter(chapter); ⤢ counters()카운터와 모든 조상 카운터의 값을 문자열로 이어 붙인 것. content: counters(item, "."); ⤢ progress()값이 시작과 끝 사이를 진행함에 따라 0에서 1로 변합니다. opacity: progress(scroll(), 0, 50vh); ⤢ random()범위에서 뽑은 난수. 요소마다 고정됩니다. rotate: random(from -5deg to 5deg); ⤢ sin()각도의 사인값. calc 표현식에 사용합니다. translateY(calc(1rem * sin(45deg))); ⤢ cos()각도의 코사인값. calc 표현식에 사용합니다. translateX(calc(1rem * cos(45deg)));