CSS 용어 사전 (Glossary)

이 문서가 답하는 질문: CSS 문서·코드·디자인 시스템 토론에서 등장하는 용어가 정확히 무엇을 의미하는가? 한 줄 답 (Pyramid Top): 130여 개 핵심 용어를 8개 카테고리 + 알파벳 인덱스로 정리한, 다른 챕터로 향하는 진입점.

Why — 왜 별도 용어 사전인가

CSS는 W3C 명세 용어, 브라우저 구현 용어, 커뮤니티 용어(BEM, atomic, utility), **빌드툴 용어(CSS Modules, Critical CSS)**가 섞여 쓰인다. 같은 단어가 문맥에 따라 다른 것을 가리키기도 한다 — 예: cascade(알고리즘 vs @layer의 cascade layers), composite(애니메이션 단계 vs Web Animations API composite operation).

이 사전은 다른 챕터의 본문에서 별도 정의 없이 등장하는 용어를 모은다. 깊이 학습은 본문, 빠른 참조는 여기.

사전 구조

A. Cascade & Selectors

actual value — 사용 값(used value)에 픽셀 반올림·폰트 가용성 같은 환경 제약을 적용한 최종 값.

author origin — 작성자(개발자)가 작성한 스타일시트의 origin. user/UA origin과 cascade에서 우선순위가 다르다.

cascade — 여러 선언 중 최종 적용 값을 결정하는 알고리즘. 8단계 (origin·importance·layer·specificity·order 등)로 비교.

cascade layer — @layer로 만든 캐스케이드 우선순위 구간. 동일 specificity라도 layer가 늦게 선언될수록 우선.

computed value — 상속 가능한 형태로 정리된 값 (예: em → px).

inheritance — 부모의 computed value를 자식이 자동으로 받는 메커니즘. font·color는 상속, border·margin은 비상속.

:is() — 셀렉터 리스트 단축, 인자 중 가장 specific한 것이 specificity가 됨.

!important — origin·layer 순서를 뒤집어 우선순위를 끌어올리는 플래그. 남발 시 디자인 시스템 붕괴.

origin — 스타일이 어디서 왔는지 (UA, user, author). cascade의 1차 정렬 기준.

:has() — 부모/이전 형제 선택자. 2024년 모든 주요 브라우저 지원.

revert — 해당 origin의 cascade를 한 단계 뒤로 (author → UA).

revert-layer — 현재 layer의 선언을 제거하고 이전 layer 값으로 복귀.

:scope — @scope 블록의 시작 노드를 가리키는 의사 클래스.

specificity — 셀렉터의 우선순위. (a, b, c) — id, class·pseudo-class·attr, type·pseudo-element.

unset — 상속 가능 속성이면 inherit, 아니면 initial처럼 동작.

used value — computed value를 레이아웃이 결정된 후 실제로 사용한 값.

:where() — :is()와 같지만 specificity 0. 디자인 시스템 reset에 핵심.

B. Box & Display

BFC (Block Formatting Context) — 새로운 block 흐름 컨텍스트. overflow: hidden, display: flow-root, position: absolute 등에서 생성.

block-level box — 자체 줄에서 시작하는 상자. width 100%까지 자동 확장.

border-box — box-sizing 값. width/height에 padding·border 포함. 사실상 표준.

box-sizing — width/height가 어디까지 포함하는지 결정. content-box(W3C 기본) / border-box(권장).

containing block — 절대 위치 요소의 기준이 되는 상자. position에 따라 달라진다.

content-box — 기본 box-sizing. width = content만.

display — 요소가 자기 자신(outer)과 자식(inner)에 어떤 포매팅을 적용할지 결정.

flow-root — 새 BFC를 만드는 안전한 display 값. clearfix의 모던 대체.

IFC (Inline Formatting Context) — 인라인 콘텐츠의 흐름 컨텍스트. line box 단위로 쌓임.

inline-level box — 텍스트 흐름 안에 들어가는 상자. 콘텐츠 크기만큼만.

margin collapse — 인접한 block 박스의 수직 margin이 합쳐지는 현상. BFC를 만들면 차단.

replaced element — 외부 리소스로 대체되는 요소 (img, video, iframe). intrinsic size 가짐.

stacking context — z-index가 비교되는 격리 구간. position+z-index, opacity<1, transform 등에서 생성.

C. Layout

absolute positioning — position: absolute. containing block 기준으로 floating.

aspect-ratio — width:height 비율. aspect-ratio: 16/9로 padding-bottom 해킹 종결.

auto-fill / auto-fit — grid의 repeat() 키워드. fill은 빈 트랙 유지, fit은 축소.

block-size / inline-size — Logical property. writing-mode에 따라 width/height에 매핑.

fixed positioning — 뷰포트 기준 고정. iframe 안에서는 ancestor의 transform이 있으면 다르게 동작.

float — 한때 레이아웃 도구, 지금은 텍스트 흐름 안에서 사진을 두는 데만 사용. shape-outside와 결합.

fr (fraction) — Grid 단위. 남은 공간의 비율을 차지. 콘텐츠는 minmax(auto, 1fr)처럼 동작.

grid track — Grid의 행(row) 또는 열(column) 한 줄.

grid template — grid-template-rows/columns/areas로 그리드 구조 정의.

inset — top/right/bottom/left의 shorthand. logical인 inset-block/inline도 있음.

intrinsic sizing — 콘텐츠 자체 크기에 기반한 sizing. min-content, max-content, fit-content.

logical property — 물리적 방향이 아닌 흐름 방향(block/inline) 기반 속성. RTL·세로쓰기 지원.

masonry layout — 폭은 그리드, 높이는 콘텐츠 기반인 레이아웃. 명세 논쟁 중.

min-content / max-content — 최소(긴 단어 한 개) / 최대(콘텐츠 전체 한 줄) 크기.

minmax() — Grid 트랙의 최소·최대 크기. minmax(200px, 1fr).

normal flow — block은 위에서 아래, inline은 왼쪽에서 오른쪽으로 흐르는 기본 레이아웃.

relative positioning — 자기 자리에 남되 시각만 이동. 이후 형제 위치에 영향 없음.

sticky positioning — 스크롤 위치에 따라 relative ↔ fixed 전환. 부모 overflow 주의.

subgrid — 자식 grid가 부모의 트랙을 그대로 사용. 2024년 모든 주요 브라우저 지원.

writing-mode — 텍스트 흐름 방향 (horizontal-tb, vertical-rl 등).

D. Typography

ascent / descent — 폰트 메트릭. 베이스라인 위/아래 영역.

baseline — 알파벳이 앉는 가상의 선.

ch unit — 0 글자 폭. monospace 환경에서 정확.

ex unit — x-height 단위. 소문자 x의 높이.

FOIT / FOUT — Flash of Invisible/Unstyled Text. font-display로 제어.

font-display — 폰트 로드 전·후 표시 전략. swap(빠르게 보임) vs optional(CLS 방지).

font matching — 시스템에서 적합한 폰트를 찾는 알고리즘. style → weight → stretch 순.

font stack — font-family의 fallback 목록. system stack 권장.

leading — 줄 간 여백. CSS line-height와 매핑되지만 폰트마다 다름.

leading-trim / text-edge — 글자 위아래의 빈 공간 제거. 디자인 시스템에서 핵심.

ligature — fi, ffl 같은 합자. OpenType liga feature.

OpenType feature — font-feature-settings로 활성화하는 폰트 기능 (tnum, pnum, ss01).

size-adjust — fallback 폰트의 metric을 웹폰트와 맞춰 layout shift 제거.

subsetting — 폰트 파일에서 필요한 글리프만 추출. 한글 폰트 필수.

tabular-nums — 숫자 폭을 통일. 표·금액 표시에 필수.

text-wrap — balance(제목용 균형), pretty(본문 마지막 줄 보정).

variable font — 하나의 폰트 파일에 여러 축(wght, wdth, slnt, opsz)을 담은 폰트.

web font — 네트워크로 다운받아 사용하는 폰트. @font-face로 등록.

x-height — 소문자 x의 높이. 폰트의 시각적 크기를 결정.

E. Color & Visual

alpha compositing — RGB + alpha 채널의 합성.

backdrop-filter — 요소 뒤 픽셀에 filter 적용. iOS Safari 성능 주의.

background-clip — 배경이 클립되는 박스 (border-box / padding-box / content-box / text).

blend mode — 두 색을 합치는 방식 (multiply, screen, overlay 등 16종).

color gamut — 색공간의 표현 범위. sRGB < P3 < Rec2020.

color-mix() — color-mix(in oklch, blue, red 30%). 토큰 시스템에서 핵심.

color space — 색을 표현하는 좌표계. sRGB, Display-P3, OKLCH, Lab 등.

conic gradient — 원의 중심을 축으로 도는 그라데이션. 파이 차트에 활용.

filter — filter: blur() brightness() 등 픽셀 후처리.

gradient interpolation method — linear-gradient(in oklch, ...). 색 보간이 자연스러움.

HSL — Hue/Saturation/Lightness. 직관적이지만 perceptually non-uniform.

Lab / Lch — perceptually uniform한 색공간. CIE 표준.

OKLCH — modern perceptually uniform 색공간. Lightness가 균등.

P3 — Apple Display P3. 넓은 색역을 가진 색공간.

Relative color syntax — rgb(from var(--c) r g b / 0.5) 같은 기존 색 기반 새 색 생성.

sRGB — 표준 RGB 색공간. 웹의 기본.

F. Motion

animation-composition — 같은 속성에 여러 애니메이션이 작용할 때 합성 방식.

animation-timeline — 시간이 아닌 다른 축(scroll, view)을 애니메이션 진행도로 사용.

composite-only property — Layout/Paint를 트리거하지 않고 GPU에서만 처리되는 속성 (transform, opacity).

easing function — 시간 진행에 따른 값 변화 곡선. linear, ease-in, cubic-bezier(...).

FLIP — First/Last/Invert/Play. JS로 복잡한 레이아웃 변화를 transform 애니메이션으로 변환하는 기법.

jank — 60fps를 못 맞춰 끊겨 보이는 현상. layout/paint 트리거 속성에서 발생.

Layout / Paint / Composite — 렌더링 파이프라인의 3단계. composite-only가 가장 저렴.

prefers-reduced-motion — 사용자가 모션 축소를 선호하는지의 미디어 쿼리.

scroll-driven animation — 스크롤 진행도에 따라 애니메이션이 진행. JS 없이 가능.

transform — 2D/3D 변환 (translate, rotate, scale, skew). composite-only.

transition-behavior: allow-discrete — display: none ↔ block 같은 불연속 전환을 허용.

View Transitions API — 화면 전환을 선언적으로. 같은 문서 내(Same-Doc) + 페이지 간(Cross-Doc).

will-change — 변화를 미리 알려 GPU 레이어를 분리. 남발 금지.

G. Responsive

baseline (compatibility) — Web Platform Baseline. Newly available / Widely available 두 단계.

breakpoint — 미디어 쿼리에서 레이아웃이 바뀌는 폭. 디바이스 기반 → 콘텐츠 기반으로 진화.

container query — @container. 부모 컨테이너의 크기 기반 미디어 쿼리.

container-type — inline-size (폭만) / size (양 축, 비싸다).

cqi / cqw / cqh / cqb — 컨테이너 쿼리 단위. inline/width/height/block의 1%.

dvh / svh / lvh — Dynamic/Small/Large viewport height. iOS Safari 주소창 문제 해결.

fluid typography — clamp(min, ideal, max)로 뷰포트 따라 변하는 글자 크기.

intrinsic web design — Jen Simmons 제안. 미디어 쿼리 없이 grid+minmax+clamp로 적응.

media feature — @media (width >= 800px)의 feature 부분.

mobile-first — 작은 화면 기본, min-width로 확장.

range syntax — @media (400px <= width <= 800px). 모던 문법.

responsive design — Ethan Marcotte 2010. fluid grid + flexible image + media query 3종.

H. Architecture

atomic CSS / utility-first — 단일 책임 클래스 (.mt-4)를 조합. Tailwind, UnoCSS.

BEM — Block__Element—Modifier. 캐스케이드 회피를 위한 명명 규칙.

CSS Modules — 빌드 타임에 클래스명에 hash를 붙여 자동 스코핑.

CSS-in-JS — JS로 스타일을 작성. runtime (styled-components) vs zero-runtime (vanilla-extract, Linaria, Panda).

color-scheme — 폼 컨트롤·스크롤바의 light/dark 자동 적응.

component-scoped CSS — Vue SFC <style scoped>, Svelte처럼 컴포넌트 단위 격리.

Critical CSS — above-the-fold에 필요한 CSS만 인라인. 나머지는 비동기.

Design Token (DTCG) — W3C Design Tokens Community Group이 정의하는 명세. JSON으로 토큰 표현.

ITCSS — Inverted Triangle CSS. specificity 낮은 것부터 높은 것으로 쌓는 메서드.

light-dark() — light-dark(white, black). 다크모드 표현 단순화.

Open Props — Adam Argyle의 design token 모음. CSS 변수로 제공.

Pico CSS — class-less 미니 프레임워크. 시멘틱 HTML만으로 스타일.

runtime CSS-in-JS — 브라우저에서 스타일을 생성. SSR/RSC와 충돌 가능.

SMACSS — Scalable & Modular Architecture for CSS. 카테고리 5종 (Base, Layout, Module, State, Theme).

Tailwind v4 — 2025년 출시. CSS-first config, @layer/@utility 활용, Lightning CSS 기반.

utility-first — 미리 만든 atomic class를 조합하는 접근.

vanilla-extract — TypeScript 기반 zero-runtime CSS-in-JS.

zero-runtime — 빌드 타임에 모든 CSS 추출. 런타임 비용 0.

What-if — 이 사전의 한계

• W3C 명세 변경: 매년 새 모듈이 Working Draft → Candidate Recommendation → Recommendation 단계를 거친다. 본 사전은 2026-05 기준.
• 브라우저 호환성: 명세는 있어도 미구현이 많다. caniuse, MDN baseline 확인 필수.
• 커뮤니티 용어: BEM·utility-first 같은 용어는 학파에 따라 정의가 다르다.
• 빌드툴 종속: CSS Modules, CSS-in-JS는 빌드 도구에 따라 동작이 다르다.

요약 + Mermaid

CSS 용어는 표준 (W3C) ∩ 브라우저 구현 ∩ 커뮤니티 어휘의 교집합이다. 본 사전은 130여 개를 8 카테고리로 묶어 다른 챕터의 진입점 역할을 한다.

용어를 본문에서 본 후 여기로 돌아와 정의를 확인하고, 카테고리 표의 챕터 링크로 깊이 학습으로 들어간다.