https://bbuut.tistory.com/ bbuut 님의 블로그 입니다. ko Thu, 20 Aug 2026 09:25:59 +0900 TISTORY 100 쁏 https://bbuut.tistory.com/1 <p data-ke-size="size16">&nbsp;</p> <!-- 모던 보드게임 말판 (Generated Code) --> <div style="width: 100%; overflow-x: auto; margin: 20px 0; -webkit-overflow-scrolling: touch;"> <div id="t-bm-board-two13o2bi" style="position: relative; width: 800px; height: 800px; background-color: transparent; margin: 0 auto; box-sizing: border-box; font-family: sans-serif; overflow: hidden; min-width: 800px;"> <style> #t-bm-board-two13o2bi .t-bm-space { position: absolute; transform: translate(-50%, -50%); box-sizing: border-box; cursor: help; z-index: 10; } #t-bm-board-two13o2bi .t-bm-tooltip { visibility: hidden; opacity: 0; position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background-color: rgba(30, 41, 59, 0.9); color: #ffffff; padding: 10px 14px; border-radius: 6px; font-size: 14px; line-height: 1.4; white-space: pre-wrap; z-index: 100; transition: opacity 0.2s; width: max-content; max-width: 250px; pointer-events: none; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } #t-bm-board-two13o2bi .t-bm-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: rgba(30, 41, 59, 0.9) transparent transparent transparent; } #t-bm-board-two13o2bi .t-bm-space:hover { z-index: 20; } #t-bm-board-two13o2bi .t-bm-space:hover .t-bm-tooltip { visibility: visible; opacity: 1; } </style> <div class="t-bm-space" style="left: 150px; top: 150px; width: 100px; height: 100px; background-color: #f5c7ce; border: 5px solid #ffffff; border-radius: 20%; box-shadow: 0 5px 15px rgba(0,0,0,0.15);"> <div style="position: absolute; transform: translate(-50%, 0); text-align: center; left: 50%; top: 15%; font-weight: bold; font-family: sans-serif; font-size: 15px; color: #ffffff; opacity: 0.7; white-space: nowrap;">1</div> <div style="position: absolute; transform: translate(-50%, -100%); text-align: center; left: 50%; top: 85%; font-family: sans-serif; font-size: 15.5px; line-height: 1.2; color: #554548; opacity: 0.8; white-space: pre-wrap; width: max-content;">월급날</div> <div class="t-bm-tooltip">재산 +100</div> </div> <div class="t-bm-space" style="left: 250px; top: 150px; width: 100px; height: 100px; background-color: #fcbfe9; border: 5px solid #ffffff; border-radius: 20%; box-shadow: 0 5px 15px rgba(0,0,0,0.15);"> <div style="position: absolute; transform: translate(-50%, 0); text-align: center; left: 50%; top: 15%; font-weight: bold; font-family: sans-serif; font-size: 15px; color: #ffffff; opacity: 0.7; white-space: nowrap;">2</div> <div style="position: absolute; transform: translate(-50%, -100%); text-align: center; left: 50%; top: 85%; font-family: sans-serif; font-size: 15.5px; line-height: 1.2; color: #584251; opacity: 0.8; white-space: pre-wrap; width: max-content;">서울</div> <div class="t-bm-tooltip">가격 200</div> </div> <div class="t-bm-space" style="left: 350px; top: 150px; width: 100px; height: 100px; background-color: #fcb6f8; border: 5px solid #ffffff; border-radius: 20%; box-shadow: 0 5px 15px rgba(0,0,0,0.15);"> <div style="position: absolute; transform: translate(-50%, 0); text-align: center; left: 50%; top: 15%; font-weight: bold; font-family: sans-serif; font-size: 15px; color: #ffffff; opacity: 0.7; white-space: nowrap;">3</div> <div style="position: absolute; transform: translate(-50%, -100%); text-align: center; left: 50%; top: 85%; font-family: sans-serif; font-size: 15.5px; line-height: 1.2; color: #583f56; opacity: 0.8; white-space: pre-wrap; width: max-content;">부산</div> <div class="t-bm-tooltip">가격 200</div> </div> <div class="t-bm-space" style="left: 450px; top: 150px; width: 100px; height: 100px; background-color: #caf7cd; border: 5px solid #ffffff; border-radius: 20%; box-shadow: 0 5px 15px rgba(0,0,0,0.15);"> <div style="position: absolute; transform: translate(-50%, 0); text-align: center; left: 50%; top: 15%; font-weight: bold; font-family: sans-serif; font-size: 15px; color: #ffffff; opacity: 0.7; white-space: nowrap;">4</div> <div style="position: absolute; transform: translate(-50%, -100%); text-align: center; left: 50%; top: 85%; font-family: sans-serif; font-size: 15.5px; line-height: 1.2; color: #465647; opacity: 0.8; white-space: pre-wrap; width: max-content;">대구</div> <div class="t-bm-tooltip">가격 200</div> </div> <div class="t-bm-space" style="left: 550px; top: 150px; width: 100px; height: 100px; background-color: #c7fae1; border: 5px solid #ffffff; border-radius: 20%; box-shadow: 0 5px 15px rgba(0,0,0,0.15);"> <div style="position: absolute; transform: translate(-50%, 0); text-align: center; left: 50%; top: 15%; font-weight: bold; font-family: sans-serif; font-size: 15px; color: #ffffff; opacity: 0.7; white-space: nowrap;">5</div> <div style="position: absolute; transform: translate(-50%, -100%); text-align: center; left: 50%; top: 85%; font-family: sans-serif; font-size: 15.5px; line-height: 1.2; color: #45574e; opacity: 0.8; white-space: pre-wrap; width: max-content;">인천</div> <div class="t-bm-tooltip">가격 200</div> </div> <div class="t-bm-space" style="left: 650px; top: 150px; width: 100px; height: 100px; background-color: #bef9e5; border: 5px solid #ffffff; border-radius: 20%; box-shadow: 0 5px 15px rgba(0,0,0,0.15);"> <div style="position: absolute; transform: translate(-50%, 0); text-align: center; left: 50%; top: 15%; font-weight: bold; font-family: sans-serif; font-size: 15px; color: #ffffff; opacity: 0.7; white-space: nowrap;">6</div> <div style="position: absolute; transform: translate(-50%, -100%); text-align: center; left: 50%; top: 85%; font-family: sans-serif; font-size: 15.5px; line-height: 1.2; color: #425750; opacity: 0.8; white-space: pre-wrap; width: max-content;">광주</div> <div class="t-bm-tooltip">가격 200</div> </div> <div class="t-bm-space" style="left: 650px; top: 250px; width: 100px; height: 100px; background-color: #b695f4; border: 5px solid #ffffff; border-radius: 20%; box-shadow: 0 5px 15px rgba(0,0,0,0.15);"> <div style="position: absolute; transform: translate(-50%, 0); text-align: center; left: 50%; top: 15%; font-weight: bold; font-family: sans-serif; font-size: 15px; color: #ffffff; opacity: 0.7; white-space: nowrap;">7</div> <div style="position: absolute; transform: translate(-50%, -100%); text-align: center; left: 50%; top: 85%; font-family: sans-serif; font-size: 15.5px; line-height: 1.2; color: #3f3455; opacity: 0.8; white-space: pre-wrap; width: max-content;">대전</div> <div class="t-bm-tooltip">가격 200</div> </div> <div class="t-bm-space" style="left: 650px; top: 350px; width: 100px; height: 100px; background-color: #aeccfa; border: 5px solid #ffffff; border-radius: 20%; box-shadow: 0 5px 15px rgba(0,0,0,0.15);"> <div style="position: absolute; transform: translate(-50%, 0); text-align: center; left: 50%; top: 15%; font-weight: bold; font-family: sans-serif; font-size: 15px; color: #ffffff; opacity: 0.7; white-space: nowrap;">8</div> <div style="position: absolute; transform: translate(-50%, -100%); text-align: center; left: 50%; top: 85%; font-family: sans-serif; font-size: 15.5px; line-height: 1.2; color: #3c4757; opacity: 0.8; white-space: pre-wrap; width: max-content;">울산</div> <div class="t-bm-tooltip">가격 200</div> </div> <div class="t-bm-space" style="left: 650px; top: 450px; width: 100px; height: 100px; background-color: #9ce5f2; border: 5px solid #ffffff; border-radius: 20%; box-shadow: 0 5px 15px rgba(0,0,0,0.15);"> <div style="position: absolute; transform: translate(-50%, 0); text-align: center; left: 50%; top: 15%; font-weight: bold; font-family: sans-serif; font-size: 15px; color: #ffffff; opacity: 0.7; white-space: nowrap;">9</div> <div style="position: absolute; transform: translate(-50%, -100%); text-align: center; left: 50%; top: 85%; font-family: sans-serif; font-size: 15.5px; line-height: 1.2; color: #365054; opacity: 0.8; white-space: pre-wrap; width: max-content;">세종</div> <div class="t-bm-tooltip">가격 200</div> </div> <div class="t-bm-space" style="left: 650px; top: 550px; width: 100px; height: 100px; background-color: #cfcef8; border: 5px solid #ffffff; border-radius: 20%; box-shadow: 0 5px 15px rgba(0,0,0,0.15);"> <div style="position: absolute; transform: translate(-50%, 0); text-align: center; left: 50%; top: 15%; font-weight: bold; font-family: sans-serif; font-size: 15px; color: #ffffff; opacity: 0.7; white-space: nowrap;">10</div> <div style="position: absolute; transform: translate(-50%, -100%); text-align: center; left: 50%; top: 85%; font-family: sans-serif; font-size: 15.5px; line-height: 1.2; color: #484856; opacity: 0.8; white-space: pre-wrap; width: max-content;">무인도</div> <div class="t-bm-tooltip">한 턴 쉬기</div> </div> <div class="t-bm-space" style="left: 650px; top: 650px; width: 100px; height: 100px; background-color: #f3c3b4; border: 5px solid #ffffff; border-radius: 20%; box-shadow: 0 5px 15px rgba(0,0,0,0.15);"> <div style="position: absolute; transform: translate(-50%, 0); text-align: center; left: 50%; top: 15%; font-weight: bold; font-family: sans-serif; font-size: 15px; color: #ffffff; opacity: 0.7; white-space: nowrap;">11</div> <div style="position: absolute; transform: translate(-50%, -100%); text-align: center; left: 50%; top: 85%; font-family: sans-serif; font-size: 15.5px; line-height: 1.2; color: #55443e; opacity: 0.8; white-space: pre-wrap; width: max-content;">경기</div> <div class="t-bm-tooltip">가격 200</div> </div> <div class="t-bm-space" style="left: 550px; top: 650px; width: 100px; height: 100px; background-color: #98a1f0; border: 5px solid #ffffff; border-radius: 20%; box-shadow: 0 5px 15px rgba(0,0,0,0.15);"> <div style="position: absolute; transform: translate(-50%, 0); text-align: center; left: 50%; top: 15%; font-weight: bold; font-family: sans-serif; font-size: 15px; color: #ffffff; opacity: 0.7; white-space: nowrap;">12</div> <div style="position: absolute; transform: translate(-50%, -100%); text-align: center; left: 50%; top: 85%; font-family: sans-serif; font-size: 15.5px; line-height: 1.2; color: #353854; opacity: 0.8; white-space: pre-wrap; width: max-content;">강원</div> <div class="t-bm-tooltip">가격 200</div> </div> <div class="t-bm-space" style="left: 450px; top: 650px; width: 100px; height: 100px; background-color: #f7baa6; border: 5px solid #ffffff; border-radius: 20%; box-shadow: 0 5px 15px rgba(0,0,0,0.15);"> <div style="position: absolute; transform: translate(-50%, 0); text-align: center; left: 50%; top: 15%; font-weight: bold; font-family: sans-serif; font-size: 15px; color: #ffffff; opacity: 0.7; white-space: nowrap;">13</div> <div style="position: absolute; transform: translate(-50%, -100%); text-align: center; left: 50%; top: 85%; font-family: sans-serif; font-size: 15.5px; line-height: 1.2; color: #56413a; opacity: 0.8; white-space: pre-wrap; width: max-content;">충북</div> <div class="t-bm-tooltip">가격 200</div> </div> <div class="t-bm-space" style="left: 350px; top: 650px; width: 100px; height: 100px; background-color: #f9e5c8; border: 5px solid #ffffff; border-radius: 20%; box-shadow: 0 5px 15px rgba(0,0,0,0.15);"> <div style="position: absolute; transform: translate(-50%, 0); text-align: center; left: 50%; top: 15%; font-weight: bold; font-family: sans-serif; font-size: 15px; color: #ffffff; opacity: 0.7; white-space: nowrap;">14</div> <div style="position: absolute; transform: translate(-50%, -100%); text-align: center; left: 50%; top: 85%; font-family: sans-serif; font-size: 15.5px; line-height: 1.2; color: #575046; opacity: 0.8; white-space: pre-wrap; width: max-content;">충남</div> <div class="t-bm-tooltip">가격 200</div> </div> <div class="t-bm-space" style="left: 250px; top: 650px; width: 100px; height: 100px; background-color: #fdc4e4; border: 5px solid #ffffff; border-radius: 20%; box-shadow: 0 5px 15px rgba(0,0,0,0.15);"> <div style="position: absolute; transform: translate(-50%, 0); text-align: center; left: 50%; top: 15%; font-weight: bold; font-family: sans-serif; font-size: 15px; color: #ffffff; opacity: 0.7; white-space: nowrap;">15</div> <div style="position: absolute; transform: translate(-50%, -100%); text-align: center; left: 50%; top: 85%; font-family: sans-serif; font-size: 15.5px; line-height: 1.2; color: #58444f; opacity: 0.8; white-space: pre-wrap; width: max-content;">전북</div> <div class="t-bm-tooltip">가격 200</div> </div> <div class="t-bm-space" style="left: 150px; top: 650px; width: 100px; height: 100px; background-color: #c8f291; border: 5px solid #ffffff; border-radius: 20%; box-shadow: 0 5px 15px rgba(0,0,0,0.15);"> <div style="position: absolute; transform: translate(-50%, 0); text-align: center; left: 50%; top: 15%; font-weight: bold; font-family: sans-serif; font-size: 15px; color: #ffffff; opacity: 0.7; white-space: nowrap;">16</div> <div style="position: absolute; transform: translate(-50%, -100%); text-align: center; left: 50%; top: 85%; font-family: sans-serif; font-size: 15.5px; line-height: 1.2; color: #465432; opacity: 0.8; white-space: pre-wrap; width: max-content;">전남</div> <div class="t-bm-tooltip">가격 200</div> </div> <div class="t-bm-space" style="left: 150px; top: 550px; width: 100px; height: 100px; background-color: #fdf3aa; border: 5px solid #ffffff; border-radius: 20%; box-shadow: 0 5px 15px rgba(0,0,0,0.15);"> <div style="position: absolute; transform: translate(-50%, 0); text-align: center; left: 50%; top: 15%; font-weight: bold; font-family: sans-serif; font-size: 15px; color: #ffffff; opacity: 0.7; white-space: nowrap;">17</div> <div style="position: absolute; transform: translate(-50%, -100%); text-align: center; left: 50%; top: 85%; font-family: sans-serif; font-size: 15.5px; line-height: 1.2; color: #58553b; opacity: 0.8; white-space: pre-wrap; width: max-content;">경북</div> <div class="t-bm-tooltip">가격 200</div> </div> <div class="t-bm-space" style="left: 150px; top: 450px; width: 100px; height: 100px; background-color: #bce5f6; border: 5px solid #ffffff; border-radius: 20%; box-shadow: 0 5px 15px rgba(0,0,0,0.15);"> <div style="position: absolute; transform: translate(-50%, 0); text-align: center; left: 50%; top: 15%; font-weight: bold; font-family: sans-serif; font-size: 15px; color: #ffffff; opacity: 0.7; white-space: nowrap;">18</div> <div style="position: absolute; transform: translate(-50%, -100%); text-align: center; left: 50%; top: 85%; font-family: sans-serif; font-size: 15.5px; line-height: 1.2; color: #415056; opacity: 0.8; white-space: pre-wrap; width: max-content;">경남</div> <div class="t-bm-tooltip">가격 200</div> </div> <div class="t-bm-space" style="left: 150px; top: 350px; width: 100px; height: 100px; background-color: #c4fde7; border: 5px solid #ffffff; border-radius: 20%; box-shadow: 0 5px 15px rgba(0,0,0,0.15);"> <div style="position: absolute; transform: translate(-50%, 0); text-align: center; left: 50%; top: 15%; font-weight: bold; font-family: sans-serif; font-size: 15px; color: #ffffff; opacity: 0.7; white-space: nowrap;">19</div> <div style="position: absolute; transform: translate(-50%, -100%); text-align: center; left: 50%; top: 85%; font-family: sans-serif; font-size: 15.5px; line-height: 1.2; color: #445850; opacity: 0.8; white-space: pre-wrap; width: max-content;">제주</div> <div class="t-bm-tooltip">가격 200</div> </div> <div class="t-bm-space" style="left: 150px; top: 250px; width: 100px; height: 100px; background-color: #f6d3bc; border: 5px solid #ffffff; border-radius: 20%; box-shadow: 0 5px 15px rgba(0,0,0,0.15);"> <div style="position: absolute; transform: translate(-50%, 0); text-align: center; left: 50%; top: 15%; font-weight: bold; font-family: sans-serif; font-size: 15px; color: #ffffff; opacity: 0.7; white-space: nowrap;">20</div> <div style="position: absolute; transform: translate(-50%, -100%); text-align: center; left: 50%; top: 85%; font-family: sans-serif; font-size: 15.5px; line-height: 1.2; color: #564941; opacity: 0.8; white-space: pre-wrap; width: max-content;">우주여행</div> <div class="t-bm-tooltip">원하는 칸으로 이동</div> </div> <div class="t-bm-piece" style="left: 174px; top: 150px; width: 40px; height: 40px; background-color: #ef4444; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.4); position: absolute; transform: translate(-50%, -50%); cursor: grab; z-index: 50; touch-action: none;"><span style="position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); color: #fff; font-size: 11px; font-weight: bold; padding: 2px 6px; border-radius: 4px; white-space: nowrap; pointer-events: none; user-select: none; box-shadow: 0 1px 3px rgba(0,0,0,0.3);">1P</span></div> <div class="t-bm-piece" style="left: 150px; top: 174px; width: 40px; height: 40px; background-color: #3b82f6; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.4); position: absolute; transform: translate(-50%, -50%); cursor: grab; z-index: 50; touch-action: none;"><span style="position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); color: #fff; font-size: 11px; font-weight: bold; padding: 2px 6px; border-radius: 4px; white-space: nowrap; pointer-events: none; user-select: none; box-shadow: 0 1px 3px rgba(0,0,0,0.3);">2P</span></div> <div class="t-bm-piece" style="left: 126px; top: 150px; width: 40px; height: 40px; background-color: #10b981; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.4); position: absolute; transform: translate(-50%, -50%); cursor: grab; z-index: 50; touch-action: none;"><span style="position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); color: #fff; font-size: 11px; font-weight: bold; padding: 2px 6px; border-radius: 4px; white-space: nowrap; pointer-events: none; user-select: none; box-shadow: 0 1px 3px rgba(0,0,0,0.3);">3P</span></div> <div class="t-bm-piece" style="left: 150px; top: 126px; width: 40px; height: 40px; background-color: #eab308; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.4); position: absolute; transform: translate(-50%, -50%); cursor: grab; z-index: 50; touch-action: none;"><span style="position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); color: #fff; font-size: 11px; font-weight: bold; padding: 2px 6px; border-radius: 4px; white-space: nowrap; pointer-events: none; user-select: none; box-shadow: 0 1px 3px rgba(0,0,0,0.3);">4P</span></div> </div> </div> <script> (function(){ var board = document.getElementById('t-bm-board-two13o2bi'); if(!board) return; var pieces = board.querySelectorAll('.t-bm-piece'); var zIdx = 100; pieces.forEach(function(piece) { var initX, initY, startX, startY; function move(e) { var evt = e.type.indexOf('touch') >= 0 ? e.touches[0] : e; piece.style.left = (initX + evt.clientX - startX) + 'px'; piece.style.top = (initY + evt.clientY - startY) + 'px'; if(e.cancelable) e.preventDefault(); } function up() { piece.style.cursor = 'grab'; document.removeEventListener('mousemove', move); document.removeEventListener('touchmove', move); document.removeEventListener('mouseup', up); document.removeEventListener('touchend', up); } function down(e) { piece.style.cursor = 'grabbing'; piece.style.zIndex = ++zIdx; var evt = e.type.indexOf('touch') >= 0 ? e.touches[0] : e; startX = evt.clientX; startY = evt.clientY; initX = parseFloat(piece.style.left); initY = parseFloat(piece.style.top); document.addEventListener('mousemove', move, {passive: false}); document.addEventListener('touchmove', move, {passive: false}); document.addEventListener('mouseup', up); document.addEventListener('touchend', up); if(e.cancelable) e.preventDefault(); } piece.addEventListener('mousedown', down); piece.addEventListener('touchstart', down, {passive: false}); }); })(); </script> <!-- // 모던 보드게임 말판 --> <p data-ke-size="size16">&nbsp;</p> 쁏 https://bbuut.tistory.com/1 https://bbuut.tistory.com/1#entry1comment Fri, 27 Mar 2026 21:44:34 +0900