[CSS ] 17. UI 예제 (모달 / 드롭다운 / 토스트)

[CSS ] 17. UI 예제 (모달 / 드롭다운 / 토스트)

---

이 글은 자주 사용되는 UI 컴포넌트 3가지를 CSS 중심으로 구성한 예제이다. 예제는 CodePen 결과 화면을 iframe으로 불러와 티스토리 스킨 스타일과 충돌하지 않도록 구성하였다.

---

예제 구성

• 모달: :target을 이용한 CSS only 모달
• 드롭다운: details/summary 기반 메뉴
• 토스트: animation 기반 알림 표시

---

예제 실행 화면

---

정리

• :target을 사용하면 JS 없이도 모달을 제어할 수 있다.
• details/summary는 접근성과 구현 난이도가 좋은 드롭다운 방법이다.
• 토스트는 position + animation으로 간단히 구현할 수 있다.
• 예제 화면이 잘리면 iframe height 값을 늘리면 된다.