2021.12.28 - CSS의 활용 #3: Popup창 생성

이번에는 팝업창을 띄우는 기능을 어떻게 만드는지 살펴보자. 지난 번에 했던 사이드 메뉴와 구현 방법은 크게 다르지 않다.

checkbox를 만들고, 그 체크 박스의 체크 여부에 따라 렌더링 여부가 달라지게끔 만들어줄 것이다.

처음에는 체크박스와 그에 연결되는 label을 하나 만들어주자.

<input type="checkbox" id="layerPopup">
<label for="layerPopup">버튼</label>

CSS에는 기본적으로 다음과 같이 세팅해준다.

*{ padding:0; margin:0; }
ul, li { list-style: none; }
a{ text-decoration: none; }

checkbox와 label의 styling을 설정해준다.

#layerPopup: { display:none; }

#layerPopup + label {
padding: 7px 14px;
background: #333;
color: #fff;
line-height: 18px;
}

이제 팝업창의 스타일과 레이어를 구성해보자. 우선 배경이 될 레이어를 만들고

그 위에 팝업창을 배치하는 방식을 사용할 것이다.

<div id="layer_bg">                     /* 배경 레이어 */
  <div id="popup">                      /* 팝업창 레이어 */
     <h2>
       제목
       	<label for="layerPopup">
          x                             /*  닫기 버튼  */
        </label>
    </h2>
    컨텐츠 영역입니다.
  </div>
</div>

구성을 뜯어보면 우선 팝업의 배경 레이어가 있고, 그 위에 팝업창이 있다.

팝업창 안에는 제목과 닫기 버튼(x), 컨텐츠가 표시될 영역으로 나눌 수 있다.

(닫기 버튼 또한 label element를 사용해 checkbox에 연동되게 하는 방식으로 구현한다.)

이 3개의 element를 잘 스타일링 해주면 된다.

우선 배경을 스타일링한다.

#layer_bg {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5)
}

#layerPopup:checked + label + #layer_bg {
  display: block;
}

#layer_bg > #popup {
  position: absolute;
  width: 450px;
  height: 300px;
  background: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*   x, y를 따로 움직이려고 하지 말고 한줄에 써야 한다.
  transform: translateX(-50%);
  transform: translateY(-50%);
  이렇게 두 번을 쓰면 뒤에 오는 Y축 이동이 X축 이동을 overwrite 해버려 
  x축 방향으로는 이동하지 않는다. 같은 attribute에 다른 value를 가지기 때문.  */
  display:inline-block;
  border-radius: 15px;
  padding: 15px;
  box-sizing: border-box;  
}

 #popup_bg > #popup > h2 {
   margin-bottom: 20px;
 }

 #popup_bg > #popup > h2 > label {
   float: right;
}

여기까지 했으면 그림자를 표현하는 방법을 이제부터 알아보자.

#popup에 다음과 같이 성질을 추가한다.

#popup_bg > #popup {
box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.2);   /*   각 값은 x, y, blur, 색을 의미한다.  */

여기까지하면 꽤나 그럴싸한 팝업창이 만들어진다.