Utilore

HTML 정렬

붙여넣으면 눈에 들어옵니다. 태그마다 줄을 나누고 중첩 깊이에 맞춰 들여씁니다. 닫지 않은 div를 찾는 데 이보다 빠른 방법은 없습니다.

코드는 이 페이지를 벗어나지 않습니다. 정렬은 브라우저에서 이뤄집니다.

사용 방법

  1. 첫 번째 칸에 HTML을 붙여넣습니다.
  2. 들여쓰기를 고릅니다. 두 칸, 네 칸, 또는 탭.
  3. 결과를 복사합니다. 「압축」을 누르면 다시 줄일 수 있습니다.

알아두면 좋은 점

일부러 건드리지 않는 부분

pre와 textarea 안에서는 공백과 줄바꿈이 곧 페이지의 일부입니다. 다시 들여쓰면 방문자가 보는 화면이 달라집니다. script와 style은 애초에 마크업이 아닙니다. 이 블록들은 그대로 옮기고 통째로만 위치를 바꾸므로, 정렬한 파일도 원본과 똑같이 동작합니다.

중첩은 짐작하지 않고 읽는다

img, br, input 같은 빈 요소는 닫히지 않습니다. 여는 태그마다 들여쓰기를 늘리는 도구는 페이지를 내려갈수록 계속 오른쪽으로 밀립니다. 여기서는 그런 요소를 알아보고 들여쓰기를 유지하므로, 뜻밖의 들여쓰기는 도구의 버릇이 아니라 정말로 닫히지 않은 태그의 신호가 됩니다.

자주 묻는 질문

HTML을 검사해 주나요?

아니요. 준 것을 정렬할 뿐 마크업을 바꾸지 않습니다. 닫히지 않은 태그는 들여쓰기로 드러나지만 오류 목록을 만들지는 않습니다.

코드가 서버로 가나요?

아니요. 정렬은 페이지 안에서 이뤄지므로 사내 템플릿이나 로그인 뒤의 페이지도 컴퓨터에 남습니다.

페이지 전체도 되나요?

됩니다. 마크업 기준 약 5메가바이트까지입니다. 그 이상에서 버거운 것은 정렬이 아니라 결과를 그리는 일입니다.

주석은 어떻게 되나요?

그대로 두고 자기 줄에 놓습니다. 조건부 주석도 남깁니다. 옛 브라우저를 위한 마크업이 담겨 있기 때문입니다.

관련 도구