코드 포맷터 및 압축기

코드 포맷터 및 압축기란?

HTML, CSS, JavaScript를 브라우저 안에서만 정리하거나 압축하는 무료 온라인 코드 포매터 겸 압축기입니다. 먼저 언어를 고른 뒤, 정리(Beautify)를 선택하면 지저분하거나 한 줄로 된 소스를 2칸·4칸·탭 들여쓰기로 다시 정렬하고, 압축(Minify)을 선택하면 코드를 작게 줄입니다. 정리는 js-beautify로 처리하며, JavaScript 압축은 Terser가 이름을 줄이고 용량을 압축하고, CSS와 HTML은 주석 제거와 불필요한 공백 접기로 압축합니다. 웹 개발자들이 압축된 외부 코드를 읽기 좋게 정리하거나, 배포 전에 스타일시트와 스크립트를 줄이거나, 빌드 출력에서 붙여 넣은 코드 조각을 정돈하는 데 사용합니다.

코드 포맷터 및 압축기 사용법

1. 소스의 언어를 고릅니다: HTML, CSS, 또는 JS.
2. 동작을 고릅니다: 정리(보기 좋게) 또는 압축(용량 줄이기).
3. 정리할 때는 들여쓰기를 고릅니다: 2칸 공백, 4칸 공백, 또는 탭.
4. 입력 상자에 코드를 붙여넣거나 입력합니다. 출력은 자동으로 갱신됩니다.
5. 복사 버튼으로 결과를 가져오거나, 지우기를 클릭해 입력을 비우고 처음부터 다시 시작합니다.

예시

a{color:red;font-weight:bold}

a {
  color: red;
  font-weight: bold
}

function add(first, second) {
  return first + second;
}

function add(n,d){return n+d}

<ul>
  <li>One</li>
  <li>Two</li>
</ul>

<ul><li>One</li><li>Two</li></ul>

자주 묻는 질문

제 코드가 서버로 업로드되나요?

아니요. 정리와 압축이 모두 브라우저에서 로컬로 처리됩니다. js-beautify와 Terser는 스크립트로 로드되어 사용자의 기기에서 실행됩니다. 코드가 기기를 벗어나지 않으며 오프라인에서도 계속 작동합니다.

어떤 언어와 동작을 지원하나요?

HTML, CSS, JavaScript 세 가지 언어를 지원하며 각각 정리(선택한 들여쓰기로 보기 좋게)와 압축(용량 줄이기) 두 가지 동작이 있습니다. JavaScript는 Terser로 압축하고, CSS와 HTML은 주석 제거와 공백 접기로 압축합니다.

어떤 들여쓰기를 고를 수 있나요?

정리할 때 2칸 공백, 4칸 공백, 또는 탭 문자로 다시 들여쓸 수 있습니다. 들여쓰기는 정리에만 적용되며, 압축은 공백을 제거하므로 이 설정을 무시합니다.

JavaScript를 압축했더니 왜 오류가 났나요?

Terser는 압축하기 전에 JavaScript를 먼저 파싱하므로, 문법 오류가 있으면 중단되고 메시지가 출력 위에 표시됩니다. 안내된 지점(닫히지 않은 괄호·문자열, 잘못 들어간 토큰 등)을 고치면 결과가 자동으로 다시 만들어집니다.

출력이 알아서 갱신되나요?

네. 입력, 언어, 동작, 들여쓰기를 바꿀 때마다 결과가 다시 만들어지므로 정리하려고 버튼을 누를 필요가 없습니다. 결과가 마음에 들 때 그대로 복사하면 됩니다.