03 · Components · 피드백
스켈레톤Skeleton
로딩 중인 콘텐츠의 실루엣을 먼저 보여주는 자리표시자. 실제 레이아웃과 같은 크기·모양으로 만들어 페이지 리플로우를 예방합니다.
StableWCAG AA
카드 스켈레톤
tsx
<div className="flex gap-3">
<Skeleton rounded="full" className="h-10 w-10" />
<div className="flex flex-1 flex-col gap-2">
<Skeleton className="h-3 w-1/2" />
<Skeleton className="h-3 w-full" />
<Skeleton className="h-3 w-2/3" />
</div>
</div>미리보기
스켈레톤은 aria-hidden으로 스크린리더에서 숨깁니다. 대신 상위 컨테이너에 aria-busy="true"와 보조 레이블 ("불러오는 중")을 두어 상태를 알리세요.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | 너비·높이 등은 Tailwind 유틸리티로 지정. | |
rounded | "sm" | "md" | "lg" | "full" | "md" | 모서리 반경. |