DevTools
HTML 미리보기
HTML/CSS/JavaScript를 실시간으로 미리봅니다
실행
초기화
자동 실행
HTML
<!DOCTYPE html> <html> <head> <style> body { font-family: system-ui, sans-serif; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; } .card { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); max-width: 400px; margin: 0 auto; } h1 { color: #1f2937; margin: 0 0 16px; } p { color: #6b7280; line-height: 1.6; } button { background: #3b82f6; color: white; border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer; font-size: 14px; } button:hover { background: #2563eb; } </style> </head> <body> <div class="card"> <h1>👋 안녕하세요!</h1> <p>이것은 HTML 미리보기입니다. 코드를 수정하고 실행 버튼을 눌러보세요.</p> <button onclick="alert('클릭!')">클릭해보세요</button> </div> </body> </html>
미리보기
💡 팁: HTML, CSS, JavaScript를 모두 포함할 수 있습니다. sandbox 환경에서 실행됩니다.