HTML 포맷터
지저분한 HTML을 정렬하거나 운영용으로 압축하세요.
브라우저에서 실행됩니다. 입력한 내용은 어디로도 전송되지 않습니다.
- 2칸 또는 4칸 들여쓰기
- 클릭 한 번으로 압축
- 업로드 없음
HTML 정렬 방법
- HTML을 붙여넣으세요.
- 들여쓰기 크기를 고르거나 압축을 켜세요.
- 결과를 복사하거나 다운로드하세요.
정렬과 압축 비교
| 정렬 | 압축 | |
|---|---|---|
| 들여쓰기 | 2, 4, 8칸 추가 | 제거 |
| 주석 | 유지 | 제거 |
| 태그 사이 공백 | 통일 | 제거 |
| pre, textarea, script, style 안의 내용 | 그대로 | 그대로 |
압축된 HTML이 중요한 순간
- 공백과 주석이 사라지면 운영 페이지가 조금 더 빨리 로드되고 대역폭도 덜 씁니다.
- 압축된 마크업은 소스 보기에서 읽기 어려워집니다. 운영 환경에서는 합리적인 절충이지만 디버깅 중에는 불편합니다.
HTML 정렬 팁
- 압축된 마크업을 눈으로 디버깅하는 건 느리므로, 읽기 쉬운 들여쓰기 버전을 소스 관리에 남기고 배포할 것만 압축하세요.
- 2칸 들여쓰기는 깊게 중첩된 마크업에 어울리고, 4칸은 계층이 얕고 단순한 페이지에서 더 잘 보입니다.
들여쓰기가 영향을 주는 것과 주지 않는 것
- 블록 레벨 태그 사이의 공백은 어차피 접히므로 브라우저가 렌더링하는 결과는 전혀 바뀌지 않습니다.
- <span> 같은 인라인 요소 사이의 여백에 의존하는 디자인이라면 보이는 간격이 달라질 수 있습니다. 정렬 후 그런 부분을 확인하세요.
- 페이지의 DOM 구조는 어느 쪽이든 같으므로 JavaScript 동작에는 영향이 없습니다.
HTML 포맷터 자주 묻는 질문
여기서 압축은 무엇을 하나요?
주석과 태그 사이의 공백을 제거합니다. pre, textarea, script, style 태그 안의 텍스트와 속성은 건드리지 않습니다.
정렬하면 페이지 모양이 바뀌나요?
아니요. 태그 사이의 들여쓰기와 공백은 렌더링에 영향을 주지 않으므로 정렬 전후로 페이지 모양은 같습니다.
깨졌거나 닫히지 않은 태그를 고쳐주나요?
아니요. 입력한 HTML을 다시 정렬할 뿐입니다. 태그 누락이나 불일치는 먼저 에디터에서 고치세요.
완전한 HTML 문서도 정렬할 수 있나요?
네, doctype, head, body를 포함해서 정렬됩니다. 아주 긴 문서는 정렬에 시간이 조금 걸릴 수 있습니다.
HTML을 검증하나요?
아니요. 주어진 마크업을 정렬하거나 압축할 뿐이며, alt 속성 누락이나 태그 닫힘 오류 같은 검증은 하지 않습니다.
인라인 style이나 script 태그도 함께 정렬되나요?
정렬할 때는 됩니다. 주변 마크업과 함께 style 태그 안의 CSS와 script 태그 안의 JavaScript에도 들여쓰기가 붙습니다.
압축하면 템플릿 시스템이 쓰는 주석도 지워지나요?
표준 HTML 주석(<!-- ... -->)은 템플릿 시스템이 마커로 쓰는 것을 포함해 항상 제거됩니다. 주석이 다른 곳에서 의미를 갖는다면 압축 대신 정렬만 쓰세요.
전체 문서가 아니라 일부 조각만 정렬할 수 있나요?
네. 태그 몇 개짜리 조각도 전체 페이지와 같은 방식으로 정렬됩니다. doctype, head, body가 없어도 동작합니다.