HTML · CSS · JS 포매터

HTML, CSS, JavaScript 코드를 보기 좋게 정렬하거나 용량을 줄이도록 압축합니다.

입력
결과

HTML · CSS · JS 포매터 사용 안내

한 줄로 압축된 코드를 사람이 읽기 좋게 정렬하거나, 반대로 공백·주석을 제거해 파일 크기를 줄여 배포에 사용할 수 있습니다.

Beautify

js-beautify 라이브러리를 사용해 HTML/CSS/JS 코드를 표준 코딩 컨벤션에 맞춰 들여쓰기·줄바꿈합니다.

Minify

JavaScript는 Terser로 안전하게 압축하며, HTML/CSS는 공백과 주석을 제거해 용량을 줄입니다. 원본 대비 절감률을 함께 보여줍니다.

안전성

모든 처리는 브라우저에서 이루어지며 코드는 서버로 전송되지 않습니다.

자주 묻는 질문

Minify 후에도 동작이 동일한가요?

JavaScript는 Terser로 변수명까지 안전하게 압축하지만, 동작은 동일하게 유지됩니다. 큰 프로젝트라면 빌드 도구의 minify를 권장합니다.

JSX나 TypeScript도 지원하나요?

표준 ES2020 JavaScript와 HTML, CSS만 지원합니다. JSX/TSX/TypeScript는 별도 트랜스파일러가 필요합니다.

Hello

World

', css: '.card{padding:16px;border:1px solid #eee;border-radius:8px;}.card h1{margin:0;font-size:1.5rem;color:#333;}', js: 'function fib(n){if(n<2)return n;return fib(n-1)+fib(n-2);}const r=[];for(let i=0;i<10;i++){r.push(fib(i));}console.log(r);' }; $('btn-run').addEventListener('click', run); $('btn-clear').addEventListener('click', function () { input.value = ''; output.value = ''; stat.textContent = ''; clearErr(); }); $('btn-sample').addEventListener('click', function () { var lang = document.querySelector('input[name="lang"]:checked').value; input.value = SAMPLES[lang]; run(); }); $('btn-copy').addEventListener('click', function () { if (!output.value) return; var btn = this, orig = btn.textContent; navigator.clipboard.writeText(output.value).then(function () { btn.textContent = '✅'; setTimeout(function () { btn.textContent = orig; }, 1500); }); }); $('btn-paste').addEventListener('click', function () { navigator.clipboard.readText().then(function (t) { input.value = t; }).catch(function () {}); }); $('btn-download').addEventListener('click', function () { if (!output.value) return; var lang = document.querySelector('input[name="lang"]:checked').value; var ext = lang === 'js' ? 'js' : (lang === 'css' ? 'css' : 'html'); var blob = new Blob([output.value], { type: 'text/plain;charset=utf-8' }); var a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'output.' + ext; a.click(); }); document.querySelectorAll('input[name="lang"], input[name="action"], input[name="indent"]').forEach(function (el) { el.addEventListener('change', function () { if (input.value && output.value) run(); }); }); } if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', __init); else __init();