온라인 HTML 편집기 (실시간 미리보기) — Numio

HTML, CSS, JavaScript를 작성하면 바로 미리보기에 반영됩니다. 콘솔 메시지는 아래에 표시됩니다. 무료, 브라우저에서 바로 사용하세요.

브라우저에서 실행 · 가입 불필요

코드 (HTML)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Counter</title>
  <style>
    body { font-family: system-ui, sans-serif; display: grid; place-items: center; min-height: 90vh; margin: 0; background: #f5f7fb; }
    .card { padding: 24px 32px; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / 0.08); text-align: center; }
    button { font: inherit; padding: 10px 20px; border: 0; border-radius: 999px; background: #2563eb; color: #fff; cursor: pointer; }
    button:hover { background: #1d4ed8; }
  </style>
</head>
<body>
  <div class="card">
    <h1>Hello, HTML!</h1>
    <p>Clicked <strong id="count">0</strong> times</p>
    <button id="button" type="button">Click me</button>
  </div>
  <script>
    let count = 0;
    document.getElementById("button").addEventListener("click", () => {
      count += 1;
      document.getElementById("count").textContent = count;
      console.log("Button clicked", count);
    });
    console.log("Page ready");
  </script>
</body>
</html>

Ctrl/⌘ + Enter로 실행

미리보기

미리보기 자동 업데이트

콘솔

아직 출력이 없습니다. 실행을 누르면 여기에 결과가 표시됩니다.

코드는 브라우저에서 실행되며 업로드되지 않습니다.

사용 방법

HTML을 작성하고 CSS는 <style>, JavaScript는 <script>에 넣습니다.
입력하는 동안 미리보기가 자동으로 업데이트됩니다.
미리보기 아래에서 콘솔 메시지를 확인합니다.

예제

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: sans-serif; padding: 16px; }
  button { padding: 8px 16px; }
</style>
</head>
<body>
  <h1>안녕하세요!</h1>
  <button id="btn">클릭하세요</button>
  <p id="out"></p>
  <script>
    let n = 0;
    document.getElementById("btn").onclick = () => {
      n++;
      document.getElementById("out").textContent = "클릭 수: " + n;
      console.log("click", n);
    };
  </script>
</body>
</html>

세부 정보 및 제한 사항

미리보기는 샌드박스 프레임에서 실행되며, 그 안의 스크립트는 이 페이지나 쿠키에 접근할 수 없습니다.

직접 새로고침하고 싶다면 자동 업데이트를 끄고 실행을 누르세요.

FAQ

CSS와 JavaScript도 쓸 수 있나요?

네. 같은 문서 안에서 CSS는 <style> 태그에, JavaScript는 <script> 태그에 작성하세요.

console.log 출력은 어디에 나오나요?

미리보기에서 나온 콘솔 메시지가 그 아래에 표시됩니다.

코드가 업로드되나요?

아니요. 미리보기는 브라우저에서 만들어지며 서버로 아무것도 전송되지 않습니다.

형식 참고 자료

도구 페이지 업데이트: 2026-10-22