간편한 웹 디자인 구현과 실시간 레이아웃 점검 도구 2026-03-29 by NEWS Source Code (HTML/CSS/JS) html<html><head> </p> <style> body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 80vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; margin: 0; } .card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 2rem; border-radius: 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); text-align: center; border: 1px solid rgba(255,255,255,0.2); } h1 { margin-bottom: 0.5rem; } button { background: white; color: #764ba2; border: none; padding: 10px 20px; border-radius: 50px; font-weight: bold; cursor: pointer; transition: transform 0.2s; } button:active { transform: scale(0.95); } </style> <p></head><body> </p> <div class="card"> <p>실시간으로 코드를 수정해보세요.</p> <p> <button onclick="showMessage()">클릭하세요</button> </div> <p> <script> function showMessage() { const card = document.querySelector('.card'); card.style.backgroundColor = 'rgba(255, 255, 255, 0.2)'; alert('성공적으로 실행되었습니다!'); } </script></body></html> Live PreviewUpdated
