Data Display — Cards & Lists

Lesson 6

Cards are the most common UI pattern on the web. Product cards, blog cards, profile cards — they all share the same structure: image, heading, body, action. The difference is in the details.

The base prompt

카드 컴포넌트 3종을 만들어줘:
1. 코스 카드 (제목, 설명, 레슨 수, CTA 링크)
2. 블로그 카드 (이미지, 날짜, 제목, 태그)
3. 프로필 카드 (아바타, 이름, 역할, 소셜 링크)

각 카드는 border-radius 8px, border 1px solid #e5e5e5.
hover시 약간 위로 올라오는 transform 효과.
반응형: 모바일에서 1열.

Adding skeleton loading

각 카드에 로딩 skeleton 상태를 추가해줘.
- 텍스트 영역은 회색 막대로 대체
- CSS animation으로 shimmer 효과
- JS로 2초 후 실제 콘텐츠로 교체 (데모용)

Grid layout

위 카드들을 담는 그리드를 만들어줘.
- 기본 3열, 태블릿 2열, 모바일 1열
- gap 20px
- section 제목과 "더 보기" 링크 포함

The demo shows all three card types with skeleton loading states. Click the “Load content” button to see them populate.