HTML 압축 및 정렬 도구
프로덕션을 위해 HTML을 압축하거나 가독성을 위해 정렬 (100% 클라이언트 측 처리)
미리보기는 보안을 위해 샌드박스 iframe에서 렌더링됩니다. 일부 기능이 제한될 수 있습니다.
HTML 압축기 및 포맷터 문서
이 도구는 무엇인가요?
이 도구를 사용하면 HTML 코드를 압축(축소)하거나 포맷할 수 있습니다. 축소는 불필요한 공백과 주석을 제거하여 프로덕션 배포를 위한 파일 크기를 줄입니다. 포맷팅은 개발 중 가독성을 높이기 위해 적절한 들여쓰기로 HTML을 포맷합니다.
주요 기능
- HTML 축소 - 공백, 줄 바꿈 및 주석을 제거하여 파일 크기 감소
- HTML 포맷 - 가독성을 위해 적절한 들여쓰기와 줄 바꿈으로 HTML 포맷
- 사용자 정의 가능한 들여쓰기 크기(2칸, 4칸 또는 탭)
- 축소 중 주석을 보존하는 옵션
- 압축률을 보여주는 파일 크기 비교
- 결과를 즉시 확인할 수 있는 실시간 HTML 미리보기 (샌드박스 보안)
일반적인 사용 사례
- 페이지 로드 시간을 줄이기 위해 프로덕션 배포용 HTML 파일 최적화
- 디버깅 및 코드 리뷰를 쉽게 하기 위해 축소된 또는 압축된 HTML 포맷
- 일관되지 않은 포맷으로 된 HTML 코드 정리
- 사용자에게 축소된 HTML을 제공하여 대역폭 사용량 감소
미화 기능의 조정 항목
HTML을 미화할 때 도구는 다음과 같은 형식 개선을 적용합니다:
- 중첩 레벨에 따라 적절한 들여쓰기 추가 (구성 가능: 2개 공백, 4개 공백 또는 탭)
- 가독성을 높이기 위해 여는/닫는 태그 뒤에 줄바꿈 삽입
- 텍스트 콘텐츠를 보존하면서 요소 간 공백 정규화
- pre, code, textarea 태그 내부의 형식 보존
축소 기능의 조정 항목
HTML을 축소할 때 도구는 다음과 같은 최적화를 수행합니다:
- 모든 불필요한 공백, 줄바꿈, 들여쓰기 제거
- HTML 주석 제거 (선택 사항: '주석 보존' 옵션으로 보존 가능)
- 연속된 여러 공백을 단일 공백으로 통합
- 기능적 간격을 유지하면서 태그 주변의 공백 제거
- pre, code, textarea 및 인라인 텍스트 내의 중요한 공백 보존
파일 크기 영향 예측
원본 형식 및 콘텐츠를 기반으로 한 일반적인 파일 크기 변화:
관련 도구
CSS 축소기 및 정렬기
CSS 코드를 압축하거나 정렬하고, 공백 및 주석을 제거하여 파일 크기를 최적화하거나 가독성을 위해 코드를 포맷합니다
JavaScript 축소기 및 정렬기
JavaScript 코드를 압축하거나 정렬하고, 공백 및 주석을 제거하여 파일 크기를 최적화하거나 가독성을 위해 코드를 포맷합니다
HTML 인코더/디코더
XSS 공격을 방지하기 위해 명명된, 십진수 및 16진수 형식으로 특수 문자를 HTML 엔티티로 변환합니다
XML 포맷터
구문 강조 표시를 사용하여 XML 데이터를 포맷하고 검증합니다
JSON 포맷터
가독성 및 디버깅 향상을 위해 JSON 데이터를 포맷하고 검증합니다
텍스트 차이 검사기
나란히 강조 표시된 보기로 두 텍스트 또는 파일 간의 차이를 비교합니다