팝업의 용도와 만드는 법

팝업이란?

팝업(Popup)은 웹 페이지에서 별도의 창이나 알림처럼 작은 창이 나타나는 것을 의미합니다.

사용 목적: 알림 표시, 추가 정보 제공, 광고, 폼 입력 등.
종류:
1. 새 창 팝업: 브라우저의 새 창을 띄움.
2. 모달 팝업: 현재 페이지 위에 작은 창이 뜸(주로 CSS와 JavaScript로 구현).

간단한 팝업 만들기 (모달 팝업)

1. HTML (구조 만들기)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Popup Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <button id="openPopup">팝업 열기</button>

  
  <div id="popup" class="hidden">
    <div class="popup-content">
      <span id="closePopup" class="close">×</span>
      <p>이것은 팝업입니다!</p>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

2. CSS (디자인 추가하기)

/* 숨기기 */
.hidden {
  display: none;
}

/* 팝업 배경 */
#popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 팝업 내용 */
.popup-content {
  background: white;
  padding: 20px;
  border-radius: 10px;
  width: 300px;
  text-align: center;
}

/* 닫기 버튼 */
.close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 20px;
  cursor: pointer;
}

3. JavaScript (동작 추가하기)

// 요소 가져오기
const openPopup = document.getElementById('openPopup');
const closePopup = document.getElementById('closePopup');
const popup = document.getElementById('popup');

// 팝업 열기
openPopup.addEventListener('click', () => {
popup.classList.remove('hidden');
});

// 팝업 닫기
closePopup.addEventListener('click', () => {
popup.classList.add('hidden');
});

작동 방식

버튼 클릭 시 popup의 hidden 클래스를 제거하여 팝업이 보이게 합니다.
팝업의 닫기 버튼(×)을 클릭하면 다시 hidden 클래스를 추가하여 숨깁니다.

결과

"팝업 열기" 버튼 클릭 → 화면에 작은 창이 뜸.
"×" 버튼 클릭 → 팝업 창이 닫힘.

Life Level Up