모달은 첫번째로 화면 전체를 어둡게 만들어주는 배경(background)과 모달 팝업을 감싸주는 창(window) 마지막으로 모달 팝업의 내용을 나타내는 팝업(popup) 으로 구성됩니다. 배경과 창을 나타내는 HTML 코드는 다음과 같습니다.
이어서 배경을 위한 CSS 코드를 작성해 보겠습니다. position fixed 속성을 사용하여 스크롤이 발생하더라도 화면에 고정되도록 하였고, width, height 를 이용하여 화면을 가득 차게 만들었습니다. 또한 배경의 어두운 정도는 0.3 으로 하였으나 이 부분은 원하시는 만큼 진하게 또는 연하게 하시면 될 것 같습니다. 마지막으로 z-index 를 이용해서 화면의 맨 앞으로 모달을 배치했습니다.
.background { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.3); z-index: 1000; }이어서 창을 위한 CSS 코드를 작성해 보겠습니다. 창은 배경안에 팝업이 들어갈 공간을 지정해주기 위한 부분입니다. 따라서 다음과 같이 배경에 가득 차도록 width, height 를 조절해 주시면 됩니다. 또한, 팝업이 들어갈 공간을 제한해주어얗 하기 때문에 position: relative; 속성을 추가하였습니다.
.window { position: relative; width: 100%; height: 100%; }이제 마지막으로 대망의 ... 팝업 스타일 코드입니다! 우선 position, top, left, transform 속성을 이용해서 창의 정 가운데에 배치한 다음, 배경색을 흰색으로 지정하고 그림자를 조금 주었습니다. 현재는 내용이 없기 때문에 width, height 를 임시로 지정해서 500px로 입력을 해 두었지만, 원래 사용할 때에는 화면의 세로길이를 넘어가는 경우에만 height를 지정하여 스크롤을 넣어두고, 그렇지 않은 경우에는 둘다 지정하지 않습니다. 내용을 넣으면 알아서 예쁘게 화면이 늘어나기 때문입니다.
.popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #ffffff; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3); /* 임시 지정 */ width: 500px; height: 500px; }자 이제 이 모달팝업에 핵심이라고 볼 수 있는 닫기(close) 기능과 열기(show) 기능을 넣어보려고 합니다. 기존 CSS에 코드를 살짝 덧붙일 예정이니 너무 부담가지지 않으셔도 될 것 같습니다.
먼저 모달이 나타날때에는 천천히 나타나는 효과를 주면 훨씬 예쁘겠죠? 그러기 위해서는 기존 코드에 아래와 같이 숨기기를 위한 코드를 추가해 주어야 합니다. 원래는 z-index: 1000 을 지워야 하는게 맞지만, 이해를 돕기 위해 기존 코드와 변경사항을 알아줬으면 해서 이렇게 작성을 하였습니다.
.background { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.3); z-index: 1000; /* 숨기기 */ z-index: -1; opacity: 0; }그 다음 나타날때 적용할 스타일을 별도의 클래스로 만들어 줍니다. opacity와 z-index를 사용하여 투명도와 위치가 원래대로 나타나도록 하고, 그 시간은 0.5초를 지정해 주었습니다.
.show { opacity: 1; z-index: 1000; transition: all .5s; }이어서 하얀색 팝업(popup)을 아래에서 위로 살짝 올라오는 느낌을 적용해 보겠습니다. 기존에 y를 -50% 에 배치를 했었는데 이번에는 조금 더 아래인 -40%를 초기 위치로 설정하였습니다.
팝업은 웹사이트에서 공지나 이벤트 등을 방문자에게 알리는 수단으로 웹사이트의 마케팅에 중요한 정보를 제공할 수 있습니다.
사이트 주소를 클릭하거나 메인페이지로 들어왔을 시 제일먼저 보게되는 화면이 '팝업'이 될 수 있기 때문에
두부플러스 팝업앱에서 지원하는 다양한 설정기능을 활용하시어 쉽고 간단하지만 퀄리티 높은 팝업창으로 만드실 수 있도록 안내드리겠습니다.
두부플러스는 반응형 빌더로 제작하는 웹사이트이기 때문에, PC로 제작하면 모바일까지 함께 제작되어집니다.
팝업 또한 처음 제작을 PC로 하셨다면, 모바일 팝업까지 같이 한번에 제작이 되지만, 모바일만 따로 다른 팝업을 노출하고싶으시다면 이것 또한 가능합니다.
팝업설정을 통해 제작하고 싶은 팝업의 사이즈와 기간, 노출영역을 선택하실 수 있습니다.
팝업 형태(레이어팝업, 새창팝업), 노출기간(설정안함, 하루, 일주일, 한달, 직접지정), 창사이즈, 창위치, 창닫기 옵션
팝업설정 활용을 하신다면, 원하시는 방향의 팝업을 쉽게 설정하시어 웹사이트에 노출하실 수 있습니다.
팝업은 생성 후 바로 웹사이트에 노출되기 때문에, 팝업 생성을 완료하신 후 사이트에서 꼭! 확인하시어 수정이 필요한 부분은 빠르게 수정해주시기 바랍니다.
- 팝업은 배경색 + 텍스트를 이용하여 간단하게 제작하실수도 있고
//master.dubuplus.com/디자인편집/1416267
- 팝업을 설정하시기 전 포토샵으로 이미지를 만들어 두신 후 이미지를 팝업으로 노출할 수도 있습니다.
//master.dubuplus.com/디자인편집/8271617
- 위치 : 원하는 위치를 9등분하여 점으로 표시
- 비율 : 가로세로 비율 100%, 가운데, 가로 100%, 세로 100% 로 이미지 비율을 선택할 수 있음
- 노출 : 반복안함, 가로반복, 세로반복, 반복으로 이미지를 팝업창안에 노출할 수 있음
팝업디자인을 설정하시려면, [전체영역설정]을 클릭하시어 팝업디자인설정 페이지로 이동합니다.
[전체영역설정] : 파랑색 톱니바퀴버튼
배경이미지의 이미지추가를 하시면, 팝업의 이미지를 위치 지정하여 설정하실 수 있습니다.
이미지 추가를 하시면 [이미지추가]하단에 추가된 이미지를 확인하실 수 있으며, 위치와 반복을 지정하시어 노출되는 팝업을 확인하실 수 있습니다.
아래 이미지는 팝업 전체를 꽉 채운 가로세로 비율 100%로 선택하셨을 경우입니다.
아래 이미지는 세로로 반복되는 이미지를 선택하여, 가운데에만 이미지가 노출되는 형태입니다.
아래 이미지는 가로 100%로 설정 후 배경에 색상을 넣은 팝업입니다.
아래 이미지는이미지 위치를 우상단으로 설정 후 가운데 사이즈로만 설정한 팝업입니다.
아래 이미지는 우하단, 가운데 비율에 이미지를 반복으로 선택한 팝업입니다.
링크는, 팝업을 통해 링크 바로가기도 가능하기때문에 이벤트페이지나 랜딩페이지로 이동시킬 수 있습니다.
팝업 이미지를 클릭하면 이동하기때문에, 따로 버튼을 넣어 링크를 넣지 않고도 쉽게 제작할 수 있습니다.
위의 이미지들처럼 팝업을 설정 하신 후 PC버전, 모바일 버젼을 필수로 확인해주셔야합니다.
아래 이미지는 모바일 버전으로 변경했을 시 화면이며,
모바일에는 [전체영역설정] : 파랑색 톱니바퀴버튼을 통해 다른 이미지를 넣어 팝업을 생성하였습니다.
팝업 이미지를 배경으로 하고, 요소추가를 통해 텍스트, 그림, 버튼을 넣어 팝업을 구성하실 수 있습니다.
아래 이미지는 모바일에서만 가능한 전화걸기입니다.
모바일에서 전화걸기 링크를 방문자가 클릭하면, 바로 전화연결이 되기때문에 필수로 입력하시어 사용하시길 권장드립니다.
팝업앱으로 설정한 PC버젼 팝업과 모바일 버젼의 팝업창입니다.
팝업설정을 운영자님께서도 쉽게 하실 수 있는 방법을 설명드렸습니다.
웹사이트나 쇼핑몰, 숙박예약 사이트에서 팝업이 필요하실때 쉽고 간편한 방법으로 팝업을 제작해보시기 바랍니다.
※ 여러개의 팝업을 노출하시면 웹사이트 방문자에게 불편함을 줄 수 있기 때문에, 필요한 팝업만 설정하시어 노출하시기 바랍니다.
※ 여러개의 팝업을 노출하셔야 한다면, 위치를 각각 조절하시어 노출하시는것도 추천드립니다.