Skeleton

원본: projects/skill-lens/design/components/Skeleton/README.md

상태: Experimental, 접근성 ✓, 다크 ✓, 코드 ✗

스켈레톤: 목록·제목 자리를 같은 크기로 비워 두고 흐르는 빛

견본만 새 창으로

1초 안팎의 자리 표시입니다.

쓰는 곳

이미 본 화면을 다시 불러올 때만. 처음 들어오는 화면은 LoadingSteps.

구성(화면이 넘겨줄 것)

자리 수와 종류(제목, 글, 행).

규칙

• 실제 부품과 같은 크기와 둥글기.
• 행 셋까지, 그 아래는 흐리게.

접근성

• 움직임 줄이기에서는 멈춘 회색.

견본 코드

AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.

<!-- @dsCard group="Feedback" height=260 subtitle="스켈레톤: 목록·제목 자리를 같은 크기로 비워 두고 흐르는 빛" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface-sunken)}.stack{display:flex;flex-direction:column;gap:8px;max-width:360px}</style>
<div class="sl stack"><div class="sl-skel sl-skel--title"></div><div class="sl-skel sl-skel--text" style="margin-bottom:8px"></div><div class="sl-skel sl-skel--row"></div><div class="sl-skel sl-skel--row"></div><div class="sl-skel sl-skel--row" style="opacity:.6"></div></div>

이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.