오직 HTML과 CSS만으로 모달 창을 만드는 방법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 정적 사이트, 랜딩 페이지, 문서 등에서 가볍고 빠른 UI를 구현해야 하는 프론트엔드 개발자
- 초보자 또는 간단한 기능 구현에 집중하는 개발자
핵심 요약
:target
의사클래스를 사용해 URL 해시를 통해 모달을 표시/숨김- HTML
태그와 CSS
:target
으로 JavaScript 없이 모달 작동 - 가볍고 유지보수가 쉬운 솔루션으로 정적 사이트에 적합
섹션별 세부 요약
1. HTML 구조
2. CSS 스타일링
- 모달 오버레이:
position: fixed
,background: rgba(0,0,0,0.6)
- 모달 컨텐츠:
margin: 10% auto
,max-width: 500px
transition: opacity 0.4s ease
로 부드러운 효과 적용:target
상태에서opacity: 1
로 모달 표시
3. 장단점
- 장점
- JavaScript 의존성 없음
- 정적 사이트에 적합
- HTML/CSS만으로 구현 가능
- 단점
- 한 번에 하나의 모달만 표시 가능
- 복잡한 인터랙션 제어 불가
- 접근성 옵션 제한
4. 최종 고려사항
- 간단한 알림, 뉴스레터, 온보딩 팝업에 적합
- 복잡한 기능 (폼 검증, 애니메이션)은 JavaScript 사용 권장
- 애니메이션, 다크 모드 확장 가능
결론
:target
의사클래스를 활용해 JavaScript 없이 모달 구현 가능- 정적 사이트에 적합한 가벼운 솔루션으로, 접근성과 복잡성을 고려해 사용 시점 결정
- 복잡한 상호작용이 필요한 경우 JavaScript로 확장 권장