[CSS ] 17. UI 예제 (모달 / 드롭다운 / 토스트)
이 글은 자주 사용되는 UI 컴포넌트 3가지를 CSS 중심으로 구성한 예제이다. 예제는 CodePen 결과 화면을 iframe으로 불러와 티스토리 스킨 스타일과 충돌하지 않도록 구성하였다.
예제 구성
- 모달: :target을 이용한 CSS only 모달
- 드롭다운: details/summary 기반 메뉴
- 토스트: animation 기반 알림 표시
예제 실행 화면
정리
- :target을 사용하면 JS 없이도 모달을 제어할 수 있다.
- details/summary는 접근성과 구현 난이도가 좋은 드롭다운 방법이다.
- 토스트는 position + animation으로 간단히 구현할 수 있다.
- 예제 화면이 잘리면 iframe height 값을 늘리면 된다.
'Computer Science > CSS' 카테고리의 다른 글
| [CSS ] 19. 카드 리스트 + 필터 UI + 뱃지/칩 (0) | 2026.02.08 |
|---|---|
| [CSS ] 18. 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 |