HTML 문서에 집중한 워크스페이스
전체 HTML 문서를 붙여 넣거나 작성하고 CodeMirror로 편집하면서 옆에서 렌더링 결과가 즉시 갱신되는 것을 확인합니다.
HTML Studio
사용 가능전체 HTML 문서를 격리된 브라우저 샌드박스에서 편집하고 실시간으로 미리봅니다.
Devary는 HTML을 업로드하거나 영구 저장하지 않습니다.
HTML 문서
실시간 미리보기
동기화됨콘솔
0콘솔 캡처는 Interactive 모드에서 사용할 수 있습니다. Safe 모드에서는 스크립트가 계속 비활성화됩니다.
HTML Intelligence
한 번의 로컬 분석으로 DOM 트리, 진단, SEO/메타데이터, 리소스 및 정적 접근성 검토를 생성합니다.
요소 13개오류 0개경고 0개
- <!doctype html>L1:1
- <html>L2:1lang="en"
- <head>L3:3
- <meta>L4:5charset="utf-8"
- <meta>L5:5name="viewport"content="width=device-width, initial-scale=1"
- <title>L6:5
- <style>L7:5
- <body>L46:3
- <main>L47:5
- <script>L56:5
Safe 모드는 활성 콘텐츠를 차단합니다
JavaScript, 네트워크 연결, 외부 frame, object 및 폼 제출이 차단됩니다. 인라인 CSS와 data/blob 미디어는 렌더링할 수 있습니다.
격리는 기능의 일부입니다
미리보기는 Devary DOM이 아니라 sandboxed iframe에서 실행됩니다. Safe 모드는 기본적으로 스크립트와 네트워크 접근 리소스를 차단합니다.
개발자 가이드
격리된 미리보기에서 전체 HTML 문서 디버그
HTML Studio는 편집기, 격리 미리보기, 진단 기능을 제공합니다. 운영 환경과의 차이를 알고 사용하세요.
실용적인 작업 순서
설정
완전한 HTML 문서를 불러와 DOM과 리소스 및 진단을 확인하세요.
시도
포맷하거나 보수적으로 압축하고 코드, 미리보기, 콘솔을 비교하세요.
결과 확인
SEO 및 접근성 진단은 예비 점검으로 활용하고 최종 환경에서 재검증하세요.
실제 예제
화면상 공백 보존
보수적인 압축은 인라인 요소 사이의 필요한 공백을 유지합니다.
설정
Conservative minify예제 입력
<main> <span>A</span> <span>B</span> </main>예상 결과
<main> <span>A</span> <span>B</span> </main>미리 서식이 지정된 내용 보존
pre 같은 영역의 들여쓰기와 줄바꿈을 변경하지 않습니다.
설정
Preserve preformatted content예제 입력
<pre> line 1
line 2 </pre>예상 결과
<pre> line 1
line 2 </pre>제한 사항과 주의점
지원 범위
격리 미리보기의 스크립트·리소스 정책이 운영 환경과 다를 수 있습니다.
운영 환경 적용 전
자동 진단은 완전한 보안·접근성 감사가 아닙니다.
자주 묻는 질문
미리보기가 정상이라면 운영 환경도 안전한가요?
아니요. 실제 환경의 리소스, 모바일 화면, 보안 정책을 확인하세요.