CODELAB

코드랩은 디자인과 코드 뿐만 아니라 다양한 생각을 공유하며 소통하고, 여러가지 기회도 만들어보고, 공부도 하려는 목적으로 시작된 '2인 아이디어 동아리'입니다.

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만으로 구현할 수 있습니다.


자세한 부분은 예제를 살펴보세요!



작성완료