HTML 뷰어

HTML 코드를 포맷(Beautify)과 압축(Minify) 기능으로 실시간 미리보기합니다.

HTML 미리보기란 무엇인가요?

HTML 미리보기는 HTML, CSS, JavaScript 코드를 작성하고 즉시 결과를 볼 수 있는 실시간 렌더링 환경을 제공합니다. 웹 개발 학습, 디자인 프로토타이핑, 레이아웃 문제 디버깅, 코드 스니펫 공유에 매우 유용합니다. 수동 새로고침 없이 변경 사항이 실시간으로 반영됩니다.

작동 방식

코드는 메인 페이지와 격리된 iframe 샌드박스에서 렌더링됩니다. 이는 정확한 미리보기를 제공하면서 안전한 실행을 보장합니다. 입력하는 대로 미리보기가 업데이트되어 빠른 반복이 가능합니다. CSS 프레임워크 같은 외부 리소스는 CDN 링크로 포함할 수 있습니다.

주요 사용 사례
  • HTML/CSS 학습 및 연습
  • UI 컴포넌트 프로토타이핑
  • 반응형 디자인 테스트
  • CSS 레이아웃 문제 디버깅
  • 공유 가능한 코드 예제 만들기
기능
  • 입력하는 대로 실시간 미리보기
  • 완전한 HTML/CSS/JavaScript 지원
  • 보안을 위한 샌드박스 실행
  • 반응형 미리보기 기능
자주 묻는 질문

외부 CSS 프레임워크를 사용할 수 있나요?

네, Bootstrap, Tailwind 또는 다른 프레임워크의 CDN 링크를 포함할 수 있습니다. HTML의 head 섹션에 link 태그를 추가하세요.

내 코드가 저장되나요?

코드는 브라우저의 로컬 스토리지에 저장됩니다. 같은 기기에서 세션 간에 유지되지만 기기 간에 동기화되지는 않습니다.