웹페이지 가운데 표시되는 인라인 팝업창 디자인 만들기
많은 사용자들이 웹브라우저 설정에서 실제 모달 팝업창이 안 뜨게 차단해놓는 경우가 많기 때문에 공지사항이나 알림과 같은 방문자에게 꼭 보여야 하는 내용을 웹사이트에 표시하려면 웹페이지 안에 팝업창처럼 보이는 요소를 표시하는 것이 일반적인 추세입니다.
다만, 이렇게 별도의 화면으로 띄워서 알려줌에도 팝업 내용을 확인하지 않고 지나쳐버리기 때문에 실제 모달 팝업창 처럼 방문자가 확인 버튼을 눌러야만 웹 페이지 화면으로 넘어가도록 하는 방식을 사용하기도 합니다.
미리 말하자면
방문자의 확인이 없으면 다른 웹 페이지로 넘어가지 않는 기능은 자바스크립트의 도움이 필수입니다.
방문자가 웹사이트의 링크를 클릭해 다른 페이지로 넘어가지 않도록 이벤트를 차단해야 하고, 확인 버튼을 누르면 팝업 대화상자가 사라지도록 해야 합니다.
그리고, 쿠키 값 등으로 대화상자를 확인했다는 표시를 저장해서 대화 상자가 다시 표시되지 않도록 하는 과정도 필요합니다.
자바스크립트 없이 CSS만으로 인라인 팝업 알림창을 만들어 보겠습니다.
웹 페이지 내용을 대신해서 전체 배경 이미지를 하나 붙입니다.
html, body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body{
background-image: url('./bg.jpg'); /* 배경이미지 */
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}그리고 웹 페이지 영역 전체를 가려서 웹페이지에 접근하지 못하도록 막는 기능을 하는 일종의 가림막? 을 하나 붙여야 합니다.
가림막 역할을 하는 블록 태그를 만든 후 화면을 채워서 막아도 되지만, 조금 더 세련되게 가상 요소를 이용해서 <body> 태그에 붙이는 방식을 사용합니다.
가상 요소를 이용하면 가림막용 블록 태그를 추가로 제어하지 않아도 되는 장점이 있습니다.
body.dimmed::before{
content: '';
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(255,255,255, 0.75);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}가상 요소의 속성 값에 대한 설명이 필요합니다.
표시할 컨텐츠가 없는 가상 요소를 하나 생성합니다. 이렇게 가상 요소를 정의하면 "body" 요소에 "dimmed" 클래스가 있으면 "::before" 가상 요소가 자동으로 생성됩니다.
나중에 "<body></body>" 태그에 자바스크립트로 "dimmed" 클래스를 추가/삭제해주면 자동으로 가림막 역할을 하는 가상 요소가 붙었다 사라졌다 하게 됩니다. 여기서는 다음처럼 "dimmed" 클래스를 추가해서 가림막을 고정 표시합니다.
<body class="dimmed">
</body>가상 요소에는 크기 값을 별도로 설정하지 않았습니다.
일반적인 블록 태그를 기준으로 블록 요소를 웹 브라우저 뷰포트 영역을 채우려면 "width: 100%; height: 100%;"와 같은 값으로 속성을 부여합니다.
너비, 높이값 속성 대신 다음과 같이 가상 요소의 상하좌우 영역에 윕 브라우저 뷰포트 영역의 각 방향 끝에 달라붙도록 위치를 잡는 방식으로 가상 요소의 영역을 설정해줍니다.
left: 0;
right: 0;
top: 0;
bottom: 0;대부분의 경우에 "width: 100%; height: 100%;"과 "left: 0; right: 0; top: 0; bottom: 0;" 은 같은 결과를 보여줍니다.
그러나 "width: 100%; height: 100%;" 로 가림막 요소의 크기를 설정한 경우, 첫 번째 콘텐츠 태그가 문단("<p>")이거나, 상단 마진이 있는 태그가 오면 다음과 같이 가림막 상단에 여백이 생기는 문제가 있습니다.
예외 처리로 보정이 가능하지만, 더 간결하고 확실한 방법이 있으므로 "left: 0; right: 0; top: 0; bottom: 0;"로 사용하는 것이 좋습니다.
배경 이미지가 약간 비쳐보이도록 블러 효과와 반투명 효과를 추가합니다.
background-color: rgba(255,255,255, 0.75);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);이제 화면 가운데 팝업창이 표시되도록 블록 요소 하나를 추가합니다.
.popup {
z-index: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
min-width: 300px;
max-width: 600px;
background-color: #fff;
border-radius: 15px;
box-shadow: 0 2px 55px -25px rgb(0 0 0 / 100%);
}블록 태그를 부모 요소를 기준으로 수직, 수평 가운데 위치하려면 다음과 같이 속성을 추가하면 됩니다.
top: 50%;
left: 50%;
transform: translate(-50%,-50%);공지로 표시할 내용을 팝업창 블록 태그에 표시한 HTML 내용은 다음과 같습니다.
<body class="dimmed">
<div class="popup">
<div class="title">하계 휴가로 인한 휴무 안내</div>
<div class="content">
<p>7월 27일 ~ 7월 31일까지는 당사 하계 휴가기간입니다.</p>
<p>
휴가 기간동안 고객지원센터 전화 문의와 이메일 및 게시판 지원이 중지됩니다.<br>
7월 27일 오후 1시 이후 주문 제품은 8월 2일(월) 일괄 발송됩니다.<br>
휴가기간 동안 반품 수령건은 정상 수령이 가능하며 이 기간동안 수령된 반품건 또한 8월 2일(월) 일괄 처리됩니다.
</p>
<p>감사합니다.</p>
</div>
<div class="cmd">
<input type="button" name="btnclose" class="button" value="닫기">
</div>
</div>
</body>지금까지 만든 CSS를 적용하면 다음과 같이 보이게 됩니다.
이제 제목과 버튼을 표시하는 영역을 구분되도록 처리하고 여백을 부여하는 CSS를 추가합니다.
.popup > .title{
border-radius: 15px 15px 0 0;
min-height: 40px;
color: #fff;
background-color: #b66;
padding: 10px 15px;
box-sizing: border-box;
font-weight: bold;
}
.popup > .content {
padding: 20px;
box-sizing: border-box;
}
.popup > .cmd {
bottom: 0;
min-height: 40px;
padding: 15px 15px;
box-sizing: border-box;
border-radius: 0 0 15px 15px;
min-height: 40px;
text-align: right;
}
.popup > .cmd .button {
border-radius: 8px;
padding: 5px 10px;
border: 1px solid #aaa;
}
.popup > .cmd .button:hover {
color: #fff;
background-color: #000;
border-color: #000;
}완성된 팝업창은 다음과 같이 보이게 됩니다.
앞서 설명한 것처럼 자바스크립트의 도움이 있어와 모달 팝업창은 완전하게 동작합니다.
완성된 HTML/CSS 소스는 다음 압축 파일을 다운로드하여서 확인할 수 있습니다.