HTML 압축

HTML을 붙여넣으면 아무도 보지 않는 공백을 뺀 채로 돌려받습니다. 입력란 아래 숫자가 얼마나 줄었는지 알려 줍니다.

입력

들여쓰기

결과

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

사용 방법

태그 사이의 줄바꿈, 연속된 공백, 보통의 주석은 지웁니다. 조건부 주석은 남깁니다. 옛 브라우저를 위한 마크업이 들어 있기 때문입니다. pre, textarea, script, style 안의 내용은 손대지 않고 옮깁니다. 그곳의 줄바꿈은 서식이 아니라 내용입니다.

보통의 페이지라면 전송 압축 전에 10~20퍼센트, 압축 뒤에는 훨씬 적게 줄어듭니다. gzip이 반복되는 공백을 이미 잘 다루기 때문입니다. 빌드 단계에 넣을 값어치는 있고, 개발 중에는 잊어도 됩니다. 읽기 좋은 마크업은 비용이 없고 시간만 아껴 줍니다.

페이지가 그대로 보이나요?

그대로 보입니다. 다만 인라인 요소 사이의 공백은 화면에서 의미가 있습니다. 그래서 태그 사이 공백은 지우지 않고 하나로 줄이며, 레이아웃이 흔들리지 않습니다.

코드가 어딘가로 전송되나요?

아니요. 모두 페이지 안에서 처리하므로 공개 전 템플릿도 그대로 남습니다.

안에 든 CSS와 자바스크립트도 압축하나요?

아니요. 그 블록은 있는 그대로 옮깁니다. 스타일시트에는 CSS 압축 도구를 쓰세요. 마크업 도구로 스크립트를 손대는 것은 은근한 버그를 만드는 전형적인 방법입니다.

되돌릴 수 있나요?

「정렬」을 누르면 들여쓰기된 형태로 다시 펼쳐집니다. 원래 줄바꿈 위치는 사라졌지만 구조는 돌아옵니다.