웹 개발에서 팝업은 사용자에게 중요한 정보를 전달하거나 추가적인 상호작용을 유도할 때 자주 사용되는 UI 요소입니다. CSS로 스타일을 지정하고 JavaScript로 동작을 제어하면 간단한 코드만으로 모달 형태의 팝업을 손쉽게 구현할 수 있습니다.
팝업 구현의 핵심 원리
기본적인 팝업 구조는 세 가지 요소로 구성됩니다. 먼저 화면 전체를 덮는 반투명한 오버레이(배경) 영역, 그 위에 표시되는 콘텐츠 박스, 그리고 팝업을 닫는 버튼입니다. CSS의 position: fixed와 z-index를 활용해 팝업을 화면 최상단에 고정하고, JavaScript의 클릭 이벤트를 통해 팝업을 열고 닫는 방식으로 동작합니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.popUp {
text-align: center;
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
.popupContent {
font-size: 20px;
font-weight: bold;
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: rgb(255, 65, 65);
float: right;
font-size: 40px;
font-weight: bold;
}
.close:hover, .close:focus {
color: #ff1010;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Popup Example</h1>
<button class="openPopUp">Open Popup</button>
<h2>위 버튼을 클릭하면 팝업이 열립니다</h2>
<div class="popUp">
<div class="popupContent">
<span class="close">×</span>
<p>팝업 내부의 샘플 텍스트입니다</p>
</div>
</div>
<script>
var popUp = document.querySelector(".popUp");
var btn = document.querySelector(".openPopUp");
var span = document.querySelector(".close");
btn.addEventListener("click", () => {
popUp.style.display = "block";
});
span.addEventListener("click", () => {
popUp.style.display = "none";
});
window.onclick = function(event) {
if (event.target == popUp) {
popUp.style.display = "none";
}
};
</script>
</body>
</html>코드 설명
CSS 부분
.popUp 클래스는 화면 전체를 차지하는 오버레이 역할을 합니다. display: nonergba(0, 0, 0, 0.4) 배경색으로 뒤쪽 콘텐츠를 어둡게 처리해 팝업에 시각적으로 집중하게 만듭니다.
.popupContent 클래스는 실제 팝업 본문으로, 흰색 배경과 테두리를 가진 박스가 화면 중앙에 표시됩니다. .close:hover 효과를 적용했습니다.
JavaScript 부분
JavaScript에서는 세 가지 이벤트를 처리합니다.
1. 열기 버튼 클릭: 'Open Popup' 버튼을 클릭하면 display 속성이 block으로 변경되어 팝업이 화면에 나타납니다.
2. 닫기 버튼 클릭: X 표시를 클릭하면 display 속성이 다시 none으로 설정되어 팝업이 사라집니다.
3. 배경 영역 클릭: 팝업 외부의 어두운 배경을 클릭했을 때도 팝업이 닫히도록 window.onclick 이벤트에서 클릭된 대상이 오버레이 자체인지 확인합니다. 이 조건 검사 덕분에 팝업 내부를 클릭했을 때는 팝업이 닫히지 않습니다.
실행 결과
위 코드를 실행하면 페이지에 제목과 함께 'Open Popup' 버튼이 표시됩니다.
'Open Popup' 버튼을 클릭하면 아래와 같이 화면 중앙에 팝업이 나타나며, X 버튼이나 배경 영역을 클릭하면 팝업이 닫힙니다.
마무리
이처럼 CSS와 JavaScript만으로도 외부 라이브러리 없이 깔끔한 팝업을 구현할 수 있습니다. 여기에 CSS 트랜지션을 추가해 열리고 닫힐 때 부드러운 애니메이션 효과를 넣거나, ESC 키로 팝업을 닫는 기능을 추가하면 더욱 완성도 높은 사용자 경험을 제공할 수 있습니다.