v0.10.0

ComponentsP3 본문

Separator

1px 헤어라인 구분선 — 기본은 순수 장식(role="none")으로 접근성 트리에서 제외되고, decorative={false}일 때만 의미적 구분자가 됩니다.

마지막 업데이트 2026-06-11

한눈에#

콘텐츠 사이 1px 헤어라인 구분선입니다 — 기본은 순수 장식(role="none")이라 접근성 트리에서 제외되고, decorative={false}일 때만 의미적 구분자가 됩니다.

위 콘텐츠

아래 콘텐츠

  • 1px 헤어라인 고정
  • 기본 role=none 장식
  • horizontal·vertical
  • decorative=false 의미적

두께는 1px 고정, 길이는 부모를 따릅니다 — 대부분의 경우 기본(장식)이 맞습니다

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

import { Separator } from '@wds/ui-web';

<Separator />

변형#

편집
복제
삭제
vertical — 플렉스 안에서 align-self: stretch로 자동 신장

크기#

두께는 1px 헤어라인 고정입니다. 길이는 부모를 따릅니다 — horizontal은 폭 100%, vertical은 플렉스 컨테이너 높이에 맞춰 늘어납니다.

상태#

정적 컴포넌트라 인터랙션 상태가 없습니다(RSC).

Props#

Prop타입기본값설명
orientation'horizontal' | 'vertical''horizontal'구분 방향
decorativebooleantruetrue면 순수 장식(role="none") — 접근성 트리에서 제외
…restHTMLAttributes<div>—className 등 네이티브 속성 전달

접근성#

  • 기본(decorative: true)은 role="none" — 시각 구분일 뿐 의미가 없어 보조기술이 무시합니다. 대부분의 경우 기본값이 맞습니다
  • decorative={false}면 role="separator" + aria-orientation이 붙어 콘텐츠 그룹의 의미적 경계로 보고됩니다 (예: 메뉴 섹션 구분)
  • 색만으로 정보를 전달하지 않습니다 — 경계는 레이아웃 보조일 뿐입니다

토큰#

component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).

속성토큰
선 색color.border
두께1px 고정 (헤어라인 — 토큰 대상 아님)