CSS로 모달 창 만들기: JavaScript 없이도 가능
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
프론트엔드 개발자, 웹 개발 초보자 및 중급자
핵심 요약
:target
및 checkbox hack 기법을 사용해 JavaScript 없이 모달 창 구현 가능:target
은 URL 해시를 활용한 상태 변경, checkbox hack은 숨은 checkbox를 통한 상태 관리:target
은 URL 변경 문제, checkbox hack은 접근성 고려 필요
섹션별 세부 요약
1. 모달 창 개요
- 모달 창의 정의: 페이지 상단에 표시되는 오버레이 요소
- 전통적 모달의 JavaScript 의존성: 표시, 닫기, 포커스 관리
- JavaScript 없이 모달 구현의 가능성을 제시
2. CSS 기술 소개
:target
pseudo-class: URL 해시와 ID 일치 시 스타일 적용- checkbox hack: 숨은 checkbox와
:checked
pseudo-class를 활용한 상태 관리 - 공통 기술 요소:
position: fixed
,opacity
,pointer-events
,z-index
,transition
3. `:target` 기반 모달 구현
- HTML: 해시 링크와 모달 요소 생성
- CSS:
:target
선택자로 모달 표시,#
링크로 닫기 - 예시 코드:
```css
.modal:target { opacity: 1; pointer-events: auto; }
```
4. `:target`의 한계
- URL 해시 변경으로 브라우저 히스토리 변경
- 여러 모달 열기 시 히스토리 누적 문제
5. checkbox hack 기반 모달 구현
- 숨은 checkbox 생성 및 label 연결
:checked
상태로 모달 표시/숨기기- 예시 코드:
```css
.modal-checkbox:checked ~ .modal { opacity: 1; }
```
6. 애니메이션 추가
transform
과transition
을 활용한 진입/퇴장 효과- 예시:
```css
.modal-content { transform: scale(0.8); transition: transform 0.3s; }
.modal-checkbox:checked ~ .modal .modal-content { transform: scale(1); }
```
7. 반응형 디자인 고려
- 모바일 화면에서의 너비/패딩 조정
- 미디어 쿼리 활용 예:
```css
@media (max-width: 600px) { .modal-content { width: 95%; } }
```
결론
:target
은 간단하지만 URL 변경 문제, checkbox hack은 접근성 고려 필요- 애니메이션과 반응형 디자인을 통해 사용자 경험 향상
- ARIA 속성 추가로 스크린 리더 호환성 강화 권장
- JavaScript 없이도 기능적이고 시각적으로 매력적인 모달 창 구현 가능