개발자 도구
HTML 포맷터
중첩 깊이 기준 들여쓰기, pre와 textarea는 보존
결과
모든 처리는 브라우저에서 이루어집니다. 데이터는 기기를 벗어나지 않습니다.
관련 도구
사용 방법
들여쓰기는 태그 깊이를 따릅니다. 여는 태그는 깊이를 늘리고, 닫는 태그는 줄이며, 빈 요소는 건드리지 않습니다. 마지막 규칙을 놓치는 것이 다른 포맷터들이 문서를 갈수록 오른쪽으로 밀어내는 원인입니다.
HTML 붙여넣기
압축된 출력물, 복사한 DOM 일부, 직접 작성한 조각 모두 동작합니다. 문서가 완전하거나 유효할 필요는 없습니다.
들여쓰기 선택
공백 2칸, 4칸, 탭 중에서 고르세요. 프로젝트의 기존 관행에 맞추면 정렬된 결과가 버전 관리에서 불필요한 변경으로 잡히지 않습니다.
보존 영역 확인
pre와 textarea 안의 내용은 바이트 단위로 그대로 유지됩니다. 그곳의 공백은 의미가 있어서 다시 포맷하면 화면에 그려지는 결과가 눈에 띄게 달라집니다.
예시
압축된 조각 정렬
헤더, 목록, 이미지가 들어간 한 줄짜리 section이 중첩 트리로 펼쳐집니다. 목록 항목이 ul 안쪽 한 단계에 놓여 구조가 한눈에 들어옵니다.
빈 요소는 평평하게 유지
img나 br 태그는 새 단계를 열지 않으므로 뒤따르는 형제 요소가 올바른 깊이에 남습니다. 이를 놓친 포맷터는 이후 문서 전체를 계속 오른쪽으로 밀어냅니다.
도구 소개
압축되었거나 들여쓰기가 뒤죽박죽인 HTML을 읽기 좋은 트리로 정렬합니다. img, br, input 같은 빈 요소는 들여쓰기 단계를 열지 않으며, pre와 textarea 안의 공백은 그대로 보존됩니다. 그 안의 공백은 의미를 가지므로 다시 들여쓰면 브라우저가 그리는 결과가 바뀌기 때문입니다.