메인 콘텐츠로 건너뛰기
Frutjam logo Frutjam
v2.2.2
Theme

뼈대 구성요소

마지막 업데이트:

자리 표시자 UI를 위한 CSS 전용 Tailwind CSS 스켈레톤 로더입니다. 펄스 애니메이션이 포함된 원, 직사각형 및 텍스트 선 모양. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

스켈레톤 구성 요소는 콘텐츠가 로드되는 동안 자리 표시자 레이아웃을 표시하여 시각적 피드백을 제공하고 인지된 성능을 향상시킵니다. 시맨틱 HTML 및 펄스 애니메이션으로 구축된 스켈레톤 화면은 레이아웃 변경을 방지하고 사용자 기대치를 설정합니다. Frutjam 스켈레톤 시스템은 다양한 모양과 크기를 지원하므로 콘텐츠 미리보기, 프로그레시브 로딩 및 점진적인 저하에 이상적입니다.

CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

수업 유형 설명
skeleton베이스펄스 자리표시자 블록
skeleton-circle스타일원형 뼈대 모양
skeleton-text스타일보이는 텍스트에 Shimmer 애니메이션 적용

기본 사용법

<div class="skeleton h-32 w-32"></div>

<div className="skeleton h-32 w-32"></div>

해골 모양

html 
1
2
3
4
5
6
7
<div class="skeleton skeleton-circle h-12 w-12"></div>

<div class="skeleton h-12 w-12"></div>

<div class="skeleton h-12 w-12"></div>

<div class="skeleton h-4 w-12"></div>

스켈레톤 카드

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="card card-outline w-96">
  <figure class="skeleton h-64"></figure>
  <div class="card-content">
    <h2 class="skeleton h-4 w-28"></h2>
    <p class="skeleton h-3 w-full"></p>
    <p class="skeleton h-3 w-full"></p>
    <div class="card-actions justify-end">
      <div class="skeleton h-8 w-24"></div>
    </div>
  </div>
</div>

스켈레톤 목록

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="space-y-2">
  <div class="flex items-center gap-3">
    <div class="skeleton h-10 w-10 rounded-full shrink-0"></div>
    <div class="flex flex-col gap-2 flex-1">
      <div class="skeleton h-3 w-20"></div>
      <div class="skeleton h-3 w-full"></div>
    </div>
  </div>
  <div class="flex items-center gap-3">
    <div class="skeleton h-10 w-10 rounded-full shrink-0"></div>
    <div class="flex flex-col gap-2 flex-1">
      <div class="skeleton h-3 w-20"></div>
      <div class="skeleton h-3 w-full"></div>
    </div>
  </div>
</div>

해골 아바타

html 
1
2
3
<div class="avatar">
  <div class="skeleton skeleton-circle h-12 w-12"></div>
</div>

스켈레톤 프로필 카드

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div class="flex w-52 flex-col gap-4">
  <div class="flex items-center gap-4">
    <div class="skeleton h-16 w-16 shrink-0 rounded-full"></div>
    <div class="flex flex-col gap-4">
      <div class="skeleton h-4 w-20"></div>
      <div class="skeleton h-4 w-28"></div>
    </div>
  </div>
  <div class="skeleton h-32 w-full"></div>
</div>

해골 기사

html 
1
2
3
4
5
6
<div class="flex w-52 flex-col gap-4">
  <div class="skeleton h-32 w-full"></div>
  <div class="skeleton h-4 w-28"></div>
  <div class="skeleton h-4 w-full"></div>
  <div class="skeleton h-4 w-full"></div>
</div>

스켈레톤 텍스트

html 
<span class="skeleton skeleton-text">AI is thinking...</span>

Claude Code, Cursor 또는 다른 AI 편집기를 사용하시나요?

Cherry MCP는 AI 편집기에 요청 시 정확한 해골 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.

Cherry MCP를 사용해 보세요