🌐
무료 HTML 정리기 & 압축기
적절한 중첩 들여쓰기로 HTML을 정리하거나 압축합니다. <pre>, <script>, <style> 블록 내의 콘텐츠를 보존합니다.
한 번 로드하면 오프라인에서도 작동
여기에 파일을 놓거나 클릭해서 선택하세요
HTML, HTM · 기기에서 처리됨
또는 Ctrl+V를 눌러 클립보드에서 붙여넣기
정리된 HTML
여기에 출력이 표시됩니다…주요 용도
- 서버 렌더링 HTML 디버그서버 (PHP, Rails, Django, Node)의 원본 HTML 출력을 읽을 수 있는 들여쓰기 형식으로 봅니다.
- 이메일 HTML 템플릿 포맷이메일 HTML은 자세합니다 (테이블, 인라인 스타일). 편집 가능하고 유지 관리 가능하도록 포맷합니다.
- 정적 HTML 페이지 포맷수동으로 편집된 정적 HTML 파일은 공동 편집을 위한 일관된 포맷의 이점을 얻습니다.
- CMS 내보낸 HTML 정리WordPress, Wix, Squarespace는 많은 아티팩트를 포함한 HTML을 내보냅니다. 편집 가능하도록 포맷합니다.
- 프로덕션용 HTML 축소공백 및 불필요한 문자를 제거하여 더 빠른 페이지 로딩을 위해 HTML 파일 크기를 줄입니다.
사용 방법
이 도구는 페이지에 직접 내장된 태그 인식 토크나이저로 HTML을 서식화하거나 압축합니다. 서드파티 서식 라이브러리도 서버 왕복도 없습니다. 마크업의 모든 문자는 입력하거나 붙여 넣는 순간 브라우저에서 로컬로 처리됩니다.
- 1토크나이저가 마크업을 훑음자체 문자 단위 스캐너가 HTML 문자열을 훑으며 주석, DOCTYPE 선언, 여는 태그, 닫는 태그, 자체 닫는 빈 요소(br, img, input 등), 원시 텍스트 노드를 식별합니다. 전용 헬퍼가 따옴표로 된 속성 값을 추적하므로, 속성 안의 > 같은 문자(예: value="a>b")가 태그를 일찍 나누지 않습니다.
- 2태그마다 들여쓰기 깊이 추적정리 모드에서 토크나이저는 깊이 카운터를 유지합니다. 블록 수준 여는 태그는 깊이를 늘리고, 닫는 태그는 기록되기 전에 깊이를 줄입니다. 인라인 요소(span, a, strong, em 등)는 별도의 들여쓴 줄로 밀려나지 않고 내용과 같은 줄에 유지됩니다. pre, script, style, textarea 같은 태그는 공백에 민감하거나 실행 가능한 코드를 손상시키지 않도록 내부 내용을 그대로 출력합니다.
- 3압축기가 공백을 안전하게 줄임압축 모드에서는 공백을 줄이기 전에 pre, script, style, textarea 블록의 내용을 번호가 매겨진 표식으로 바꿔 둡니다. HTML 주석은 제거되고 태그 사이의 연속 공백도 제거되지만, 인접한 인라인 요소 사이에는 단어가 붙지 않도록 공백 하나를 유지합니다. 그런 다음 표식을 원래 내용으로 복원합니다.
- 4출력 표시 및 선택적 저장서식화되거나 압축된 결과가 크기 변화율과 함께 출력 패널에 실시간으로 나타납니다. 브라우저를 떠나지 않고 클립보드에 복사하거나 .html 파일로 다운로드할 수 있습니다.