HTML·CSS·JS 포매터란
한 줄로 뭉쳐 있거나 들여쓰기가 어긋난 HTML·CSS·JavaScript 코드를 줄바꿈과 들여쓰기가 정리된 읽기 쉬운 형태로 바꿔 주는 도구입니다. 언어를 고르고 코드를 붙여넣으면 해당 언어 규칙에 맞춰 정렬됩니다. 입력한 코드는 브라우저에서만 처리되어 외부로 전송되지 않습니다.
사용법
- 언어에서 HTML·CSS·JavaScript 중 정렬할 언어를 선택합니다.
- 들여쓰기를 2칸 또는 4칸으로 선택합니다.
- 입력창에 코드를 붙여넣으면 자동으로 정렬됩니다. 정렬하기 버튼으로 다시 정렬할 수도 있습니다.
- 지우기 : 입력과 결과를 모두 비웁니다.
- 결과 오른쪽 위 복사 버튼으로 결과를 클립보드에 복사할 수 있습니다.
정렬(beautify)과 압축(minify)
정렬(prettify/beautify)은 코드의 실제 동작은 그대로 두고, 사람이 읽기 쉽도록 들여쓰기와 줄바꿈만 다시 정리하는 작업입니다. 태그의 중첩 깊이나 중괄호 { }의 블록 깊이에 맞춰 자동으로 계단식 들여쓰기를 넣어 줍니다. 반대로 압축(minify)은 코드 실행에 필요 없는 공백·줄바꿈·주석을 제거해 파일 용량을 줄이는 작업입니다. 이 도구의 압축은 문자열 리터럴과 <pre>·<script> 같은 보존이 필요한 블록을 건드리지 않는 보수적인 방식으로 처리합니다.
언어별 처리 방식
HTML은 여는 태그와 닫는 태그의 중첩에 따라 자식 요소를 한 단계씩 들여씁니다. CSS는 선택자와 { } 블록, 각 선언(속성: 값;)을 줄로 나눠 정리합니다. JavaScript는 블록·함수·조건문의 중괄호 깊이에 맞춰 들여쓰기하고 문장마다 줄을 바꿉니다. 정렬에는 널리 쓰이는 js-beautify 계열 규칙을 사용하므로, 흔히 보는 코드 스타일과 비슷한 결과가 나옵니다.
예를 들어 <ul><li>하나</li><li>둘</li></ul>을 정렬(2칸)하면 아래처럼 바뀝니다.
<ul>
<li>하나</li>
<li>둘</li>
</ul>주의점·팁
정렬 도구는 서식만 정리할 뿐 문법 오류를 고쳐 주지는 않습니다. 닫는 태그나 괄호가 빠진 코드는 결과가 어색하게 나올 수 있으니, 그럴 때는 원본 문법을 먼저 확인하세요. 팀에서 일관된 코드 스타일을 유지하고 싶다면 들여쓰기 칸 수를 정해 두고 붙여넣기 전 한 번씩 정렬하면 협업 시 불필요한 서식 차이를 줄일 수 있습니다.
정렬은 코드 리뷰나 학습 상황에서도 유용합니다. 남이 작성한 압축된 코드나 자동 생성된 마크업은 한 줄로 붙어 있어 구조를 파악하기 어려운데, 정렬을 한 번 거치면 태그와 블록의 중첩 관계가 눈에 들어와 읽기 훨씬 편해집니다. 반대로 배포 직전에는 압축으로 용량을 줄여 전송 속도를 높일 수 있습니다. 언어 선택과 들여쓰기 칸 수는 입력 후에도 언제든 바꿀 수 있으며, 바꾸는 즉시 결과에 반영됩니다. 모든 처리는 브라우저 안에서 이루어지므로 코드가 외부로 새어 나갈 걱정 없이 사용할 수 있습니다.
자주 묻는 질문
입력한 코드가 서버로 전송되나요?
아니요. 모든 정렬은 브라우저 안에서만 실행되며 입력한 코드는 서버로 전송되거나 저장되지 않습니다.
어떤 언어를 정렬할 수 있나요?
HTML, CSS, JavaScript 세 가지를 지원합니다. 언어 선택 후 코드를 붙여넣으면 해당 언어 규칙에 맞춰 들여쓰기와 줄바꿈이 정리됩니다.
들여쓰기 칸 수를 바꿀 수 있나요?
네. 2칸 또는 4칸 들여쓰기를 선택할 수 있으며, 선택한 칸 수가 정렬 결과에 바로 반영됩니다.
정렬과 압축은 무엇이 다른가요?
정렬은 들여쓰기와 줄바꿈을 넣어 코드를 읽기 좋게 만드는 것이고, 압축은 실행에 필요 없는 공백·줄바꿈·주석을 제거해 파일 용량을 줄이는 것입니다. 두 작업 모두 코드의 동작은 바꾸지 않습니다.
코드가 깨지거나 문법 오류가 있어도 정렬되나요?
정렬 도구는 들여쓰기와 줄바꿈만 정리하며 문법을 고치지는 않습니다. 일부 깨진 코드도 최대한 정렬되지만, 결과가 어색하다면 원본 문법을 확인해 주세요.
압축할 때 script나 pre 안의 내용도 바뀌나요?
아니요. 압축은 문자열 리터럴과 pre·textarea·script·style 같은 보존이 필요한 블록의 내용은 그대로 두는 보수적인 방식으로 동작합니다.