HTML 파일 온라인 열기 - HTML 뷰어, 편집기 및 라이브 미리보기

HTML 파일을 온라인에서 무료로 열고 미리보세요. 실시간 라이브 미리보기로 HTML을 편집하고 코드를 정리하며 브라우저에서 안전하게 웹 페이지를 테스트할 수 있습니다.

HTML 뷰어

1456

에디터

코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .card {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
            text-align: center;
            max-width: 400px;
        }
        h1 { margin-top: 0; }
        button {
            background: white;
            color: #764ba2;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 2rem;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;
        }
        button:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>헬로 월드!</h1>
        <p>이것은 HTML 코드의 실시간 미리보기입니다.</p>
        <button onclick="alert('작동합니다!')">클릭하세요</button>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .card {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
            text-align: center;
            max-width: 400px;
        }
        h1 { margin-top: 0; }
        button {
            background: white;
            color: #764ba2;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 2rem;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;
        }
        button:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>헬로 월드!</h1>
        <p>이것은 HTML 코드의 실시간 미리보기입니다.</p>
        <button onclick="alert('작동합니다!')">클릭하세요</button>
    </div>
</body>
</html>

미리보기

실시간 미리보기

이것도 필요할 수 있어요

HTML을 JSON으로 변환

HTML 구조를 JSON 트리로 변환합니다.

도구 열기

HTML 축소/서식 도구

HTML 텍스트를 2/4 공백 들여쓰기로 축소하거나 서식을 지정합니다.

도구 열기

마크다운 뷰어

실시간 시각화로 마크다운을 미리 보고 편집합니다.

도구 열기

온라인 XML 뷰어

트리 보기와 검증 기능으로 XML 파일을 온라인에서 열고, 보고, 포맷하세요.

도구 열기

HTML 뷰어 사용 방법

에디터 창에 HTML 코드를 입력하거나 붙여넣으세요.

미리보기 창이 자동으로 업데이트되어 렌더링 결과를 보여줍니다.

도구 모음 버튼을 사용하여 복사, 지우기 또는 전체 화면으로 전환하세요.

주요 기능

실시간 미리보기

입력하는 즉시 HTML 코드의 렌더링 결과를 확인하세요.

개인정보 보호

코드는 브라우저를 벗어나지 않습니다. 모든 처리는 로컬에서 수행됩니다.

반응형 디자인

분할 화면 보기를 사용하거나 전체 화면으로 전환하여 편집 경험을 향상시키세요.

자주 묻는 질문

HTML 파일을 온라인으로 열고 미리보는 방법은?

HTML 코드를 붙여넣거나 파일을 불러오면 렌더링 미리보기가 즉시 업데이트됩니다. 빠른 HTML 확인과 디버깅에 유용합니다.

이 HTML 뷰어에서 외부 CSS와 JavaScript를 테스트할 수 있나요?

예. 브라우저 보안 정책이 허용하면 표준 외부 리소스를 미리보기에서 불러올 수 있습니다.