Media
Comparison
semantic HTML두 시각 자료의 차이를 드래그로 비교합니다.
Live example
Before
After
<section data-standard-component="comparison" class="standard-comparison" style="--comparison-value:45%"><div class="comparison-before"><strong>Before</strong></div><div class="comparison-after"><strong>After</strong></div><input type="range" min="0" max="100" value="45" aria-label="Comparison position" data-comparison-range></section>Variants and sizes
The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.
compactcomfortableroomy
Public API
| Contract | Value |
|---|---|
| Implementation | semantic HTML |
| Status | stable |
| License | free |
| Since | 0.4 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
label 또는 aria-label로 비교 대상을 설명합니다. 내부 range는 방향키로 조작할 수 있으며 before와 after 콘텐츠에도 대체 텍스트가 필요합니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->