HTML 미리보기

브라우저 로컬 작업 공간에서 HTML, CSS, JavaScript를 미리본 뒤, 부모 ComUtil 페이지와 격리된 샌드박스 iframe에서 렌더링하세요.

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

HTML 미리보기는 순수 HTML, CSS, JavaScript를 함께 시험할 수 있는 브라우저 우선 작업 공간입니다. 무거운 로컬 프로젝트를 만들지 않고도 UI 아이디어를 프로토타입하고, 레이아웃 동작을 확인하고, 마크업 문제를 빠르게 점검할 때 유용합니다.

작동 방식

에디터는 초안을 브라우저에 로컬로 저장한 뒤, 격리된 origin을 가진 샌드박스 iframe에 써서 미리보기를 새로 고칩니다. 스크립트는 미리보기 안에서 실행될 수 있지만, 샌드박스가 부모 ComUtil 페이지와 분리해 주며 전용 탭 경로도 같은 경계를 유지합니다.

주요 사용 사례
  • HTML/CSS 학습 및 연습
  • UI 컴포넌트 프로토타이핑
  • 반응형 디자인 테스트
  • CSS 레이아웃 문제 디버깅
  • 공유 전에 격리된 HTML 스니펫 확인
기능
  • 입력하면서 샌드박스 미리보기
  • 완전한 HTML/CSS/JavaScript 지원
  • 브라우저 로컬 초안 저장
  • 더 큰 미리보기를 위한 전용 샌드박스 탭
자주 묻는 질문

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

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

내 코드가 저장되나요?

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