CSS로 팝업만들기(+JavaScript)

button 태그를 이용해 클릭 시 팝업을 띄우는 간단한 팝업 창을 CSS와 HTML만으로 만들 수 있습니다. CSS로만 팝업을 구현하려면 visibility와 opacity 속성을 활용하여 팝업을 보였다가 숨기는 방식으로 구성할 수 있습니다.

팝업 창

이것은 간단한 CSS 팝업입니다.

<button class="open-popup">팝업 열기</button>

<!-- 팝업 오버레이 및 내용 -->
<div class="popup-overlay">
    <div class="popup-content">
        <h2>팝업 창</h2>
        <p>이것은 간단한 CSS 팝업입니다.</p>
        <button class="close-btn">닫기</button>
    </div>
</div>

 .popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 팝업 창 */
.popup-content {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    width: 300px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 팝업 활성화 상태 */
.popup-overlay.active {
    visibility: visible;
    opacity: 1;
}

/* 닫기 버튼 스타일 */
.close-btn {
    background-color: #ff5e5e;
    border: none;
    padding: 10px 20px;
    color: white;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

/* 팝업 열기 버튼 스타일 */
button.open-popup {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

// 팝업 관련 요소 선택
const popupOverlay = document.querySelector('.popup-overlay');
const openPopupBtn = document.querySelector('.open-popup');
const closePopupBtn = document.querySelector('.close-btn');

// 팝업 열기
openPopupBtn.addEventListener('click', function() {
    popupOverlay.classList.add('active');
});

// 팝업 닫기
closePopupBtn.addEventListener('click', function() {
    popupOverlay.classList.remove('active');
});

// 팝업 창 외부를 클릭하면 팝업 닫기
popupOverlay.addEventListener('click', function(e) {
    if (e.target === popupOverlay) {
        popupOverlay.classList.remove('active');
    }
});

설명

1. 팝업 열기 버튼: button 태그로 팝업을 여는 버튼을 만들었습니다. 이 버튼을 클릭하면 팝업 창이 열리게 됩니다.
2. 팝업 구조:
   • .popup-overlay: 팝업 창 뒤의 반투명 배경을 만드는 역할을 합니다. 기본적으로 visibility: hidden과 opacity: 0로 숨겨져 있다가, 팝업이 활성화되면 active 클래스를 추가하여 보이게 합니다.
   • .popup-content: 팝업 창의 내용입니다. 여기에는 제목과 내용, 닫기 버튼이 포함됩니다.
3. CSS로 팝업 창 표시/숨김:
   • .popup-overlay.active 클래스가 추가되면 팝업이 보이도록 visibility: visible과 opacity: 1로 변경합니다.
4. JavaScript:
   • 팝업을 열고 닫는 동작을 JavaScript로 구현했습니다. openPopupBtn을 클릭하면 .popup-overlay에 active 클래스를 추가하고, closePopupBtn을 클릭하면 active 클래스를 제거합니다.
   • 팝업 외부를 클릭해도 닫히도록 설정했습니다.

요약

• 팝업을 기본적으로 숨기고, 버튼 클릭 시 CSS 클래스 변경을 통해 팝업을 활성화/비활성화하는 방법입니다.
• JavaScript는 팝업을 열고 닫는 동작을 처리하는 데 사용되었습니다.