📐HTML·XML 들여쓰기 포맷터

압축된 HTML·XML 코드를 들여쓰기 정렬해 가독성 높은 형태로 포맷팅

압축된 HTML·XML 코드

들여쓰기 칸 수

HTML·XML 들여쓰기 포맷터 사용법

빌드 과정에서 압축(minify)된 HTML·XML 코드나, 한 줄로 이어져 붙여넣어진 마크업은 태그 구조를 눈으로 파악하기 매우 어렵습니다. 이 도구는 압축된 코드를 붙여넣으면 여는 태그와 닫는 태그를 분석해 계층 구조에 맞게 자동으로 줄바꿈하고 들여쓰기해 가독성 높은 형태로 정렬해줍니다.

닫는 태그를 만나면 들여쓰기 단계를 한 단계 줄이고, 여는 태그를 만나면 다음 줄부터 한 단계 늘리는 방식으로 동작합니다. <br/>, <img/>처럼 스스로 닫히는 self-closing 태그나 한 줄에 여닫힘이 모두 있는 태그는 같은 레벨에서 한 줄로 처리되어 불필요하게 깊어지지 않습니다.

들여쓰기 칸 수는 2칸 또는 4칸 중에서 선택할 수 있어 프로젝트의 코드 스타일 가이드에 맞춰 결과를 조정할 수 있습니다.

특히 브라우저 개발자 도구에서 복사한 압축된 HTML이나, API 응답으로 받은 XML 데이터의 구조를 파악하며 디버깅할 때 유용합니다. 원본 코드를 직접 수정하지 않고도 눈으로 보기 편한 형태로 즉시 변환해 확인할 수 있어 협업 시 코드 리뷰에도 도움이 됩니다. 별도 프로그램 설치 없이 브라우저에서 바로 붙여넣고 결과를 확인할 수 있는 점도 큰 장점입니다.

자주 묻는 질문

self-closing 태그(예: <br/>, <img/>)도 올바르게 처리되나요?

네, 닫는 슬래시가 포함된 태그는 들여쓰기 단계를 증가시키지 않고 같은 레벨에서 한 줄로 처리됩니다.

들여쓰기 칸 수를 바꿀 수 있나요?

네, 들여쓰기 단위를 2칸 또는 4칸 중에서 선택할 수 있으며 선택에 따라 결과가 즉시 다시 정렬됩니다.

HTML·XML 들여쓰기 포맷터 사용법

자주 묻는 질문

함께 보면 좋은 도구