HTML 정리·압축
HTML을 읽기 좋게 펼치거나 한 줄로 압축해요. script 안은 보존.
이럴 때 쓰세요
이렇게 사용하세요
결과가 예상과 다를 때
결과가 잘려 보여요
전체 결과는 복사 버튼으로 받을 수 있어요.
입력한 내용이 사라졌어요
이 기기에 자동 저장돼요. 브라우저 저장소를 지우면 함께 사라져요.
자주 하는 실수
- 압축은 태그 사이의 연속 공백만 지웁니다. 한 칸을 사이에 둔 요소가 붙어 '한국은행' 처럼 읽힙니다.
- 속성값에 부등호가 들어 있으면 태그 경계가 어긋납니다. title="a > b" 인 요소가 두 조각으로 잘려 결과가 망가져요.
- 정리는 태그 짝을 검사하지 않습니다. 잘못된 마크업도 들여쓰기만 되어 그대로 나옵니다.
- 정리하면 요소 안의 텍스트가 닫는 태그 위에 따로 줄로 올라갑니다. 한 줄짜리 인라인 요소가 여러 줄로 벌어져 보여도 문법은 맞습니다.
계산 근거
여기서는 태그를 <[^>]+> 정규식으로 잘라 순서대로 재배치하는 방식이라 HTML 파서의 규칙을 따르지 않습니다. 속성값 안의 부등호, 생략된 닫는 태그 자동 삽입 같은 처리는 하지 않습니다. HTML에서 빈 요소는 br, img, input 처럼 닫는 태그 없이 씁니다. 압축은 주석 제거와 태그 사이 공백 제거 두 가지뿐입니다.
실제로 계산해 보면
한 줄로 된 225바이트 페이지를 정리하면 몇 줄이 되나요?
21줄이 됩니다. 문서 선언, head, body가 각각 단계로 벌어지며 들여쓰기는 두 칸씩입니다.
같은 페이지를 압축하면 얼마나 줄까요?
225바이트에서 207바이트로 8% 줄어듭니다. 공백 제거만 하므로 화면 모양은 그대로지만 파일 크기 절감은 크지 않습니다.
인라인 요소 사이에 공백 하나를 두고 두면?
압축하면 그 한 칸이 지워져 두 요소가 붙습니다. 세 요소가 나란히 있던 예라면 '한국은행은력' 처럼 읽힙니다.
더 궁금한 것
주석은 정리와 압축에서 어떻게 되나요?
정리에서는 현재 깊이에 맞춰 들여쓴 채 남습니다. 압축에서는 통째로 지워집니다. 마크업이 어떤 화면용인지 남겨야 한다면 정리만 하세요.
원래 모양을 그대로 두고 줄바꿈만 고치려면?
최소한으로 고치는 기능이 없습니다. 압축이 오히려 위험할 수 있으니 원본을 두고 대상 화면에서만 확인하세요.
정리 결과는 그대로 배포해도 되나요?
내용은 보존되지만 태그 속 텍스트 위치와 script 뒤의 개행이 바뀝니다. 대표 페이지 몇 개를 브라우저에서 대조해 본 뒤 쓰세요.
알아둘 경계값
- 닫는 태그 없이 끝난 요소는 깊이가 계속 쌓여서 뒤 내용이 전부 밀려요. 밀림이 보이면 앞쪽 태그 짝을 먼저 보세요.
- 압축은 태그 사이 공백만 붙이고 속성 사이 공백은 지우지 않아요. 크기가 기대만큼 안 줄 수 있으니 수치로 보세요.
- 요소 안 글자의 앞뒤 공백은 정리 과정에서 지워져요. 의도된 공백이면 원본을 두고 대상 화면에서만 보세요.
- 본문에 꺾쇠가 짝을 이루면 태그처럼 잘려서 따로 줄로 떨어져요. 계산식이 보이면 원본과 대조하세요.
- 여러 줄에 걸친 글자는 줄바꿈이 남는데 둘째 줄부터 들여쓰기가 안 맞아요. 모양 비교는 브라우저에서 하세요.
- 정리 결과 앞뒤의 빈 줄은 지워져요. 붙여넣을 때 위치가 달라 보이면 빈 줄을 손으로 더하세요.
결과를 믿기 전 확인 목록
- 깊게 밀린 구간 앞에서 열린 태그를 찾았는지 보세요.
- 압축 전후 바이트를 재서 줄었는지 숫자로 보세요.
- 글자 사이 의도된 공백이 지워지지 않았는지 보세요.
- 계산식 꺾쇠가 따로 줄로 떨어지지 않았는지 보세요.
- 여러 줄 글자의 둘째 줄 모양을 브라우저에서 보세요.
- 앞뒤 빈 줄이 필요한지 붙이기 전에 미리 보세요.
- 스크립트 안 내용이 그대로인지 대조했는지 보세요.
- 주석이 필요한 곳은 정리본만 썼는지 결과에서 보세요.
- 대표 페이지 몇 개를 브라우저에서 대조했는지 보세요.
자주 묻는 질문
script 안 내용도 바뀌나요?
아니요. script·style·pre 안은 손대지 않습니다.
script 안 코드가 깨지지 않나요?
script·style·pre·textarea 안은 손대지 않아요. 인라인 스크립트가 있는 페이지도 안전해요.