[jQuery] 레이어 팝업 과 레이어 풀 팝업을 만들어보자!

jQuery로 레이어 팝업과 레이어 풀 팝업 만들기: 한 번에 뚝딱!

안녕! 오늘은 정말 신나는 이야기로 시작할 거야. 우리가 웹사이트를 만들다 보면, "와, 여기서 팝업 하나 딱 띄우면 너무 멋지겠다!"라는 순간이 있지? 바로 그 레이어 팝업과 풀 팝업 이야기를 해볼 거야. 쉬운 방법으로 따라 할 수 있도록 설명할게! 준비됐니? 좋아, 그럼 출발해볼까?

---

Step 1: 기본 구조 잡기 (HTML 만들기)

우리가 무슨 집을 지어도 뼈대가 필요하잖아? 레이어 팝업도 마찬가지야! 먼저 HTML로 기본 틀을 만들어볼게.

<div id="layerPopup" style="display: none;">
  <div class="popup-content">
    <h2>안녕하세요!</h2>
    <p>이 팝업은 레이어로 뜹니다. 멋지죠?</p>
    <button id="closePopup">닫기</button>
  </div>
</div>

어때? 참 쉽지? 여기서 중요한 건 style="display: none;"이야. 처음엔 팝업이 안 보이도록 숨겨둔 거지!

---

Step 2: CSS로 예쁘게 꾸미기

팝업이 그냥 네모 박스처럼 뜨면 재미없잖아. 이걸 조금 더 예쁘게 꾸며볼게.

#layerPopup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  background-color: #fff;
  border: 2px solid #333;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.popup-content {
  padding: 20px;
  text-align: center;
}

#closePopup {
  margin-top: 10px;
  padding: 5px 10px;
  background-color: #f44336;
  color: #fff;
  border: none;
  cursor: pointer;
}

이제야 좀 보기 좋은 팝업처럼 보이겠지? '닫기' 버튼도 눈에 띄게 만들어봤어. 이 정도면 꽤 괜찮아 보여!

---

Step 3: jQuery로 팝업 띄우기

자, 이제 마법을 보여줄 차례야. 이 모든 게 jQuery 덕분에 쉽고 빠르게 가능하거든.

$(document).ready(function () {
  // 팝업 열기
  $('#openPopup').click(function () {
    $('#layerPopup').fadeIn();
  });

  // 팝업 닫기
  $('#closePopup').click(function () {
    $('#layerPopup').fadeOut();
  });
});

어때, 간단하지? fadeIn()과 fadeOut()은 팝업을 부드럽게 열고 닫아주는 효과를 줘. 클릭만 하면 완벽하게 작동할 거야!

---

Step 4: 풀 팝업 만들기

이제 한 단계 더 나아가서 화면을 꽉 채우는 풀 팝업을 만들어볼까? 아주 비슷한데 살짝 다른 느낌이야.

HTML 구조

<div id="fullLayerPopup" style="display: none;">
  <div class="popup-content">
    <h2>풀 팝업입니다!</h2>
    <p>이 팝업은 화면 전체를 덮습니다.</p>
    <button id="closeFullPopup">닫기</button>
  </div>
</div>

CSS 스타일

#fullLayerPopup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

jQuery 스크립트

$(document).ready(function () {
  $('#openFullPopup').click(function () {
    $('#fullLayerPopup').fadeIn();
  });

  $('#closeFullPopup').click(function () {
    $('#fullLayerPopup').fadeOut();
  });
});

---

팁 & 트릭

1. 팝업 닫기를 Esc 키로도 가능하게 하고 싶다면? 아래 코드를 추가하면 돼!
2. $(document).keyup(function (e) { if (e.key === "Escape") { $('#layerPopup, #fullLayerPopup').fadeOut(); } });
3. 애니메이션을 더 추가해보는 것도 좋아! 예를 들어 slideDown()이나 slideUp()을 써도 재미있지.

---

결론

우리는 오늘 정말 다양한 팝업을 만들어봤어. 간단한 레이어 팝업부터 화면 전체를 덮는 풀 팝업까지! 사실 이 모든 게 jQuery 덕분에 쉽게 가능했지. 아직 어렵게 느껴진다면, 괜찮아! 천천히 따라 하다 보면 "아, 이게 이렇게 되는구나!" 하고 감이 올 거야.

그럼 다음에도 더 재미있는 주제로 다시 만나자! 질문이 있으면 언제든 물어봐도 좋아. 😊