HTML 포맷터

HTML 포맷팅에 대하여

HTML은 모든 웹 페이지를 구성하는 마크업입니다. 압축은 공백, 주석, 중복된 구문을 제거하여 배포용 파일을 축소하고, 정렬은 다시 들여쓰기하여 중첩된 요소를 읽고 편집하기 쉽게 만듭니다.

<pre>, <textarea>를 비롯한 몇몇 요소 안의 공백은 페이지가 표시되는 방식에 의미가 있으므로, 모든 공백을 구분 없이 제거하는 단순한 압축기는 이를 눈에 띄게 망가뜨립니다. 이 도구는 공백을 인식하여, 보통 태그 사이의 의미 없는 공백은 접되 공백에 민감한 요소는 손대지 않습니다. 일반적인 <!-- 주석 -->은 제거되지만, 일부 오래된 사이트가 여전히 Internet Explorer용으로 쓰는 조건부 주석 구문, 예를 들어 <!--[if IE]>...<![endif]-->는 완전히 그대로 남습니다. 이는 진짜 주석이 아니라 우연히 주석 구문으로 작성된 지시문이기 때문입니다. checked="checked"와 같은 불리언 속성도 줄여진 형태가 아니라 작성된 그대로 남습니다.

사용되는 곳

• 배포 전 페이지 마크업 축소
• API나 서버 사이드 렌더링이 반환한 마크업을 디버깅용으로 정렬하여 출력
• CMS 내보내기나 다른 사이트에서 복사한 HTML 정리
• 마크업 차이를 검토하기 전 들여쓰기 통일

자주 묻는 질문

압축하면 페이지 모양이 바뀌나요?
아닙니다. 공백, 주석, 중복된 구문만 제거되며 렌더링 결과는 동일합니다.

인라인 CSS와 JavaScript도 압축되나요?
예. <style> 태그 안의 CSS와 <script> 태그 안의 JavaScript도 주변 마크업과 함께 압축됩니다.

여기에 입력한 HTML이 저장되나요?
아닙니다. 변환은 해당 요청에 대해서만 서버에서 처리되며, 이후 기록되거나 보관되지 않습니다.

<pre>나 <textarea> 안의 공백은 어떻게 되나요?
그대로 남습니다. 이 요소들은 줄바꿈과 들여쓰기까지 포함해 내용을 작성된 그대로 표시하므로, 그 안의 공백을 접으면 페이지의 실제 모습이 바뀌어 버립니다. 이는 시각적으로 의미가 없어 안전하게 제거할 수 있는 일반 태그 사이의 공백과는 다릅니다. 이 도구는 공백에 민감한 요소를 감지해 이를 피하기 위해 그런 요소만 건너뜁니다.