🎨 CodePlay
새 프로젝트
공유
실행
HTML
CSS
JavaScript
<!DOCTYPE html> <html> <head> <title>My Project</title> </head> <body> <h1>안녕하세요! 👋</h1> <p>CodePlay에 오신 것을 환영합니다!</p> <button onclick="changeColor()">색상 변경</button> </body> </html>
body { font-family: Arial, sans-serif; background: linear-gradient(45deg, #667eea, #764ba2); color: white; padding: 50px; text-align: center; min-height: 100vh; margin: 0; } h1 { font-size: 3em; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } button { background: #ff6b6b; color: white; border: none; padding: 12px 24px; font-size: 16px; border-radius: 25px; cursor: pointer; transition: transform 0.3s ease; } button:hover { transform: scale(1.05); }
function changeColor() { const colors = [ 'linear-gradient(45deg, #667eea, #764ba2)', 'linear-gradient(45deg, #f093fb, #f5576c)', 'linear-gradient(45deg, #4facfe, #00f2fe)', 'linear-gradient(45deg, #43e97b, #38f9d7)', 'linear-gradient(45deg, #fa709a, #fee140)' ]; const randomColor = colors[Math.floor(Math.random() * colors.length)]; document.body.style.background = randomColor; // 애니메이션 효과 document.body.style.transition = 'background 0.5s ease'; } // 페이지 로드 시 환영 메시지 document.addEventListener('DOMContentLoaded', function() { console.log('CodePlay에서 코딩을 시작해보세요! 🚀'); });
📱 미리보기
▶
💾
🎉 프로젝트 공유
HTML 파일이 다운로드되었습니다.
📧
이메일
💬
카카오톡
📸
인스타그램
🐦
트위터
닫기
💾 프로젝트 저장됨
코드가 성공적으로 저장되었습니다!
확인
라인: 1
CodePlay v1.0 | 실시간 코드 에디터
마지막 저장: 방금 전