[CSS] Only CSS Modal Popup

css3

이번에는 CSS만 이용하여 Modal (혹은 Layer) Popup을 만드는 방법에 대해 소개하겠습니다.

  1. :target 선택자
  2. Modal Popup 만들기
  3. 여러 개의 Modal Poup 만들기

이 포스트의 내용을 제대로 이해하기 위해서는 먼저 flex와 :target에 대한 이해가 필요합니다. flex와 :target 모두 이전 포스트에 언급 했으니, 먼저 확인 후 현재 포스트를 조회 해 주시길 바랍니다.



:target 선택자

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{margin:0;padding:0;}
    ul,li{list-style:none;}
    a{text-decoration:none;color:inherit;}
    #popup{display:none;}
    #popup:target{display:block;}
  </style>
</head>
<body>
  <a href="#popup" class="opener">열려라(클릭하세요)</a>
  <div id="popup">
    <h2>열렸다</h2>
    <a href="#">닫혀라</a>
  </div>
</body>
</html>

:target은 쉽게 말해 주소(URL)에서 가르키는 대상입니다.
<a href="#popup">을 클릭하면 id="popup"에 포커싱 됩니다. 이 때, id="popup"인 대상에게 :target 선택자가 활성화 됩니다. 이를 이용하여 Modal팝업을 만들 수 있으며, 탭메뉴, 토글메뉴 등도 제작할 수 있습니다.

:target에 대해 더 자세히 알고싶다면 해당 링크를 참고해주세요
https://www.w3schools.com/cssref/sel_target.asp



Modal Popup 만들기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{margin:0;padding:0;}
    ul,li{list-style:none;}
    a{text-decoration:none;color:inherit;}
    .layer{display:none;justify-content:center;align-items:center;background:rgba(0,0,0, 0.5);position:fixed;left:0;right:0;top:0;bottom:0;}
    .layer .box{padding:20px 20px 60px;margin:20px;width:500px;background:#fff;position:relative;}
    .layer .close{position:absolute;right:20px;bottom:20px;display:block;background:#09F;color:#fff;text-align:center;padding:5px 20px;font-size:13px;}
    .layer:target{display:flex;animation:open 0.5s;}

    @keyframes open {
      from {opacity:0;} to {opacity:1;}
    }
  </style>
</head>
<body>
  <a href="#popup" class="opener">열려라</a>
  <div id="popup" class="layer">
    <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      <a href="#" class="close">닫기</a>
    </div>
  </div>
</body>
</html>

핵심이 되는 부분은 다음과 같습니다.

  1. .layer:target{display:flex;}
  2. justify-content:center;
  3. align-items:center;

:target이 활성화 되면, display:none에서 flex로 변경합니다. 이 때, justify-content와 align-items를 통하여 가로/세로 가운데 정렬이 되도록 할 수 있습니다.

여러 개의 Modal Popup 만들기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{margin:0;padding:0;}
    ul,li{list-style:none;}
    a{text-decoration:none;color:inherit;}
    .layer{display:none;justify-content:center;align-items:center;background:rgba(0,0,0, 0.5);position:fixed;left:0;right:0;top:0;bottom:0;}
    .layer .box{padding:20px 20px 60px;margin:20px;width:500px;background:#fff;position:relative;}
    .layer .close{position:absolute;right:20px;bottom:20px;display:block;background:#09F;color:#fff;text-align:center;padding:5px 20px;font-size:13px;}
    .layer:target{display:flex;animation:open 0.5s;}

    @keyframes open {
      from {opacity:0;} to {opacity:1;}
    }
  </style>
</head>
<body>
  <a href="#popup1" class="opener">열려라1</a>
  <a href="#popup2" class="opener">열려라2</a>
  <a href="#popup3" class="opener">열려라3</a>
  <a href="#popup4" class="opener">열려라4</a>
  <div id="popup1" class="layer">
    <div class="box">
      totam sit a provident similique aliquam, illo ipsa sed? Reiciendis?
      <a href="#" class="close">닫기</a>
    </div>
  </div>
  <div id="popup2" class="layer">
    <div class="box">
      ipsa laudantium et tempore, molestiae deleniti reiciendis explicabo, sint velit.
      <a href="#" class="close">닫기</a>
    </div>
  </div>
  <div id="popup3" class="layer">
    <div class="box">
      architecto sapiente maiores voluptates error accusantium itaque. Officiis, nesciunt quis!
      <a href="#" class="close">닫기</a>
    </div>
  </div>
  <div id="popup4" class="layer">
    <div class="box">
      tempore, ab necessitatibus, corrupti cupiditate veritatis repellendus iure sunt optio.
      <a href="#" class="close">닫기</a>
    </div>
  </div>
</body>
</html>

이런식으로 .layer를 하나 제작해 놓으면, 다양한 형태로 여러 개의 modal popup을 만들 수 있습니다.



참고자료

  1. flex layout : http://junil-hwang.com/blog/css-flex-layout%ec%97%90-%eb%8c%80%ed%95%9c-%ec%9d%b4%ed%95%b4/
  2. css selector : http://junil-hwang.com/blog/css-selector-2/