https://oneclicksite.tistory.com/ oneclicksite 님의 블로그 입니다. ko Sun, 31 May 2026 04:14:23 +0900 TISTORY 100 oneclicksite https://oneclicksite.tistory.com/1 <div id="tarot-app-unique-container"> <style> /* 티스토리 내부 다른 요소와 충돌하지 않도록 고유 ID 기반 스타일 적용 */ #tarot-app-unique-container { all: initial; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Pretendard', sans-serif; margin: 40px auto; max-width: 450px; width: 90%; background: #ffffff; padding: 35px 20px; border-radius: 25px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); box-sizing: border-box; } #tarot-app-unique-container * { box-sizing: border-box; margin: 0; padding: 0; } #tarot-app-unique-container h2 { font-size: 22px; color: #4a148c; margin-bottom: 10px; font-weight: 800; display: block; text-align: center; } #tarot-app-unique-container .subtitle { font-size: 14px; color: #777; margin-bottom: 35px; display: block; text-align: center; } #tarot-app-unique-container .card-wrapper { perspective: 1000px; width: 170px; height: 270px; margin-bottom: 30px; cursor: pointer; display: block; } #tarot-app-unique-container .card { position: relative; width: 100%; height: 100%; transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-style: preserve-3d; } #tarot-app-unique-container .card.is-flipped { transform: rotateY(180deg); } #tarot-app-unique-container .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 18px; border: 4px solid #fbc02d; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } #tarot-app-unique-container .card-back { background: linear-gradient(145deg, #6a1b9a, #4a148c); color: #fff; } #tarot-app-unique-container .card-front { background: #fff; color: #333; transform: rotateY(180deg); padding: 20px; } #tarot-app-unique-container .emoji { font-size: 65px; margin-bottom: 12px; } #tarot-app-unique-container .card-name { font-weight: bold; color: #4a148c; font-size: 18px; } #tarot-app-unique-container .result-area { display: none; width: 100%; max-width: 350px; animation: tarotFadeIn 0.6s ease; } @keyframes tarotFadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } #tarot-app-unique-container .meaning-box { background: #f3e5f5; padding: 18px; border-radius: 15px; font-size: 14px; line-height: 1.7; margin-bottom: 25px; color: #333; text-align: center; } #tarot-app-unique-container .refresh-btn { background: #4a148c; color: white; border: none; padding: 12px 30px; border-radius: 25px; cursor: pointer; font-size: 14px; font-weight: bold; display: block; margin: 0 auto; transition: background 0.3s; } #tarot-app-unique-container .refresh-btn:hover { background: #7b1fa2; } </style> <h2> 오늘의 타로 뽑기</h2> <span class="subtitle">마음을 가다듬고 카드 한 장을 선택하세요.</span> <div class="card-wrapper" onclick="startTarotReading()"> <div id="tarot-card-obj" class="card"> <div class="card-face card-back"> <svg width="45" height="45" viewBox="0 0 24 24" fill="#fbc02d"> <path d="M12,2L14.5,9.5L22,12L14.5,14.5L12,22L9.5,14.5L2,12L9.5,9.5L12,2Z" /> </svg> <p style="margin-top:15px; font-size:12px; opacity: 0.9;">카드를 클릭하세요</p> </div> <div class="card-face card-front"> <div id="tarot-res-emoji" class="emoji"></div> <div id="tarot-res-name" class="card-name"></div> </div> </div> </div> <div id="tarot-result-area" class="result-area"> <div id="tarot-res-meaning" class="meaning-box"></div> <button class="refresh-btn" onclick="resetTarotReading()">다른 카드 뽑기</button> </div> <script> (function() { const tarotCards = [ { n: "0. 바보 (The Fool)", e: " ", m: "새로운 시작과 모험의 기운이 가득합니다. 오늘은 고민하기보다 마음이 이끄는 대로 발걸음을 옮겨보세요. 순수한 마음이 행운을 불러옵니다." }, { n: "1. 마법사 (The Magician)", e: " ", m: "당신의 창의성과 능력이 빛을 발하는 날입니다. 준비해온 일이 있다면 오늘 실행해보세요. 당신에게는 세상을 바꿀 도구가 이미 손에 쥐어져 있습니다." }, { n: "2. 고위 여사제 (The High Priestess)", e: " ", m: "내면의 목소리에 집중해야 할 때입니다. 겉으로 드러난 현상보다 직관을 믿으세요. 조용히 명상하며 생각에 잠기는 시간이 큰 도움이 될 것입니다." }, { n: "3. 여황제 (The Empress)", e: " ", m: "풍요로움과 편안함이 가득한 하루입니다. 주변 사람들에게 따뜻한 배려를 베풀어 보세요. 예술적인 영감이 떠오르거나 물질적인 보상이 따를 수 있습니다." }, { n: "4. 황제 (The Emperor)", e: " ", m: "강한 리더십과 실천력이 필요한 날입니다. 계획한 목표를 흔들림 없이 밀고 나가세요. 질서와 규칙을 지킬 때 더 큰 신뢰를 얻을 수 있습니다." }, { n: "6. 연인 (The Lovers)", e: " ", m: "조화와 소통이 중요한 날입니다. 사랑하는 사람과의 관계가 깊어지거나, 중요한 선택에서 마음의 평화를 찾게 될 것입니다. 진심을 다해 대화하세요." }, { n: "10. 운명의 수레바퀴", e: " ", m: "변화의 바람이 불어오고 있습니다. 예상치 못한 행운이나 기회가 찾아올 수 있으니 열린 마음으로 받아들이세요. 지금의 흐름은 당신에게 유리합니다." }, { n: "17. 별 (The Star)", e: "⭐", m: "희망의 빛이 당신을 비추고 있습니다. 힘든 시기가 지나가고 치유와 회복의 시간이 찾아옵니다. 당신의 꿈을 포기하지 말고 계속해서 나아가세요." }, { n: "19. 태양 (The Sun)", e: "☀️", m: "에너지가 넘치고 모든 일이 명확해지는 날입니다. 자신감을 가지고 활기차게 행동하세요. 당신의 밝은 에너지가 주변 사람들까지 행복하게 만들 것입니다." }, { n: "21. 세계 (The World)", e: " ", m: "하나의 주기가 완성되는 완벽한 날입니다. 그동안의 노력이 결실을 맺고 성취감을 맛보게 될 것입니다. 만족스러운 마무리가 새로운 시작을 예고합니다." } ]; let isProcessing = false; window.startTarotReading = function() { if (isProcessing) return; isProcessing = true; const selected = tarotCards[Math.floor(Math.random() * tarotCards.length)]; document.getElementById('tarot-res-emoji').textContent = selected.e; document.getElementById('tarot-res-name').textContent = selected.n; document.getElementById('tarot-res-meaning').textContent = selected.m; document.getElementById('tarot-card-obj').classList.add('is-flipped'); setTimeout(() => { document.getElementById('tarot-result-area').style.display = 'block'; }, 600); }; window.resetTarotReading = function() { document.getElementById('tarot-card-obj').classList.remove('is-flipped'); document.getElementById('tarot-result-area').style.display = 'none'; setTimeout(() => { isProcessing = false; }, 800); }; })(); </script> </div> oneclicksite https://oneclicksite.tistory.com/1 https://oneclicksite.tistory.com/1#entry1comment Tue, 14 Apr 2026 15:42:08 +0900