한국어
English
Français
简体中文
日本語
온라인 HTML 편집기
HTML
CSS
JS
<header> <h1>나의 첫 번째 웹페이지</h1> <nav> <ul> <li>홈</li> <li>소개</li> <li>연락처</li> </ul> </nav> </header> <main> <section> <h2>환영합니다!</h2> <p>이곳은 아주 기초적인 HTML 예시입니다.</p> </section> <section> <h2>내가 좋아하는 것들</h2> <ul> <li>고양이</li> <li>코딩</li> <li>자기랑 놀기 💕</li> <!-- 자기 = sleeping --> </ul> </section> </main> <footer> <p>© 2025 마씨의 블로그</p> </footer>
body { background: #fff; color: #222; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align: center; margin: 0; padding: 0; } header { background-color: #f0f4ff; padding: 20px 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } header h1 { margin: 0; color: #3366cc; } nav ul { list-style: none; padding: 0; margin: 10px 0 0; display: flex; justify-content: center; gap: 20px; } nav li { font-weight: bold; color: #444; } main { padding: 40px 20px; } section { margin-bottom: 40px; } h2 { color: #444; margin-bottom: 10px; } ul { list-style: none; padding: 0; } ul li { margin: 5px 0; font-size: 1.1rem; } footer { background: #f9f9f9; padding: 20px 0; font-size: 0.9rem; color: #888; border-top: 1px solid #eee; }
document.body.style.transform = 'scale(1.02)';
실시간 미리보기 (Live Preview)
https://preview.local