HTML 정리·압축

HTML 정리·압축 사용법

HTML 코드를 두 방향으로 다듬는 도구입니다. 정리하기는 태그의 포함 관계가 보이게 줄을 나누고 들여쓰며, 압축하기는 화면에 영향을 주지 않는 공백과 주석을 빼서 파일을 줄입니다. 두 경우 모두 닫히지 않은 태그와 겹치는 id를 함께 검사합니다. 웹 페이지 소스 보기로 복사한 한 줄짜리 코드를 읽을 때, 편집기에서 뒤죽박죽된 들여쓰기를 바로잡을 때, 메일 템플릿이나 배너 코드를 줄여서 넣어야 할 때 씁니다.

쓰는 순서

1. 입력 칸에 HTML을 붙여 넣습니다. 파일 열기나 끌어다 놓기로 html 파일을 불러올 수도 있습니다.
2. 정리하기 또는 압축하기를 누릅니다. 한 번 누른 뒤에는 글이나 옵션을 고칠 때마다 같은 방식으로 다시 처리합니다.
3. 결과 위의 숫자로 입력 크기와 결과 크기, 변화율, 태그 수를 확인합니다.
4. "확인할 곳" 목록이 나오면 줄 번호를 보고 원본을 고칩니다.
5. 결과 복사나 파일로 저장으로 가져갑니다.

예시

<div><span>안녕</div> 을 넣으면 정리된 결과와 함께 "1번째 줄의 <span> 가 닫히지 않았습니다. 1번째 줄의 </div> 앞에서 닫아야 합니다."라는 안내가 나옵니다. 브라우저는 이런 코드도 알아서 고쳐 그리기 때문에 눈으로는 문제를 알기 어렵고, 뒤에 오는 요소의 모양이 이상해진 뒤에야 발견하게 됩니다.

예시 버튼의 문서(525바이트)를 기본 옵션으로 압축하면 463바이트로 11.8% 줄어듭니다. 주석 하나와 줄바꿈, 들여쓰기가 빠지고 <style> 안은 body{margin:0;font-family:sans-serif}.box{padding:16px} 로 줄어듭니다. 이때 <a href="/">처음</a> <a href="/list">목록</a> 사이의 띄어쓰기는 남고, <pre> 안의 줄 맞춤도 그대로입니다.

정리 옵션

• 들여쓰기: 2칸, 4칸, 탭. HTML은 단계가 깊어지기 쉬워 2칸을 많이 씁니다.
• 한 줄 최대: 정한 길이를 넘는 줄을 속성 사이나 글 중간에서 나눕니다. 속성이 많은 태그가 가로로 길게 늘어질 때 80자나 120자로 맞춥니다. 글 중간에서 줄이 나뉘는 것이 싫으면 제한 없음으로 둡니다.
• 빈 줄 유지: 원본에서 일부러 띄워 둔 빈 줄을 한 줄까지 남깁니다. 끄면 빈 줄을 모두 없앱니다.
• head·body 도 한 단계 들여쓰기: 끄면 <head> 와 <body> 를 <html> 과 같은 줄 위치에 둡니다. 문서 전체가 한 단계씩 덜 밀려 읽기 편합니다.

압축 옵션과 안전한 범위

HTML의 공백은 지워도 되는 것과 안 되는 것이 섞여 있습니다. 블록 요소(div, p, li, tr 등) 사이의 공백은 화면에 나타나지 않지만, 글자 속 요소(a, span, b, img, button) 사이의 공백은 띄어쓰기 한 칸으로 보입니다. 이 도구는 기본으로 앞의 것만 지우고 뒤의 것은 한 칸으로 줄입니다.

"확인할 곳"에 나오는 것

• 닫히지 않은 태그: div, span, a, table 처럼 반드시 닫아야 하는 태그가 열린 채 남은 곳.
• 여는 태그 없는 닫는 태그: 복사하다 잘렸거나 한 번 더 닫은 곳.
• 닫는 태그가 필요 없는 요소: </img>, </input> 처럼 쓰지 않는 닫는 태그.
• 겹치는 id: 같은 id가 두 번 이상 쓰인 곳. 자바스크립트의 getElementById 와 label for 가 엉뚱한 요소를 가리키는 원인입니다.
• 닫히지 않은 꺾쇠나 따옴표: <a href="/list> 처럼 따옴표를 닫지 않은 곳.

<li>, <p>, <td>, <option> 은 HTML 표준에서 닫는 태그를 생략할 수 있어 문제로 세지 않습니다. 줄 번호는 결과가 아니라 입력 칸의 줄을 가리킵니다.

파일 여러 개를 한 번에

파일을 두 개 이상 고르면 지금 방식과 옵션으로 모두 처리해 ZIP으로 저장합니다. 압축일 때는 이름이 index.min.html 처럼 바뀝니다. 목록에는 파일마다 크기 변화와 확인할 곳의 수가 나옵니다.

주의할 점

• 검사는 태그의 짝과 id만 봅니다. 속성 이름이 맞는지, 어떤 요소 안에 어떤 요소가 올 수 있는지 같은 규칙은 보지 않습니다.
• PHP, JSP, 템플릿 문법이 섞인 파일은 그 부분이 태그처럼 보이면 들여쓰기가 어긋날 수 있습니다.
• 압축한 코드를 다시 정리하면 읽을 수는 있지만 지워진 주석과 빈 줄은 돌아오지 않습니다. 원본을 따로 보관하세요.