[CSS ] 19. 카드 리스트 + 필터 UI + 뱃지/칩
이 글은 카드 UI를 리스트/갤러리 형태로 구성하고, 필터 버튼(칩)과 뱃지/태그를 함께 배치하는 예제를 정리한 글이다.
예제는 CodePen 결과 화면을 iframe으로 불러와 티스토리 스킨 스타일과 충돌하지 않도록 구성하였다.
예제 구성
- 필터 UI: 칩(Chip) 버튼 스타일
- 보기 전환 UI: segmented 버튼 스타일
- 카드 리스트: Grid 기반 3열 → 2열 → 1열 반응형
- 뱃지/태그: badge / tag 컴포넌트
예제 실행 화면
정리
- 필터 UI는 버튼을 칩 형태로 만들고 active 상태를 분리하면 된다.
- 카드는 Grid로 배치하면 반응형 열 전환이 쉽다.
- 뱃지/태그는 재사용 컴포넌트로 만들면 효율이 좋다.
- 실제 필터 동작은 JavaScript로 연결하면 된다.
- 예제 화면이 잘리면 iframe height 값을 늘리면 된다.
'Computer Science > CSS' 카테고리의 다른 글
| [CSS ] 18. UI 예제 (탭 / 아코디언 / 페이지네이션) (0) | 2026.02.08 |
|---|---|
| [CSS ] 17. UI 예제 (모달 / 드롭다운 / 토스트) (0) | 2026.02.08 |
| [CSS ] 16. 미니 페이지 3종 (상품 / 댓글 / 알림) (0) | 2026.02.08 |
| [CSS ] 15. 미니 페이지 2종 (로그인 / 프로필) (0) | 2026.02.08 |
| [CSS ] 14. 미니 페이지 반응형 템플릿 (0) | 2026.02.08 |