03 · Components · 콘텐츠

갤러리Gallery

행사·작품·사진을 격자로 모아 보여줍니다. 항목마다 alt 텍스트를 반드시 작성하고, 동일 비율로 리듬을 맞추세요.

StableWCAG AA

tsx

<Gallery items={items} columns={3} />

미리보기

설명이 필요한 경우 caption을 함께 제공하세요. alt와 caption은 서로 다른 용도: alt는 이미지 자체 묘사, caption은 맥락·메타정보입니다.

tsx

<Gallery items={items.map(i => ({...i, caption: "Unsplash"}))} columns={4} />

미리보기

Gallery Props
Prop	Type	Default	Description
`items`	`{ src, alt, caption? }[]`		이미지 목록.
`columns`	`2 \| 3 \| 4`	`3`	데스크톱 기준 컬럼 수. 모바일은 자동 2열로 축소.

Need Help

도움이 필요하신가요?

주님의교회 PCL 디자인 시스템을 적용하시다가 막히는 부분이 있다면, 다음 경로로 직접 문의하실 수 있습니다.