HTML, CSS 및 JavaScript를 작성하고 입력하는 동안 실시간 샌드박스 미리보기를 확인하세요. 반응형 장치 너비, Monaco 구문 강조, Prettier 형식 지정, 로컬 자동 저장 및 HTML, 인쇄 또는 PDF 내보내기. 무료이며 가입이 필요하지 않습니다.
실시간 미리보기 기능이 있는 이 온라인 HTML 편집기는 입력을 중단한 후 약 300ms 후에 코드 옆에 HTML, CSS 및 JavaScript를 렌더링합니다. 데스크톱, 태블릿(768px), 모바일(375px) 너비에서 레이아웃을 확인하고 Prettier로 마크업을 정리한 후 .html 또는 PDF로 내보냅니다. 코드는 이 브라우저에만 자동 저장되며 업로드되지 않습니다.
이 라이브 HTML 편집기는 사용자가 입력하는 동안 코드 옆에 마크업을 렌더링하므로 프로젝트를 설정하지 않고도 레이아웃 프로토타입을 제작하고, 스니펫을 테스트하고, 실험을 통해 학습할 수 있습니다. 구문 강조 및 자동 완성을 위해 Monaco(VS Code의 편집기 엔진)를 사용하며 가입 없이 브라우저에서 완전히 실행됩니다.
전체 문서 또는 일부를 입력하세요. CSS를 <style> 태그에, JavaScript를 <script> 태그에 넣거나 https를 통해 CDN에서 로드하세요.
입력을 중지한 후 약 300ms 후에 미리보기 창이 다시 렌더링됩니다. 분할, 코드 또는 미리 보기 보기를 사용하여 작업 공간을 정렬합니다.
데스크톱(전체 너비), 태블릿(768px), 모바일(375px) 간에 전환하여 레이아웃이 어떻게 리플로우되는지 확인하세요.
Prettify를 클릭하면 Prettier(2칸 들여쓰기, 100자 줄)로 문서를 다시 들여씁니다.
정확한 코드를 .html로 다운로드하고, 선택 가능한 여러 페이지 텍스트를 위해 인쇄 → PDF로 저장을 사용하거나, 빠른 이미지 캡처를 위해 PDF를 클릭하세요.
코드를 편집기에 붙여넣으면 실행 버튼을 누르지 않고도 미리보기가 자동으로 업데이트됩니다. <!DOCTYPE html>, <head> 및 <body>가 포함된 전체 문서를 붙여넣거나 몇 가지 스타일이 포함된 <div>와 같은 부분만 붙여넣을 수 있으며 브라우저는 누락된 구조를 채웁니다. 결과를 전체 크기로 보려면 미리보기 보기로 전환하고, 작성할 공간이 필요하면 코드 보기로 전환하세요. 잘못된 부분이 있으면 먼저 Prettify를 클릭하세요. 들여쓰기를 깔끔하게 하면 닫히지 않은 태그나 위치가 잘못된 </div>를 훨씬 쉽게 찾을 수 있습니다.
편집기는 단일 HTML 문서에서 작동하므로 CSS와 JavaScript가 그 안에 들어갑니다. <head>의 <style> 블록에 스타일을 추가하거나 인라인 스타일 속성으로 추가하고, <body> 끝에 있는 <script> 블록에 동작을 추가하거나 onclick과 같은 이벤트 속성으로 추가합니다. https URL을 가리키는 일반 <link> 또는 <script src> 태그를 사용하여 Google Font, Tailwind의 Play CDN 또는 차트 라이브러리와 같은 CDN에서 라이브러리나 프레임워크를 로드할 수도 있습니다. 미리보기는 실제 브라우저 엔진에서 스크립트를 실행하므로 DOM 이벤트, 타이머, 캔버스 및 CORS 지원 API에 대한 가져오기 호출이 모두 라이브 페이지에서와 마찬가지로 작동합니다.
미리보기 위의 장치 버튼을 사용하여 너비를 제한하세요. <head>에 <meta name="viewport" content="width=device-width,initial-scale=1">을 포함하면 미디어 쿼리가 휴대폰에서와 동일한 방식으로 미리보기 너비에 응답합니다.
| 프리셋 | 미리보기 너비 | 확인해야 할 사항 |
|---|---|---|
| 데스크탑 | 전체 창 너비 | 최대 너비 컨테이너, 다중 열 그리드, 호버 상태 |
| 태블릿 | 768px | 일반적인 md 중단점: 탐색 축소, 2열 레이아웃 |
| 이동하는 | 375px | 텍스트 줄바꿈, 탭 대상 크기, 이미지 넘침, 가로 스크롤 |
미리보기는 코드에서 로드된 샌드박스 프레임입니다. 안전을 위해 출처는 불투명합니다. 귀하의 스크립트는 이 사이트의 쿠키나 저장소를 읽을 수 없으며, 이 사이트는 귀하의 페이지를 읽을 수 없습니다. 이러한 설계에는 아래에 나열된 몇 가지 예측 가능한 제한이 있으므로 코드 대신 편집기를 디버깅하는 데 시간을 낭비하지 않아도 됩니다.
| 공장 | 작동하지 않습니다(및 그 이유) |
|---|---|
| 인라인 <style>, 스타일 속성 및 <script> | src="img/logo.png"와 같은 상대 경로: 서버에 이를 해결할 폴더가 없습니다. 전체 https URL 또는 데이터 URI를 사용하세요. |
| https를 통한 CDN의 CSS 및 JS | 스크립트 내의 localStorage, sessionStorage 및 쿠키: 샌드박스가 이를 차단합니다(SecurityError가 발생함). |
| 경고(), 확인(), 새 탭에서 열리는 양식 및 링크 | CORS 헤더를 보내지 않는 API에 대한 fetch(): 브라우저는 실제 사이트에서와 마찬가지로 응답을 차단합니다. |
| 공개 URL의 이미지 및 글꼴 | 여러 파일, npm 가져오기 또는 빌드 단계: 프로젝트 IDE가 아닌 단일 문서 편집기입니다. |
Prettify는 브라우저에서 Prettier의 HTML 포맷터를 실행합니다. 중첩된 태그를 2개의 공백으로 다시 들여쓰고, 긴 줄을 100자로 줄바꿈하고, 태그가 너무 넓어지면 자체 줄에 속성을 넣습니다. HTML 구조에 맞게 조정되었으므로 <style> 및 <script> 블록의 내용은 대부분 작성한 대로 그대로 유지됩니다. 페이지가 렌더링하는 내용은 변경되지 않습니다. 마크업에 Prettier가 구문 분석할 수 없는 구문 오류가 있는 경우 메시지가 표시되고 코드는 그대로 유지됩니다.
세 가지 내보내기 옵션이 있으며 각각 다른 작업에 적합합니다. .html 다운로드는 편집기의 코드를 바이트 단위로 다운로드하여 브라우저에서 열거나 프로젝트에 드롭할 수 있습니다. 인쇄는 렌더링된 미리 보기를 브라우저의 인쇄 대화 상자로 보냅니다. PDF로 저장을 선택하여 선택 가능한 텍스트를 가져오고 여러 페이지 나누기 및 JavaScript가 그린 모든 작업을 수행합니다. PDF 버튼은 정적 HTML 및 CSS를 이미지로 캡처하여 A4 페이지에 분할하여 다운로드하는 원클릭 바로가기입니다. 이미지이기 때문에 텍스트를 선택할 수 없으며 JavaScript로 생성된 콘텐츠가 표시되지 않습니다. 빠른 PDF가 실패하는 경우 일반적인 원인은 CORS 헤더가 없는 외부 이미지입니다. 대신 인쇄를 사용하세요.
이메일 클라이언트는 브라우저보다 HTML과 CSS를 훨씬 적게 지원하므로 이메일 템플릿은 테이블 기반 레이아웃, 약 600px 너비의 콘텐츠 열, <style> 블록이 아닌 인라인 스타일 속성, 고정 너비 속성이 있는 이미지 등 기존 규칙을 따릅니다. 여기에서 그런 식으로 구축하고 375px 사전 설정으로 전환하여 이메일이 휴대폰에 어떻게 쌓이는지 확인하세요. 미리보기는 최신 브라우저가 이메일을 어떻게 렌더링하는지 보여줍니다. 이는 먼저 확인하는 것이 좋습니다. 일부 클라이언트, 특히 Windows의 Outlook은 다르게 렌더링하므로 캠페인이 종료되기 전에 항상 실제 받은 편지함으로 테스트를 보내세요.
짧은 패턴을 입력하고 조정할 수 있습니다. 각각에는 몇 줄만 필요하며 미리보기에 결과가 즉시 표시됩니다.
| 단편 | 키 코드 | 그것이 가르치는 것 |
|---|---|---|
| 중앙 카드 | 바디{display:grid;place-items:center;min-height:100vh} | 하나의 규칙으로 그리드 중심 맞추기 |
| Flexbox 탐색 모음 | nav{display:flex;justify-content:space-between;gap:1rem} | 한 행의 항목 간격 |
| 반응형 열 | 표시:그리드;그리드-템플릿-열:반복(자동 맞춤,최소 최대(200px,1fr)) | 미디어 쿼리 없이 래핑되는 열 |
| 카운터 클릭 | <button onclick="this.textContent=++n">0</button>, <script>에서 n=0으로 설정 | 이벤트 및 DOM 업데이트 |
| 다크 모드 인식 페이지 | @media (선호 색상 구성: 어두운){body{background:#111;color:#eee}} | 방문자의 시스템 테마 존중 |
CSS 생성기를 사용하여 그라디언트, 그림자 및 기타 CSS 생성SVG Forge로 인라인 SVG 아이콘 최적화모형용 크기의 자리 표시자 이미지 만들기
입력한 내용은 서버로 전송되지 않습니다. 방문 사이에 작업 내용을 유지하기 위해 편집기는 코드를 이 기기의 이 브라우저의 로컬 저장소에 자동 저장하므로 새로 고친 후에도 코드는 그대로 유지되지만 다른 기기나 다른 브라우저와 동기화되지는 않습니다. 재설정을 클릭하면 코드가 샘플 문서로 대체됩니다. 브라우저 설정에서 이 사이트의 데이터를 지우면 저장된 사본이 삭제됩니다. 공유 컴퓨터에서는 떠나기 전에 재설정을 누르세요.
이 편집기는 빠른 비공개 단일 파일 작업을 위해 제작되었습니다. 즉, 계정이 필요 없이 스니펫 테스트, HTML 학습, 휴대폰 너비에서 레이아웃 확인, 이메일 블록 미리보기 등이 가능합니다. 여러 파일, npm 패키지, 프레임워크 빌드 단계, 공유 가능한 링크 또는 실시간 협업이 필요한 경우 CodePen, JSFiddle 또는 PlayCode와 같은 전체 플레이그라운드가 더 적합합니다. 많은 개발자는 이러한 검사를 위한 빠른 스크래치패드와 공유하려는 프로젝트를 위한 전체 놀이터라는 두 가지를 모두 사용합니다.
색상 대비 검사기로 텍스트와 배경 대비를 확인하세요.JSON 포맷터를 사용하여 API 응답을 검증하고 예쁘게 인쇄하세요.
편집기에 HTML을 입력하거나 붙여넣습니다. 입력을 중지한 후 약 300ms 후에 미리보기가 다시 렌더링되어 실제 브라우저에서 코드가 어떻게 표시되는지 보여줍니다. 실행 버튼도 없고 설치나 가입도 없습니다.
예. CSS를 <style> 블록이나 스타일 속성에 넣고 JavaScript를 <script> 블록이나 onclick과 같은 이벤트 속성에 넣으세요. https URL을 사용하여 CDN에서 라이브러리와 글꼴을 로드할 수도 있습니다. 단일 문서 편집기이므로 별도의 .css 및 .js 파일이 지원되지 않습니다.
지저분하거나 축소된 HTML을 붙여넣고 Prettify를 클릭하세요. Prettier는 페이지 렌더링 방식을 변경하지 않고 중첩된 태그를 공백 2개로 다시 만들고 긴 줄을 100자로 줄 바꿈합니다. HTML에 Prettier가 구문 분석할 수 없는 구문 오류가 있는 경우 코드는 그대로 유지되며 메시지가 표시됩니다.
네, 두 가지 방법이 있습니다. 인쇄 → PDF로 저장은 브라우저의 인쇄 엔진을 사용하여 선택 가능한 텍스트, 여러 페이지 출력 및 JavaScript가 렌더링한 모든 것을 제공합니다. PDF 버튼은 A4 페이지에 걸쳐 분할된 정적 HTML 및 CSS의 빠른 원클릭 이미지 캡처입니다. 해당 텍스트는 선택할 수 없으며 JavaScript 출력은 포함되지 않습니다.
자신의 브라우저에서만 가능합니다. 편집기는 이 브라우저의 로컬 저장소에 자동 저장되므로 작업 내용은 새로 고침 후에도 유지되지만 서버에는 아무것도 업로드되지 않으며 다른 장치와 동기화되지 않습니다. 사이트를 제거하려면 재설정을 클릭하거나 이 사이트의 데이터를 삭제하세요.
img/logo.png 또는 styles.css와 같은 상대 경로에는 확인할 폴더가 없습니다. 미리 보기가 서버의 파일이 아닌 코드에서 구축되기 때문입니다. 전체 https URL을 사용하거나, CSS를 <style> 블록에 붙여넣거나, 작은 이미지를 데이터 URI로 전환하세요.
미리보기는 원본이 불투명한 샌드박스 프레임에서 실행되므로 이 사이트의 데이터를 건드릴 수 없습니다. 결과적으로 localStorage, sessionStorage 및 쿠키는 해당 코드에서 사용할 수 없으며 SecurityError가 발생합니다. 로컬 파일이나 전체 플레이그라운드에서 스토리지 로직을 테스트하세요.
예. 태그를 입력하고 결과를 즉시 확인하세요. 기본 구조(<h1>, <p>, <a>, <img>)로 시작한 다음 <style> 블록을 추가하고 색상과 레이아웃을 실험해보세요. 이러한 즉각적인 피드백은 파일을 편집하고 브라우저 탭을 새로 고치는 것보다 훨씬 빠릅니다.
예. 데스크톱(전체 너비), 태블릿(768px), 모바일(375px) 간에 미리보기를 전환합니다. <head>에 뷰포트 메타 태그를 추가하면 미디어 쿼리가 실제 전화에서와 같은 방식으로 응답합니다.
Tool GuidesPhotos carry hidden data like GPS location and camera details. Here's why that matters for privacy and how to strip it before sharing.
Tool GuidesCPS means clicks per second. Here's how it's measured, what a good score looks like, and how to test your own click speed for free.
Tool GuidesCombine several PDFs into one document, reorder the pages, and keep everything private — no software and no server upload.