HTML 포매터

한 줄로 압축되거나 들여쓰기가 엉망인 HTML 코드를 태그 계층에 맞춰 줄바꿈과 들여쓰기로 정리합니다. CMS·API에서 받은 HTML 응답을 분석할 때 특히 유용합니다.

카테고리: 개발자 도구

언제 사용하나요?

압축되거나 들여쓰기가 엉망인 HTML 코드를 읽기 좋게 정리해야 할 때 사용합니다. 외부에서 받은 HTML 조각을 코드에 삽입하기 전 정리할 때도 유용합니다.

사용 방법

HTML 코드를 입력란에 붙여넣습니다.
포맷 버튼을 누르면 들여쓰기와 줄바꿈이 정리됩니다.
정리된 HTML을 복사합니다.

입력값 안내

들여쓰기가 없거나 정렬이 틀어진 HTML 코드를 텍스트 영역에 붙여넣습니다.

계산·변환 기준

HTML 문자열을 파싱하면서 여는 태그(`<tag>`)를 만나면 들여쓰기 레벨을 증가시키고, 닫는 태그(`</tag>`)를 만나면 감소시키는 방식으로 계층적 트리 구조를 분석하여 탭 또는 공백 문자 기준으로 코드를 정렬(Beautify)합니다.

사용 예시

CMS·API HTML 응답 분석 - 워드프레스나 API에서 받은 한 줄짜리 HTML 응답을 펼쳐 태그 구조를 파악합니다.
레거시 마크업 리팩터링 - 들여쓰기가 망가지거나 압축된 레거시 HTML 파일을 정리해 유지보수 가능한 형태로 만듭니다.
코드 리뷰용 마크업 정리 - PR에 포함된 HTML 변경사항을 읽기 좋게 정렬해 리뷰어가 구조 변경을 빠르게 확인하도록 돕습니다.

예시

한 줄짜리 <div><span>안녕</span></div> → 구조에 맞게 줄바꿈 및 들여쓰기된 HTML로 렌더링
CMS에서 복사한 한 줄짜리 HTML → 태그 계층에 맞춰 펼친 코드로 정리
서버 API 응답 HTML 문자열 → 태그 계층별 들여쓰기로 펼쳐 구조 즉시 파악
이메일 템플릿 minify HTML → 섹션·테이블·셀 단위로 줄 분리 후 편집
Tailwind 클래스가 가득한 한 줄 컴포넌트 → 속성별 줄 정렬로 리뷰 준비
크롤링한 한 덩어리 HTML → 들여쓰기 정렬 후 원하는 태그 위치 즉시 확인

주의사항

포매팅은 코드의 시각적 정렬만 수행하며 HTML 문법 오류는 수정되지 않습니다. 실제 HTML 유효성 검사는 W3C Markup Validator를 이용하세요.
Vue, Angular, JSX 등 프레임워크 전용 HTML 확장 문법(<template>, v-if, ng-if 등)은 처리 결과가 예상과 다를 수 있으니 사용 전 확인하세요.

계산·사용 가이드

HTML 들여쓰기와 정렬

HTML을 들여쓰기해 중첩 구조를 보기 쉽게 만듭니다. 태그가 많이 중첩되거나 한 줄로 압축된 코드를 분석할 때 특히 유용합니다.

압축(minify) 기능

공백과 줄바꿈을 제거해 파일 크기를 줄이는 압축도 지원합니다. 주석이 포함된 경우 압축 시 제거 여부를 설정할 수 있습니다.

자주 묻는 질문

HTML 실행 결과를 서버에서 처리하나요?

아니요. 입력과 포매팅은 모두 브라우저 안에서 처리됩니다. 붙여넣은 HTML이 외부 서버로 전송되거나 저장되지 않으므로 내부 마크업 코드도 안심하고 사용할 수 있습니다.

인라인 스크립트나 스타일도 정리되나요?

HTML 태그 구조와 함께 style·script 태그 안의 CSS·JS 코드도 들여쓰기 규칙으로 정리됩니다. 단, script·style 내부 코드의 심층 포매팅은 각각의 CSS/JS 포매터를 사용하는 것이 더 정확합니다.

압축된 HTML도 정리되나요?

네, 한 줄로 압축된 HTML도 태그 계층에 맞춰 들여쓰기해 읽기 쉽게 펼쳐 줍니다. API나 CMS에서 받은 한 줄짜리 HTML 응답을 분석할 때 유용합니다.

들여쓰기 방식은 설정할 수 있나요?

2칸 또는 4칸 들여쓰기를 선택할 수 있습니다. 팀 코딩 스타일에 맞는 방식을 선택하세요. 기본값은 2칸 들여쓰기입니다.

Vue·React의 JSX나 템플릿 문법도 처리되나요?

기본 HTML 태그 구조는 정리되지만, Vue의 v-if·:class 바인딩, React JSX의 {변수}·className 같은 프레임워크 전용 문법은 처리 결과가 다를 수 있습니다. 포매팅 후 코드를 검토하고 필요한 부분을 수정하세요.