HTML 포맷터
HTML 태그를 기준으로 대략적인 들여쓰기를 적용합니다.
HTML 들여쓰기
태그 기준으로 대략적인 들여쓰기를 적용합니다.
사용 방법
- HTML 칸에 한 줄로 붙은 마크업이나 들여쓰기가 깨진 조각을 붙여 넣습니다.
- 포맷을 눌러 태그 기준으로 두 칸씩 들여 쓴 결과를 확인합니다.
- 빈 요소와 주석은 깊이를 올리지 않고 같은 줄 수준에 맞춥니다.
- 결과 복사로 정리된 마크업을 가져갑니다.
- 초기화로 입력과 결과를 함께 비웁니다.
핵심 개념
HTML 포맷터는 태그 사이를 토큰으로 나눈 뒤 여는 태그에서 들여쓰기를 늘리고 닫는 태그에서 줄입니다. 이미지·줄바꿈·입력처럼 빈 요소와 스스로 닫히는 태그, 주석·선언은 자식이 없다고 보고 깊이를 올리지 않습니다. 완전한 HTML 파서가 아니므로 잘못 겹친 태그도 대략 줄만 맞춰 줄 수 있습니다. 압축된 컴포넌트 조각을 읽기 쉽게 펼칠 때 HTML 포맷터가 유용합니다. 텍스트 노드는 앞뒤 공백을 걷어 낸 뒤 현재 깊이에 맞추므로 태그 사이 설명 문구도 한 줄로 정렬됩니다.
태그 사이의 불필요한 공백은 붙인 뒤 다시 나누므로, 인라인 요소 사이의 의도된 공백이 줄어들 수 있습니다. 이 HTML 포맷터는 속성 정렬이나 따옴표 통일은 하지 않고 들여쓰기만 다룹니다. 브라우저에서만 변환되며 마크업을 서버로 보내지 않습니다. 엑셀에서 만든 표 마크업을 읽기 쉽게 다듬거나, 검사 전에 구조를 눈으로 확인하는 전 단계로 쓰기 좋습니다. 포맷한 결과는 복사해 에디터에 붙이면 계층이 한눈에 들어오고 미리보기와도 이어 쓰기 쉽습니다.
예시
입력에 <div><p>hello</p></div> 를 넣고 포맷을 누르면 여는 div 다음 줄에 p가 두 칸 들어가고 텍스트 hello가 그다음 깊이에 놓입니다. 이미지처럼 닫지 않는 태그를 넣어도 다음 형제의 깊이가 불필요하게 올라가지 않습니다. 결과 복사로 정리된 마크업을 에디터에 붙이면 됩니다.
자주 묻는 질문
HTML 포맷터는 문법이 틀린 코드도 들여쓰나요?
예. 오류를 막지 않고 태그 토큰 기준으로 줄만 맞추므로, 닫히지 않은 조각도 결과가 나옵니다.
HTML 포맷터에서 img 같은 빈 태그는 어떻게 처리되나요?
빈 요소와 스스로 닫히는 태그, 주석은 자식이 없다고 보고 다음 형제의 깊이를 올리지 않습니다.
인라인 공백이 HTML 포맷터 후에 사라질 수 있나요?
태그 사이 공백을 먼저 붙이기 때문에 인라인 요소 사이의 빈칸이 줄어들 수 있습니다. 레이아웃이 민감하면 결과를 한 번 더 확인하세요.
HTML 포맷터는 속성을 알파벳 순으로 정렬하나요?
하지 않습니다. 들여쓰기와 줄바꿈만 넣고 속성 순서·값은 그대로 둡니다.
HTML 포맷터 마크업은 서버로 전송되나요?
아니요. 포맷과 복사가 브라우저에서만 이루어지며 업로드 버튼도 없습니다.
HTML 포맷터 결과 복사는 어느 칸을 복사하나요?
읽기 전용 결과란의 정리된 마크업만 복사합니다. 입력이 비어 포맷 전이면 복사할 내용이 없습니다. 관련: XML 포맷터 · HTML 검사기 · HTML 에디터
최종 검토일: 2026년 9월 4일