[CSS ] 18. UI 예제 (탭 / 아코디언 / 페이지네이션)
이 글은 자주 사용되는 UI 구성 요소 3가지를 예제로 정리한 글이다. 예제는 CodePen 결과 화면을 iframe으로 불러와 티스토리 스킨 스타일과 충돌하지 않도록 구성하였다.
예제 구성
- 탭 메뉴: :target을 이용한 CSS only 탭
- 아코디언: details/summary 기반 접기/펼치기
- 페이지네이션: active 상태 표시
예제 실행 화면
정리
- 탭은 해시(#)와 :target을 이용해 JS 없이도 동작 흐름을 이해할 수 있다.
- 아코디언은 details/summary로 구현하면 접근성과 구현 난이도가 좋다.
- 페이지네이션은 active 클래스로 현재 상태를 표현한다.
- 예제 화면이 잘리면 iframe height 값을 늘리면 된다.
'Computer Science > CSS' 카테고리의 다른 글
| [CSS ] 19. 카드 리스트 + 필터 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 |