code HTML / XML 포맷터 및 유효성 검사기 star

작동 방식

포맷터는 마크업을 순회하면서 중첩 깊이를 추적합니다. 여는 태그를 만날 때마다 깊이 카운터가 한 단계씩 올라가고, 짝이 되는 닫는 태그를 만나면 다시 한 단계 내려갑니다. 각 출력 줄은 현재 깊이에 비례하는 만큼의 들여쓰기 단위를 앞에 받습니다 — 한 단계 깊이의 태그는 들여쓰기 한 단위를, 네 단계 깊이의 태그는 네 단위를 받는 식입니다. 텍스트 노드, 주석, 속성은 자신을 감싸는 요소의 깊이를 그대로 물려받으므로, 결과물은 끊김 없는 텍스트 덩어리가 아니라 문서의 실제 트리 구조를 시각적으로 그대로 보여줍니다.

예를 들어 <ul><li>A</li><li>B</li></ul>처럼 빽빽하게 한 줄로 작성된 코드는, 최상위 레벨의 <ul>과 한 단계 들여쓰기된 <li>A</li>, <li>B</li>, 그리고 다시 최상위로 돌아온 닫는 태그 </ul>로 정리되어 반환됩니다 — 한 줄이 아니라 세 줄이 되며, 각 줄의 깊이는 들여쓰기만 보고도 바로 알 수 있습니다. <br>이나 <img> 같은 빈 요소는 자식을 가질 수 없으므로 깊이 카운터를 절대 올리지 않습니다.

알아두면 좋은 점

XML 모드를 선택하면 파서가 엄격하게 동작합니다 — 닫히지 않은 태그, 어긋난 중첩, 유효하지 않은 문자 등 형식 위반이 있으면 조용히 넘어가는 대신 구체적인 오류 메시지로 알려줍니다. HTML 모드를 선택하면 도구는 대신 최선을 다한 태그 균형 검사를 실행하는데, 이는 브라우저 자체가 HTML을 관대하게 해석하기 때문에 XML처럼 명확한 "유효하지 않음" 상태가 존재하지 않기 때문입니다. 이러한 차이는 두 형식 사이의 실제 차이를 그대로 반영합니다. XML 규격은 문서가 완전히 형식을 갖추거나 아예 거부되어야 한다고 요구하며 중간은 없는 반면, HTML5는 닫는 태그를 빠뜨리는 것 같은 작은 실수로 페이지가 깨지지 않도록 의도적으로 관대하게 설계되었습니다. 이런 관대한 전통 때문에 <br/>이 XML에서는 필수이지만 HTML에서는 <br>과 <br/> 둘 다 유효하며 서로 바꿔 쓸 수 있는 것입니다.

이는 손으로 작성한 마크업을 정리하는 것을 훨씬 넘어서는 곳에서도 유용합니다. 실제 페이지에서 가져온 압축된 HTML, 한 줄로 반환되는 XML API 응답, 서식 없이 내보낸 설정 파일 모두 깊이 기반 들여쓰기를 적용하면 훨씬 읽기 쉬워지고 잘못 배치된 태그도 훨씬 쉽게 찾아낼 수 있습니다. 들여쓰기는 입력에서 그대로 복사하는 것이 아니라 파싱된 구조로부터 다시 계산되므로, 원본의 공백이 아무리 일관성 없더라도 출력은 항상 일관됩니다.