03 · Components · 표현

썸네일Thumbnail

콘텐츠의 시각적 대표 이미지. 카드·리스트·갤러리에서 공통의 비율과 처리를 사용해 리듬을 유지합니다. 기본 비율은 4:3, 상황에 따라 16:9·1:1·9:16.

StableWCAG AA

비율

tsx

{/* 4:3 기본 */}
<div className="aspect-[4/3] overflow-hidden rounded-md">
  <img src="..." alt="..." className="h-full w-full object-cover" />
</div>

{/* 16:9 와이드 */}
<div className="aspect-video overflow-hidden rounded-md">
  <img src="..." alt="..." className="h-full w-full object-cover" />
</div>

{/* 1:1 스퀘어 */}
<div className="aspect-square overflow-hidden rounded-md">
  <img src="..." alt="..." className="h-full w-full object-cover" />
</div>

미리보기

4:3

16:9

1:1

플레이스홀더

이미지 로딩 중이거나 없을 때 쓸 플레이스홀더. 스켈레톤 배경 위에 아이콘 하나 정도가 기본입니다.

tsx

<div className="aspect-[4/3] flex items-center justify-center rounded-md bg-[color:var(--color-gray-100)]">
  <svg className="h-8 w-8 text-[color:var(--color-text-subtle)]">...</svg>
</div>

미리보기

비율

플레이스홀더

도움이 필요하신가요?