@B_user2bi, 윈도우 위젯 배포

<div id="draggable-popup" class="win-popup" style="display: none;">
  <div id="popup-header" class="win-header">
    <span class="win-title">Notice.exe</span>
    <div class="win-buttons">
      <span class="win-btn" onclick="toggleFold()">_</span>
      <span class="win-btn" onclick="closePopup()">×</span>
    </div>
  </div>
  
  <div id="popup-body-content" class="win-body">
    <div class="win-img-box">
      <img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExNHJueHBybm5ueXF6emRyeXp6eXp6eXp6eXp6eXp6eXp6eXp6eCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3o7TKMGpxxcaUvWd0c/giphy.gif" alt="위젯 이미지">
    </div>
    <div class="win-text">
      <h3>공지사항</h3>
      <p>닫기(×)를 누르면 이 창을 닫기 전까지는 다시 나오지 않습니다. <br>재방문 시에는 다시 나타납니다!</p>
    </div>
  </div>
</div>

<style>
  .win-popup {
    position: fixed;
    top: 120px;
    left: 40px;
    width: 280px;
    z-index: 9999;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
    font-family: 'Tahoma', sans-serif;
    padding: 2px;
  }

  .win-header {
    background: linear-gradient(90deg, #000080, #1084d0);
    padding: 4px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
  }

  .win-title { color: white; font-size: 11px; font-weight: bold; pointer-events: none; }
  .win-btn {
    width: 18px; height: 16px; background: #c0c0c0;
    border: 1px solid; border-color: #ffffff #808080 #808080 #ffffff;
    font-size: 12px; text-align: center; line-height: 12px; cursor: pointer;
    margin-left: 2px;
  }

  .win-body { padding: 15px; border: 1px inset #ffffff; margin-top: 2px; background: #c0c0c0; }
  .folded { display: none; }

  .win-img-box img { width: 100%; border: 2px inset #808080; display: block; margin-bottom: 10px; }
  .win-text h3 { font-size: 14px; margin: 0 0 5px 0; color: #000; }
  .win-text p { font-size: 12px; line-height: 1.4; color: #222; }
  
  /* 미디어 쿼리: 768px 이하일 때 CSS로 완전히 숨김 */
  @media (max-width: 768px) {
    #draggable-popup {
      display: none !important;
    }
  }
</style>

<script>
  const popup = document.getElementById("draggable-popup");
  const bodyContent = document.getElementById("popup-body-content");

  // ✅ 수정 포인트: 화면 너비가 768px보다 클 때(PC)만 실행하도록 조건 추가
  if (window.innerWidth > 768 && !sessionStorage.getItem("hidePopup")) {
    popup.style.display = "block";
  }

  function closePopup() {
    popup.style.display = "none";
    sessionStorage.setItem("hidePopup", "true");
  }

  function toggleFold() {
    bodyContent.classList.toggle("folded");
  }

  let isDragging = false;
  let offset = { x: 0, y: 0 };

  document.getElementById("popup-header").addEventListener("mousedown", (e) => {
    isDragging = true;
    offset.x = e.clientX - popup.offsetLeft;
    offset.y = e.clientY - popup.offsetTop;
  });

  document.addEventListener("mousemove", (e) => {
    if (!isDragging) return;
    popup.style.left = (e.clientX - offset.x) + "px";
    popup.style.top = (e.clientY - offset.y) + "px";
  });

  document.addEventListener("mouseup", () => { isDragging = false; });
</script>

위 코드 복사 후 html > /body 바로 위 붙여넣기 하시면 끝~

!모바일에서는 보이지 않아요!

- 커스텀 설명

(제목 또는 소제목 변경)

<span class="win-title">Notice.exe</span>

에서 빨간색으로 되어있는 부분에 원하시는 글을 써넣으시면 창 제목이 바뀝니다!

<div class="win-text">
<h3>공지사항</h3>
<p>닫기(×)를 누르면 이 창을 닫기 전까지는 다시 나오지 않습니다. <br>재방문 시에는 다시 나타납니다!</p>

빨간색으로 되어있는 부분을 수정하면 됩니다!

- <br>는 줄 바꾸는 태그입니다 -

(이미지 변경)

빨간색으로 되어있는 부분에 이미지 주소를 넣어주시면 됩니다! (움짤도 가능)

이미지 호스팅 사이트

03.30 / 깔끔한 디자인 버전도 추가했습니다~

<div id="final-clean-popup" class="modern-popup">
  <div id="final-popup-header" class="modern-header">
    <span class="modern-title">Notice</span>
    <div class="modern-buttons">
      <button type="button" id="btn-popup-fold" class="modern-btn">_</button>
      <button type="button" id="btn-popup-close" class="modern-btn">×</button>
    </div>
  </div>
  
  <div id="final-popup-body" class="modern-body">
    <div class="modern-img-box">
      <img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExNHJueHBybm5ueXF6emRyeXp6eXp6eXp6eXp6eXp6eXp6eXp6eCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3o7TKMGpxxcaUvWd0c/giphy.gif" alt="widget">
    </div>
    <div class="modern-text">
      <h3>공지사항</h3>
      <p>X를 누르면 새로고침 해도 뜨지 않습니다!<br>재방문을 하셔야 창이 다시 나타나며, 창을 접거나 세션 동안 닫을 수 있습니다.</p>
    </div>
  </div>
</div>

<style>
  .modern-popup {
    position: fixed; top: 120px; left: 40px; width: 260px; z-index: 99999;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    font-family: 'Pretendard', sans-serif; overflow: hidden; display: none;
  }

  .modern-header {
    padding: 12px 15px; background: rgba(0, 0, 0, 0.04);
    display: flex; justify-content: space-between; align-items: center;
    cursor: move; border-bottom: 1px solid rgba(0,0,0,0.06);
  }

  .modern-title { font-size: 13px; font-weight: 700; color: #333; pointer-events: none; }
  .modern-buttons { display: flex; gap: 6px; }

  .modern-btn {
    background: rgba(0,0,0,0.05); border: none; width: 24px; height: 24px;
    border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: bold;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; color: #555; padding: 0; line-height: 1;
  }

  .modern-btn:hover { background: rgba(0,0,0,0.15); color: #000; }
  .modern-btn:active { transform: scale(0.9); }

  .modern-body { padding: 18px; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; }
  .is-folded { display: none !important; }

  .modern-img-box img { width: 100%; border-radius: 10px; margin-bottom: 12px; display: block; }
  .modern-text h3 { font-size: 15px; margin: 0 0 6px 0; color: #111; font-weight: 700; }
  .modern-text p { font-size: 12px; color: #555; line-height: 1.6; margin: 0; }

  /* ✅ 수정 1: ID 이름을 'final-clean-popup'으로 정확히 맞춤 */
  @media (max-width: 768px) {
    #final-clean-popup {
      display: none !important;
    }
  }
</style>

<script>
(function() {
  document.addEventListener("DOMContentLoaded", function() {
    const popup = document.getElementById('final-clean-popup');
    const header = document.getElementById('final-popup-header');
    const body = document.getElementById('final-popup-body');
    const btnFold = document.getElementById('btn-popup-fold');
    const btnClose = document.getElementById('btn-popup-close');

    // ✅ 수정 2: JS 실행 단계에서도 PC 화면(768px 초과)일 때만 띄우도록 설정
    if (window.innerWidth > 768 && !sessionStorage.getItem('hideFinalPopup')) {
      popup.style.display = 'block';
    }

    btnFold.addEventListener('click', function(e) {
      e.stopPropagation();
      body.classList.toggle('is-folded');
    });

    btnClose.addEventListener('click', function(e) {
      e.stopPropagation();
      popup.style.display = 'none';
      sessionStorage.setItem('hideFinalPopup', 'true');
    });

    let isDragging = false;
    let currentX, currentY, initialX, initialY, xOffset = 0, yOffset = 0;

    header.addEventListener("mousedown", dragStart);
    document.addEventListener("mousemove", drag);
    document.addEventListener("mouseup", dragEnd);

    function dragStart(e) {
      initialX = e.clientX - xOffset;
      initialY = e.clientY - yOffset;
      if (e.target === header) isDragging = true;
    }

    function drag(e) {
      if (isDragging) {
        e.preventDefault();
        currentX = e.clientX - initialX;
        currentY = e.clientY - initialY;
        xOffset = currentX;
        yOffset = currentY;
        popup.style.transform = `translate(${currentX}px, ${currentY}px)`;
      }
    }

    function dragEnd() {
      initialX = currentX;
      initialY = currentY;
      isDragging = false;
    }
  });
})();
</script>

윈도우 위젯 배포

티스토리툴바