CSS만으로 팝업 레이어(Modal WIndow)를 만드는 방법입니다.
See the Pen Pure CSS, Simple Modal Window by moksunung (@moksunung) on CodePen.
위 예제는 http://codepen.io 에 작성했습니다.
원리 간단설명
1. checkbox input 을 하나 만들고 그 바로 뒤에 모달 레이어로 사용할 div를 디자인합니다. 체크박스 input은 사용자에게 보이질 부분이 아니라, 브라우저가 modal 레이어를 선택하는 기능적 역할만 수행할 것이기 때문에 display:none; 등 으로 안보이도록 가립니다.
2. 모달 div는 기본 상태가 보이지 않는 상태로 설정해놓습니다. display:none; 이라든지 visibility: hidden; 또는 collapse 라던지요..
위 예제에서는 팝업 애니메이션 효과를 나타내기 위해 visibility:collapse; 로 접어 놓고 transform:scale(0,0); 으로 화면에 보이지 않게 해놓았습니다.
3. div가 디자인이 끝나면, 일차적으로 해당 체크박스 input을 :checked 선택자로 잡고 뒤이어 형제 선택자 ~ 를 이용하여 바로 뒤에 나오는 모달 div를 최종적으로 잡아서 디자인합니다.
input[type=checkbox]:checked ~ div {}
이와 같은 형태가 되겠지요.내용을 해석하자면 "type이 checkbox인 input태그가 check되어 있을 때 ~ 바로 뒤에오는 div 를 {} 처럼 만들어라." 라는 정도가 되겠네요.
4. 이제 모달 div를 화면에 어떻게 가려놓았던지, 이 부분에서 보여지게 만들면 됩니다.
애니메이션 효과를 주기 위해서는 transition 이나 keyframe 을 이용한 animation 을 걸어도 좋습니다.
* 여기서 중요한 것은, input 레이어와 작동할 div가 같은 depth의 형제 선택자로 존재해야 합니다. 그래야 CSS3 형제 선택자 ~ 로 선택할 수 있기 때문입니다. 그 것만 지킬 수 있다면 모달레이어 뿐 아니라 checkbox 상태, radio 상태 등 input 의 변수기능을 통해 구현할 수 있는 모든 것들을 CSS만으로 구현할 수 있습니다.
자세한 부분은 예제를 살펴보세요!
