Bug Loop | 온라인 HTML 에디터 겸 개발 블로그

<header>
  <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>
    </ul>
  </section>
</main>

<footer>
  <p>&copy; 2025 한동선의 블로그</p>
</footer>
</header>

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;
}
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: .9rem;
  color: #888; border-top: 1px solid #eee;
}

document.body.style.transform = 'scale(1.02)';

한동선

두동선

세동선

ETC / COREWEBVITALS

온라인 HTML 편집기

ETC / COREWEBVITALS

온라인 HTML 편집기

Assets