[CSS] 모달창 + 어두운 배경 반드는 기본적인 방법

 

안녕하세요! 오늘은 아래와 같은 모달창을 만들 때 필요한 기법(?)을 소개하도록 하겠습니다. 

 

모달창이란 사용자와의 상호작용을 위해 제공되는 인터페이스의 한 종류이비다. 보통 모달창을 띄우게 되면 화면의 가운데에 모달창을 노출시키고 나머지 부분은 검고 투명한 배경으로 처리하는 경우가 많이 있는데, 이를 위한 코드를 소개해드리겠습니다. 

 

 

HTML

<div class="modal__background">
  <div class="modal__box">
    Hello, this is modal window
  </div>
</div>

위 코드에서 class="model__background"에 해당하는 div 태그는 배경을 지정하기 위해 마련한 태그입니다. 그 안에 들어 있는 class="modal__box" 영역이 실제 모달창을 표현할 영역이 되고, 이 박스에 어떤 콘텐츠를 구성하냐에 따라 모달창의 모습이 달라집니다.

 

참고로 모달창은 웹사이트 상에 정적으로 언제나 띄워져 있는 경우가 거의 없고 보통 자바스크립트를 통해 '어떤 상황에 나타날지'를 정해주는 경우가 대부분인데, 여기에서는 그러한 과정은 생략하였습니다.

 

 

CSS

/* 모달창의 배경을 만든다 */
.modal__background{
  position: fixed;
  top:0; left: 0; bottom: 0; right: 0;
  background: rgba(0, 0, 0, 0.8);
}
 
/* 모달창 영역을 꾸민다 */
.modal__box{
  position: absolute;
  top: calc(50vh - 100px); left: calc(50vw - 200px);
  background-color: white;
  display: flex; justify-content: center;
  align-items: center;
  border-radius: 10px;
  width: 400px;
  height: 200px;
}

.modal__background

3행 : 배경이 움직여서는 안되므로 포지션을 fixed로 지정하였습니다.

4행 : 전 영역에 걸쳐 표시되도록 하기 위해 모든 위치를 0으로 지정하였습니다.

5행 : 검은 배경에 0.8 가량의 투명도를 지정하였습니다. 이렇게 하면 기존에 표시되던 내용을 완전히 가릴 수 없게 됩니다.

 

.modal__box

10행 : 배경 내에서 위치를 지정할 것이므로 absolute 포지션을 지정하였습니다.

11행 : 가운데 배치를 위한 위치 조정입니다. vh, vw 는 각각 실제 표시되고 있는 영역의 크기에 대한 상대적인 단위를 의미합니다.

13행 이하 : 모달의 콘텐츠들을 수평, 수직 가운데 위치하도록 지정하고, 모달의 모양 및 크기를 조정하였습니다. 

 

 

이상입니다. 같은 목적을 위해서는 이 외에도 의사요소를 통한 기법, box-shadow를 통한 기법 등 다양한 방법이 가능하나, 사실 모달창을 완벽하게 구현하기 위해서는 CSS코드를 고민하기 보다는 자바스크립트를 통한 구현이 더 쉬운 길(?)이라고 할 수 있겠습니다.