HTML 미리보기

HTML, CSS, JavaScript를 실시간으로 렌더링하여 결과를 확인합니다.

HTML 코드

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      padding: 20px;
      max-width: 800px;
      margin: 0 auto;
    }
    h1 {
      color: #333;
      border-bottom: 2px solid #3b82f6;
      padding-bottom: 10px;
    }
    .card {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 20px;
      border-radius: 12px;
      margin: 20px 0;
      box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    button {
      background: #3b82f6;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      cursor: pointer;
      transition: transform 0.2s;
    }
    button:hover {
      transform: scale(1.05);
    }
  </style>
</head>
<body>
  <h1>HTML 미리보기</h1>
  <p>HTML, CSS, JavaScript를 작성하고 실시간으로 결과를 확인하세요!</p>

<div class="card">
    <h2>스타일 카드</h2>
    <p>CSS 그라디언트와 그림자 효과가 적용된 카드입니다.</p>
  </div>

미리보기

🌐 HTML 미리보기란?

HTML 미리보기는 HTML, CSS, JavaScript 코드를 작성하면 실시간으로 렌더링 결과를 보여주는 도구입니다. 별도의 파일 저장이나 브라우저 새로고침 없이 코드 변경 사항을 즉시 확인할 수 있어 웹 프로토타이핑, 교육 목적, 코드 스니펫 테스트에 매우 유용합니다. 모바일(375px), 태블릿(768px), 데스크탑(1024px) 크기로 반응형 디자인도 미리 테스트할 수 있습니다.

📋 지원 기능

실시간 렌더링

코드 입력 즉시 미리보기 업데이트

반응형 테스트

모바일/태블릿/데스크탑 사이즈 전환

분할 뷰

코드와 미리보기 동시 확인

JS 실행 지원

JavaScript 코드도 실행 가능

💡 활용 팁

HTML, CSS, JS를 하나의 파일에 작성하여 빠르게 아이디어 테스트
반응형 미디어 쿼리 적용 전 다양한 화면 크기에서 레이아웃 확인
블로그나 문서에 삽입할 코드 스니펫 미리 확인
CSS 애니메이션, 트랜지션 효과 실시간 디버깅
외부 CDN 라이브러리도 <script> 태그로 불러와서 테스트 가능

자주 묻는 질문

작성한 코드가 저장되나요?▼

코드는 브라우저 메모리에만 유지되며 별도로 저장되지 않습니다. 중요한 코드는 직접 복사하여 보관하세요.

JavaScript 에러가 발생하면 어떻게 확인하나요?▼

브라우저 개발자 도구(F12)의 Console 탭에서 에러 메시지를 확인할 수 있습니다. alert()로 간단한 디버깅도 가능합니다.

외부 이미지나 폰트를 사용할 수 있나요?▼

네, URL로 참조 가능한 외부 리소스는 모두 사용할 수 있습니다. 다만 CORS 정책에 따라 일부 리소스는 제한될 수 있습니다.

HTML 미리보기

🌐 HTML 미리보기란?

📋 지원 기능

💡 활용 팁

자주 묻는 질문

관련 도구

마크다운 미리보기

HTML 엔티티 변환

CSS/JS 압축/해제