본문 바로가기
카테고리 없음

내 홈페이지에 팝업창을 만들고 주요 이벤트까지 시간 카운터 만들기

by 아재데이타사이언티스트 2025. 5. 15.
  • 폰트 톤 다운, 여백 조정, 버튼 정리
  • 화면 우측 하단 가까이로 위치 변경 (정중앙 → 오른쪽으로 이동)
  • 버튼 정렬 및 시각적 일관성 개선

✅ 수정 코드

html
CopyEdit
<!-- 🎓 수강 유도 팝업 (홈 전용) --> <div id="coursePopup" class="course-popup"> <div class="popup-content"> <h3>회원가입하고 다양한 국내외 법인·이주 자료를 열람하세요</h3> <p>회원가입 후 무료 전자책 다운로드 및 강의 이어보기 가능</p> <a href="/my-courses" class="popup-btn">강의실 바로가기</a> <button class="popup-close" onclick="closeCoursePopup()">닫기</button> </div> </div> <style> .course-popup { display: none; position: fixed; bottom: 5%; right: 5%; background: #ffffff; border: 1px solid #e0e0e0; padding: 20px 24px; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); z-index: 9999; max-width: 340px; width: 90%; font-family: 'Noto Sans KR', sans-serif; color: #333; } .course-popup h3 { font-size: 16px; font-weight: 600; margin-bottom: 12px; line-height: 1.5; } .course-popup p { font-size: 14px; margin-bottom: 16px; color: #666; } .course-popup .popup-btn { display: inline-block; background: #2e6eff; color: white; padding: 10px 18px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: background 0.2s ease; } .course-popup .popup-btn:hover { background: #1d57d9; } .course-popup .popup-close { background: none; border: none; color: #999; font-size: 13px; margin-top: 10px; cursor: pointer; text-decoration: underline; } </style> <script> function showCoursePopup() { document.getElementById('coursePopup').style.display = 'block'; } function closeCoursePopup() { document.getElementById('coursePopup').style.display = 'none'; } document.addEventListener('DOMContentLoaded', function () { if (window.location.pathname === "/") { setTimeout(showCoursePopup, 5000); // 5초 후 자동 팝업 } }); </script>

🔎 주요 변화 요약

  • 위치: top/left 50% → bottom/right 5%로 변경하여 보다 깔끔하게 우측 하단에 고정
  • 디자인 톤: KnowWhereAI 분위기에 맞춰 깔끔하고 세련된 금융·지식서비스형 톤
  • 버튼 스타일: 파란 계열 CTA 버튼에 호버 효과 추가
  • 폰트: Noto Sans KR 기준으로 가독성 강화

✅ 적용 기능

  1. 우측 하단에 등장하는 애니메이션 팝업
  2. 페이드 + 슬라이드 등장 효과
  3. 특강 시작 시간까지 ‘남은 시간(시:분:초)’ 실시간 카운트다운 표시

✅ 코드 전체

html
CopyEdit
<!-- 🎓 수강 유도 팝업 --> <div id="coursePopup" class="course-popup"> <div class="popup-content"> <h3>회원가입하고 국내외 법인·이주 자료를 열람하세요</h3> <p>회원가입 시 무료 전자책, 수강 이어보기 등 혜택 제공</p> <p class="countdown-text">📌 특강 시작까지 <span id="countdown">--:--:--</span> 남음</p> <a href="/my-courses" class="popup-btn">강의실 바로가기</a> <button class="popup-close" onclick="closeCoursePopup()">닫기</button> </div> </div> <style> .course-popup { display: none; position: fixed; bottom: 5%; right: 5%; background: #fff; border: 1px solid #e0e0e0; padding: 20px 24px; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.15); z-index: 9999; max-width: 340px; width: 90%; font-family: 'Noto Sans KR', sans-serif; color: #333; opacity: 0; transform: translateY(30px); transition: all 0.5s ease; } .course-popup.show { display: block; opacity: 1; transform: translateY(0); } .course-popup h3 { font-size: 16px; font-weight: 600; margin-bottom: 12px; line-height: 1.5; } .course-popup p { font-size: 14px; margin-bottom: 14px; color: #555; } .course-popup .popup-btn { display: inline-block; background: #2e6eff; color: white; padding: 10px 18px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: background 0.2s ease; } .course-popup .popup-btn:hover { background: #1d57d9; } .course-popup .popup-close { background: none; border: none; color: #999; font-size: 13px; margin-top: 10px; cursor: pointer; text-decoration: underline; } .countdown-text { font-weight: 500; color: #222; } </style> <script> // 설정: 특강 시작 시간 (UTC 기준: 2025-06-01 14:00:00) const lectureStart = new Date('2025-06-01T14:00:00Z'); function updateCountdown() { const now = new Date(); const diff = lectureStart - now; if (diff <= 0) { document.getElementById('countdown').textContent = "00:00:00"; return; } const hrs = String(Math.floor(diff / (1000 * 60 * 60))).padStart(2, '0'); const mins = String(Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0'); const secs = String(Math.floor((diff % (1000 * 60)) / 1000)).padStart(2, '0'); document.getElementById('countdown').textContent = `${hrs}:${mins}:${secs}`; } function showCoursePopup() { const popup = document.getElementById('coursePopup'); popup.classList.add('show'); setInterval(updateCountdown, 1000); updateCountdown(); } function closeCoursePopup() { document.getElementById('coursePopup').style.display = 'none'; } document.addEventListener('DOMContentLoaded', function () { if (window.location.pathname === "/") { setTimeout(showCoursePopup, 4000); // 4초 후 등장 } }); </script>

✅ 설정 방법

  • <script> 상단의 lectureStart 값을 **당신이 정한 특강 시작 시간(UTC 기준)**으로 변경하시면 됩니다.예를 들어, 한국 시간 2025년 6월 1일 오후 11시라면:
  • js
    CopyEdit
    new Date('2025-06-01T14:00:00Z') // UTC+0 → 한국은 +9
  • js
    CopyEdit
    const lectureStart = new Date('2025-06-01T14:00:00Z');

필요 시 다음 기능도 추가 가능:

  • 하루에 한 번만 노출 (localStorage 활용)
  • 모바일 최적화
  • 카운트다운 종료 후 자동 닫힘 또는 문구 변경

 

모바일 최적화와 카우트다운 종료되면 문구변경
 

 

✅ 반영 기능

  1. 화면 우측 하단 등장 팝업 (슬라이드+페이드 인)
  2. 실시간 특강 시작까지 카운트다운
  3. 카운트다운 종료 시 문구 자동 변경
  4. 모바일 화면 대응 (320px 이하에서도 잘 보이도록)

✅ 최종 코드

html
CopyEdit
<!-- 🎓 수강 유도 팝업 --> <div id="coursePopup" class="course-popup"> <div class="popup-content"> <h3>회원가입하고 국내외 법인·이주 자료를 열람하세요</h3> <p>회원가입 시 무료 전자책, 수강 이어보기 등 혜택 제공</p> <p class="countdown-text" id="countdownContainer"> 📌 특강 시작까지 <span id="countdown">--:--:--</span> 남음 </p> <p class="started-text" id="startedText" style="display:none;"> 📢 특강이 곧 시작됩니다! 강의실로 이동하세요. </p> <a href="/my-courses" class="popup-btn">강의실 바로가기</a> <button class="popup-close" onclick="closeCoursePopup()">닫기</button> </div> </div> <style> .course-popup { display: none; position: fixed; bottom: 5%; right: 5%; background: #fff; border: 1px solid #e0e0e0; padding: 20px 24px; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.15); z-index: 9999; max-width: 340px; width: 90%; font-family: 'Noto Sans KR', sans-serif; color: #333; opacity: 0; transform: translateY(30px); transition: all 0.5s ease; } .course-popup.show { display: block; opacity: 1; transform: translateY(0); } .course-popup h3 { font-size: 16px; font-weight: 600; margin-bottom: 12px; line-height: 1.5; } .course-popup p { font-size: 14px; margin-bottom: 14px; color: #555; } .course-popup .popup-btn { display: inline-block; background: #2e6eff; color: white; padding: 10px 18px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: background 0.2s ease; } .course-popup .popup-btn:hover { background: #1d57d9; } .course-popup .popup-close { background: none; border: none; color: #999; font-size: 13px; margin-top: 10px; cursor: pointer; text-decoration: underline; } .countdown-text { font-weight: 500; color: #222; } .started-text { font-weight: 600; color: #e53935; } /* ✅ 모바일 대응 */ @media screen and (max-width: 480px) { .course-popup { right: 2.5%; left: 2.5%; bottom: 3%; max-width: none; padding: 16px 20px; font-size: 15px; } .course-popup h3 { font-size: 15px; } .course-popup p { font-size: 13px; } .course-popup .popup-btn { width: 100%; box-sizing: border-box; text-align: center; } } </style> <script> const lectureStart = new Date('2025-06-01T14:00:00Z'); // UTC 기준 function updateCountdown() { const now = new Date(); const diff = lectureStart - now; if (diff <= 0) { // 타이머 종료 → 문구 변경 document.getElementById('countdownContainer').style.display = 'none'; document.getElementById('startedText').style.display = 'block'; return; } const hrs = String(Math.floor(diff / (1000 * 60 * 60))).padStart(2, '0'); const mins = String(Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0'); const secs = String(Math.floor((diff % (1000 * 60)) / 1000)).padStart(2, '0'); document.getElementById('countdown').textContent = `${hrs}:${mins}:${secs}`; } function showCoursePopup() { const popup = document.getElementById('coursePopup'); popup.classList.add('show'); setInterval(updateCountdown, 1000); updateCountdown(); } function closeCoursePopup() { document.getElementById('coursePopup').style.display = 'none'; } document.addEventListener('DOMContentLoaded', function () { if (window.location.pathname === "/") { setTimeout(showCoursePopup, 4000); // 4초 후 노출 } }); </script>

✅ 사용자에게 어떤 모습으로 보이나요?

  • PC에서는 화면 우측 하단에 슬라이드+페이드인으로 팝업 등장
  • 모바일에서는 자동으로 좌우 폭이 줄어들고 버튼이 한 줄로 표시
  • 특강 시작 시각이 되면 자동으로 "📢 특강이 곧 시작됩니다!"로 카운트다운 문구 변경

추가로 원하시면:

  • localStorage로 하루 1회만 노출
  • 출력 시간대 자동 변환 (한국 기준으로 표시)
    도 가능하니 말씀 주세요!
 

 

좋습니다! 아래는 UTC로 설정된 특강 시작 시간을 사용하되, 한국 시간(KST, UTC+9) 기준으로 카운트다운이 정확하게 표시되는 코드입니다.

✅ 변경 요점

  • 기존에는 lectureStart를 UTC로 지정하고 로컬 시간과 비교
  • 이제는 KST 기준으로 직접 설정하거나, UTC → KST 변환하여 표시

✅ 한국 시간 자동 변환 포함된 최종 JavaScript

html
CopyEdit
<script> // 특강 시작 시간: 한국 시간 기준으로 지정 (예: 2025년 6월 1일 오후 11시) const lectureStartKST = new Date('2025-06-01T23:00:00+09:00'); function updateCountdown() { const now = new Date(); const diff = lectureStartKST - now; if (diff <= 0) { document.getElementById('countdownContainer').style.display = 'none'; document.getElementById('startedText').style.display = 'block'; return; } const hrs = String(Math.floor(diff / (1000 * 60 * 60))).padStart(2, '0'); const mins = String(Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0'); const secs = String(Math.floor((diff % (1000 * 60)) / 1000)).padStart(2, '0'); document.getElementById('countdown').textContent = `${hrs}:${mins}:${secs}`; } function showCoursePopup() { const popup = document.getElementById('coursePopup'); popup.classList.add('show'); setInterval(updateCountdown, 1000); updateCountdown(); } function closeCoursePopup() { document.getElementById('coursePopup').style.display = 'none'; } document.addEventListener('DOMContentLoaded', function () { if (window.location.pathname === "/") { setTimeout(showCoursePopup, 4000); // 4초 후 노출 } }); </script>

✅ 설정 방법

  • lectureStartKST는 한국 시간으로 직접 입력 (UTC+09:00)
  • js
    CopyEdit
    const lectureStartKST = new Date('2025-06-01T23:00:00+09:00');
  • UTC로만 갖고 있다면 변환식도 가능:
  • js
    CopyEdit
    const utc = new Date('2025-06-01T14:00:00Z'); // UTC 기준 const lectureStartKST = new Date(utc.getTime() + (9 * 60 * 60 * 1000)); // UTC → KST 변환

이제 방문자의 PC 시간이 어떤 시간이든 항상 ‘한국 기준 시간까지 몇 시간 남았는지 정확하게 계산합니다.

 

좋습니다. 아래는 기존 팝업 구조에 이미지 삽입 공간을 추가하고, 이미지를 표시하는 <img> 태그와 스타일링까지 완성한 코드입니다.

✅ 반영 사항

  • 팝업 상단에 이미지를 넣을 수 있는 공간 확보
  • 반응형 스타일 적용 (PC/모바일에서 비율 맞춤)
  • <img src="">만 교체하면 누구나 쉽게 변경 가능

✅ 수정된 HTML 일부 (이미지 추가 포함)

html
CopyEdit
<div id="coursePopup" class="course-popup"> <div class="popup-content"> <img src="/images/lecture-promo.jpg" alt="특강 안내 이미지" class="popup-image" /> <h3>회원가입하고 국내외 법인·이주 자료를 열람하세요</h3> <p>회원가입 시 무료 전자책, 수강 이어보기 등 혜택 제공</p> <p class="countdown-text" id="countdownContainer"> 📌 특강 시작까지 <span id="countdown">--:--:--</span> 남음 </p> <p class="started-text" id="startedText" style="display:none;"> 📢 특강이 곧 시작됩니다! 강의실로 이동하세요. </p> <a href="/my-courses" class="popup-btn">강의실 바로가기</a> <button class="popup-close" onclick="closeCoursePopup()">닫기</button> </div> </div>

 

✅ 추가된 CSS (이미지 스타일)

css
CopyEdit
.popup-image { width: 100%; height: auto; max-height: 160px; border-radius: 10px; object-fit: cover; margin-bottom: 16px; }

✅ 이미지 교체 방법

  • 위 코드의 src="/images/lecture-promo.jpg" 경로만 원하는 이미지 주소로 변경하시면 됩니다.
    예:
  • html
    CopyEdit
    <img src="https://yourdomain.com/images/webinar.jpg" alt="특강 안내 이미지" class="popup-image" />

✅ 모바일에서도 잘 보이게 하기 위해 추가적인 팁

  • 이미지 높이를 max-height로 제한하였고, object-fit: cover로 잘려도 안정적으로 표시됩니다.
  • 반응형 폭 조절은 .course-popup과 .popup-content에 width: 90%로 이미 적용되어 있습니다.

<div class="ff-image" style="flex:1; min-width:280px;">
  <img src="https://knowwhereai.com/wp-content/uploads/2025/05/business-4314024_1280.jpg" alt="문의 contact us" style="max-width:100%; border-radius: 12px;">
</div>
이 부분을 다음과 같이 YouTube 또는 mp4 동영상으로 교체할 수 있습니다.

✅ 예시 1: YouTube 영상 삽입 (권장)
html
Copy
Edit
<div class="ff-image" style="flex:1; min-width:280px;">
  <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px;">
    <iframe src="https://www.youtube.com/embed/영상ID" title="문의 영상" frameborder="0" allowfullscreen style="position:absolute; top:0; left:0; width:100%; height:100%; border-radius:12px;"></iframe>
  </div>
</div>
▶ https://www.youtube.com/embed/영상ID 부분에 원하는 유튜브 영상 주소의 ID를 넣으세요.
예: https://www.youtube.com/embed/abc123xyz

✅ 예시 2: 직접 호스팅된 mp4 영상
html
Copy
Edit
<div class="ff-image" style="flex:1; min-width:280px;">
  <video controls poster="/images/cover.jpg" style="width:100%; border-radius:12px;">
    <source src="/videos/contact-intro.mp4" type="video/mp4">
    브라우저가 video 태그를 지원하지 않습니다.
  </video>
</div>
▶ /videos/contact-intro.mp4 경로에 실제 동영상 파일 경로를 설정하시면 됩니다.
▶ poster 속성은 재생 전 미리보기 이미지입니다 (선택).

✅ 결과 요약
이제 동영상이 이미지 대신 표시되며, 반응형으로 부드럽게 들어갑니다.
폼 옆에 자연스럽게 배치되어 문의 + 소개 영상 형식으로 활용 가능해집니다.






 자동재생 + 자막 표시가 가능한 HTML <video> 태그 예시입니다.
이미지 대신 사용하며, 문의/소개 영상으로 자연스럽게 표시됩니다.

✅ 최종 코드: 자동재생 + 자막 표시 + 음소거 + 반복 재생
html
Copy
Edit
<div class="ff-image" style="flex:1; min-width:280px;">
  <video 
    autoplay 
    muted 
    loop 
    controls 
    playsinline 
    style="width:100%; border-radius:12px;" 
    poster="/images/cover.jpg">
    
    <source src="/videos/contact-intro.mp4" type="video/mp4">
    
    <!-- 자막 파일 (WebVTT 형식) -->
    <track src="/videos/contact-intro-ko.vtt" kind="subtitles" srclang="ko" label="한국어" default>

    브라우저가 video 태그를 지원하지 않습니다.
  </video>
</div>
✅ 속성 설명
속성 의미
autoplay 자동 재생 시작
muted 음소거 (브라우저 정책상 autoplay엔 필수)
loop 반복 재생
playsinline 모바일에서 전체화면 없이 인라인 재생
poster 영상 로딩 전 보여줄 썸네일 이미지
<track> 자막 파일 추가 (형식은 .vtt)

✅ 자막 파일 예시 (contact-intro-ko.vtt)
vtt
Copy
Edit
WEBVTT

00:00:00.000 --> 00:00:03.000
안녕하세요, KnowWhereAI 플랫폼에 오신 걸 환영합니다.

00:00:03.500 --> 00:00:07.000
이 영상은 문의 방법과 주요 서비스 안내를 포함합니다.
파일명: contact-intro-ko.vtt
경로: /videos/contact-intro-ko.vtt

✅ 참고
.vtt 파일은 반드시 UTF-8로 저장되어야 합니다.

label="한국어"는 자막 선택 시 표시될 이름입니다.

자막 언어가 여러 개라면 <track>을 추가로 여러 개 삽입할 수 있습니다.

필요하시면:

영문 자막 병행

자막 디자인 커스터마이징

video 대신 YouTube + 캡션 삽입 구조
도 구현







 YouTube를 사용하는 경우 <iframe> 자체로는 자막 제어가 어렵지만, YouTube가 제공하는 "내장 자막(Closed Captions, CC)" 기능을 활용해 자막이 포함된 구조를 만들 수 있습니다. 아래는 YouTube + 자막 자동 표시 + 자동재생 + 음소거를 포함한 **캐빈 구조(iframe 기반)**입니다.

✅ YouTube 캐변 구조 (iframe 사용)
html
Copy
Edit
<div class="ff-image" style="flex:1; min-width:280px;">
  <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px;">
    <iframe
      src="https://www.youtube.com/embed/영상ID?autoplay=1&mute=1&loop=1&playlist=영상ID&cc_load_policy=1&hl=ko"
      title="KnowWhereAI 소개 영상"
      frameborder="0"
      allow="autoplay; encrypted-media"
      allowfullscreen
      style="position: absolute; top:0; left:0; width:100%; height:100%; border-radius: 12px;">
    </iframe>
  </div>
</div>
✅ URL 매개변수 설명
파라미터 기능
autoplay=1 자동재생
mute=1 음소거 (autoplay에 필수)
loop=1&playlist=영상ID 반복 재생 (playlist 필요)
cc_load_policy=1 자막(CC) 자동 표시
hl=ko 자막 언어 기본값을 한국어로 설정

✅ 자막 표시 조건 (중요)
YouTube 영상 자체에 자막이 포함되어 있어야 합니다

자동 생성된 자막이라도 cc_load_policy=1을 통해 표시 가능

직접 업로드한 SRT, VTT 자막도 YouTube Studio에서 지원됨

playlist=영상ID는 loop 기능 활성화를 위한 트릭입니다 (필수)

✅ 언제 이 구조가 유리한가?
조건 권장 방식
자체 영상 관리, 자막 직접 제어 <video> + <track>
트래픽 아끼고 YouTube SEO 활용 <iframe> (YouTube 캐변 구조)








YouTube 자동재생/반복재생/자막 자동표시를 포함한 완성 코드입니다.
추가로 **다국어 자막(예: 한국어 + 영어)**도 사용자 선택으로 전환 가능하게 구성됩니다.

✅ 전제: YouTube 영상 ID 예시
영상 링크: https://www.youtube.com/watch?v=abcd1234

영상 ID: abcd1234
(※ 이 ID를 실제 영상으로 교체하시면 됩니다.)

✅ 💡 완성 코드: YouTube iframe + 다국어 자막
html
Copy
Edit
<div class="ff-image" style="flex:1; min-width:280px;">
  <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px;">
    <iframe
      src="https://www.youtube.com/embed/abcd1234?autoplay=1&mute=1&loop=1&playlist=abcd1234&cc_load_policy=1&hl=ko"
      title="KnowWhereAI 소개 영상"
      frameborder="0"
      allow="autoplay; encrypted-media"
      allowfullscreen
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px;">
    </iframe>
  </div>
</div>
✅ 자막 설정 조건
YouTube 영상에 자막을 넣는 방법:
YouTube Studio > 자막 탭 > 자막 추가

언어별로 .srt 또는 .vtt 업로드

한국어(ko), 영어(en) 등의 자막을 활성화

사용자 경험:
cc_load_policy=1 → 자막 자동 표시

hl=ko → 자막 기본 언어가 한국어로 설정됨

사용자가 플레이어에서 영어로 바꿀 수 있음

✅ 언어 코드 표
언어 코드 (hl= 및 srclang)
한국어 ko
영어 en
일본어 ja
중국어(간체) zh-Hans
스페인어 es

자막 자동 언어 설정을 바꾸려면 hl=en처럼 수정하면 됩니다.

✅ 유의사항
YouTube 영상이 공개 상태이고 자막이 포함되어 있어야 합니다.

자막은 YouTube에서 관리되므로 <track> 태그는 필요하지 않습니다.

SEO 및 트래픽 최적화에 유리한 구조입니다.

티스토리툴바