CSS 스타일링·효과·설계 방식
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
CSS 사용자 정의 속성 Custom Properties
--name 형식으로 선언하고 var()로 참조하는 캐스케이드 가능한 값.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
캐스케이드 레이어 CSS Cascade Layers
@layer로 스타일 우선순위의 큰 층위를 명시하는 기능.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
CSS 중첩 CSS Nesting
선택자 규칙 안에 관련 선택자를 중첩해 기술하는 기능.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
의사 클래스 Pseudo-class
hover·focus·checked 등 요소 상태나 구조적 조건을 선택하는 문법.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
의사 요소 Pseudo-element
요소의 특정 부분이나 생성된 표현 영역을 스타일링하는 문법.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
관계형 선택자 :has()
상대 선택자와 일치하는 요소를 포함하는지 등 관계 조건으로 대상을 선택하는 의사 클래스.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
키프레임 규칙 CSS Keyframes
애니메이션 진행 구간별 속성값을 지정하는 @keyframes 규칙.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
변환 Transform
이동·회전·크기·기울임 등을 적용하는 시각적 좌표 변환.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
변환 기준점 Transform Origin
회전·스케일 등의 변환이 기준으로 삼는 위치.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
필터 효과 Filter
블러·대비·채도 등의 처리로 요소의 렌더링 결과를 바꾸는 기능.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
배경 필터 Backdrop Filter
요소 뒤에 비치는 영역에 블러 등의 시각 처리를 적용하는 기능.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
혼합 모드 Blend Mode
앞뒤 색을 결합하는 계산 방식을 지정하는 기능.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
클리핑 경로 Clip Path
요소에서 보이는 영역을 경로나 기본 도형으로 제한하는 기능.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
CSS 마스크 CSS Mask
다른 이미지의 알파·명도 등을 이용해 요소의 보이는 정도를 조절하는 기능.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
박스 그림자 Box Shadow
요소의 박스 주위에 그림자를 그리는 속성.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
텍스트 그림자 Text Shadow
글리프 모양에 그림자를 더하는 속성.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
스크롤 스냅 Scroll Snap
스크롤이 특정 항목이나 위치에 정렬되도록 유도하는 기능.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
스크롤 여유 영역 Scroll Margin
스크롤 이동 목표 주변에 추가 정렬 여유를 지정하는 속성.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
CSS 앵커 포지셔닝 CSS Anchor Positioning
기준 요소의 위치를 참조해 팝오버 같은 요소를 배치하는 기능.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
콘텐츠 표시 최적화 content-visibility
조건에 따라 요소의 렌더링 작업을 생략하거나 제한할 수 있는 속성.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
CSS 격리 CSS Containment
레이아웃·스타일·페인트 등의 영향 범위를 제한하는 기능.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
BEM 명명법 BEM
Block·Element·Modifier로 클래스 이름을 조직하는 CSS 명명 방법론.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
유틸리티 우선 CSS Utility-first CSS
작은 단일 목적 클래스들을 조합해 스타일을 구성하는 접근.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
CSS 모듈 CSS Modules
클래스 이름 등을 모듈 범위로 다루도록 빌드하는 스타일 작성 방식.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
CSS 인 JS CSS-in-JS
자바스크립트 환경에서 스타일을 정의하고 생성·적용하는 구현 계열.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
CSS 리셋 CSS Reset
브라우저 기본 스타일 차이를 초기화하거나 완화하는 스타일 모음.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
디자인 토큰 파이프라인 Design Token Pipeline
디자인 값의 원천 데이터를 여러 플랫폼의 스타일 리소스로 변환하는 과정.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
테마 제공자 Theme Provider
컴포넌트 트리에 공통 색·간격·타이포 등의 테마 값을 전달하는 구성 요소.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
기능 쿼리 Feature Query
@supports로 브라우저의 CSS 기능 지원 조건에 따라 규칙을 적용하는 방식.
테마·상호작용·시각 효과를 유지보수 가능한 CSS 규칙으로 만든다.
장식 효과는 대비와 성능을 해칠 수 있다. 브라우저 지원·감소된 모션 설정을 함께 확인한다.
CSS Styling, Effects & Architecture
Open an entry for its visual reference, comparisons and source-language text.
Custom Properties CSS 사용자 정의 속성
Cascading values declared with a --name and referenced through var().
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
CSS Cascade Layers 캐스케이드 레이어
A feature using @layer to explicitly organize major levels of style precedence.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
CSS Nesting CSS 중첩
A feature for writing related selector rules nested within another rule.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
Pseudo-class 의사 클래스
Selector syntax matching element states or structural conditions, such as hover, focus, or checked.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
Pseudo-element 의사 요소
Syntax styling a particular part of an element or a generated visual region.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
:has() 관계형 선택자
A relational pseudo-class matching elements according to a relative selector condition.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
CSS Keyframes 키프레임 규칙
An @keyframes rule specifying property values at stages of an animation.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
Transform 변환
A visual coordinate transformation such as translation, rotation, scaling, or skewing.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
Transform Origin 변환 기준점
The reference point around which a transformation such as rotation or scaling occurs.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
Filter 필터 효과
A feature altering rendered appearance through effects such as blur, contrast, and saturation.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
Backdrop Filter 배경 필터
A feature applying visual processing, such as blur, to the region visible behind an element.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
Blend Mode 혼합 모드
A setting specifying how foreground and background colors are mathematically combined.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
Clip Path 클리핑 경로
A feature restricting an element's visible area to a path or basic shape.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
CSS Mask CSS 마스크
A feature controlling visibility using another image's alpha or luminance.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
Box Shadow 박스 그림자
A property drawing a shadow around an element's box.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
Text Shadow 텍스트 그림자
A property adding shadows following glyph shapes.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
Scroll Snap 스크롤 스냅
A feature encouraging scrolling to align with specified items or positions.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
Scroll Margin 스크롤 여유 영역
A property adding alignment space around a scroll target.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
CSS Anchor Positioning CSS 앵커 포지셔닝
A feature positioning an element, such as a popover, relative to an anchor element.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
content-visibility 콘텐츠 표시 최적화
A property that can skip or limit rendering work for an element under defined conditions.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
CSS Containment CSS 격리
A feature limiting the scope of layout, style, and paint effects.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
BEM BEM 명명법
A CSS naming methodology organizing classes as blocks, elements, and modifiers.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
Utility-first CSS 유틸리티 우선 CSS
An approach composing styles from small, single-purpose utility classes.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
CSS Modules CSS 모듈
A style-authoring approach that builds class names and related identifiers with module scope.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
CSS-in-JS CSS 인 JS
A family of techniques defining, generating, and applying styles in JavaScript environments.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
CSS Reset CSS 리셋
A collection of styles that resets or reduces differences in browser default styling.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
Design Token Pipeline 디자인 토큰 파이프라인
A process converting source design values into styling resources for multiple platforms.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
Theme Provider 테마 제공자
A component supplying shared theme values such as colors, spacing, and typography through a component tree.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.
Feature Query 기능 쿼리
Applying CSS rules conditionally through @supports based on feature support.
Building maintainable CSS for themes, interactions, and visual effects.
Decorative effects can reduce contrast and performance. Check browser support and reduced-motion settings.