Open터미널 열기
마크다운으로 복사링크 공유

스켈레톤

내용이 오기 전 그 자리의 모양을 미리 그려요. 데이터가 와도 높이와 배치가 튀지 않아요.

모바일PCSkeleton관련 아바타 · 카드 골격 · 빈 상태

고르기#

  • 이 이름은 화면 골격(Skeletons)에 합쳤어요. 모양은 그대로이고, 새로 쓸 때는 정본을 써요.

화면 골격 문서 보기 →

사용 예제#

할 일마다 실물과 코드예요. 편집을 누르면 코드를 고쳐 바로 볼 수 있어요.

글줄 자리 잡기#

줄 높이는 실제 글자 높이에 맞추고, 길이는 조금씩 다르게 해요.

아바타와 함께 두기#

원형 자리는 rounded-full로 실제 크기와 같게 그려요.

목록 골격 쓰기#

자주 쓰는 골격은 이미 실제 화면과 같은 모양으로 있어요.

해부도#

  1. 1

    면

    자리를 잡는 회색 면이에요. 빛이 왼쪽에서 오른쪽으로 1.5초마다 지나가요.

속성#

Shape#

모양은 className으로 정해요. 기본 모서리는 radius-md예요.

인터페이스#

타입에서 자동으로 뽑은 표예요.

Skeleton#

자기 props가 없고, 감싼 HTML·SVG 요소의 속성 281개를 그대로 받아요.

* 필수예요. 표는 타입에서 자동으로 뽑았어요.

스펙#

상태 · 슬롯마다 실제로 그려지는 값이에요.

Skeleton#

base

상태슬롯속성값
enabledroot모서리radius-md
배경색chip
빛 흐름1.4초 반복(동작 줄이기면 멈춤)

값은 컴포넌트 코드에서 뽑았고, 토큰 이름을 누르면 파운데이션으로 가요. 토큰이 없는 값만 숫자로 적었어요.

접근성#

역할과 속성#

요소역할 · 속성
Skeletondiv - 역할 없음
골격을 감싼 칸aria-hidden(목록 골격) 또는 aria-busy

화면 읽기 프로그램#

  • 골격 자체는 읽지 않아요. 감싼 칸에 aria-busy를 걸면 불러오는 중임을 알려요.

초점#

  • 초점을 받지 않아요.

가이드라인#

이렇게 써요#

쓰는 규칙#

이렇게 써요

  • 실제 화면과 같은 높이·모서리·배치로 그려요.
  • 줄 길이를 조금씩 다르게 해 데이터처럼 보이게 해요.

이렇게 하지 않아요

  • 카드 하나를 통째로 큰 덩어리 하나로 그리지 않아요.

문구#

  • 골격 옆에 "불러오는 중" 글자를 따로 쓰지 않아요.

플랫폼별 차이#

플랫폼별 차이
플랫폼차이
모바일

PC와 같은 모양이에요. 글자 역할만 폰 크기로 바뀌어요.

PC

마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요.