와 안의 내용이 들여쓰기되지 않는 이유는 무엇인가요?

와 안의 공백은 쓴 그대로 표시되고, 나 안의 들여쓰기를 바꾸면 코드나 문자열이 달라질 수 있어서 이 블록들은 그대로 보존합니다.

HTML 포맷터 - 무료 온라인 도구

기능

HTML 태그 자동 들여쓰기

들여쓰기 사용자 지정

주석 유지 또는 제거

구문 강조

사용 방법

1. 왼쪽 입력 상자에 HTML 마크업을 붙여넣으세요.

2. 포맷 버튼을 클릭하면 적절한 들여쓰기로 코드가 정리됩니다.

3. 압축 버튼을 클릭하면 공백이 제거됩니다.

4. 오른쪽 결과를 복사하거나 다운로드하세요.

이 도구에 대하여

브라우저, CMS, 압축된 빌드에서 복사한 HTML은 읽을 수 없는 한 줄로 오는 경우가 많습니다. 이 포매터는 중첩된 각 요소가 부모보다 한 단계 더 들여쓰이도록 다시 정리해 구조, 빠진 닫는 태그, 잘못 놓인 요소를 한눈에 보이게 합니다. <br>, <img>, <input>처럼 닫는 태그가 없는 빈 요소를 인식하고, 공백에 의미가 있는 <pre>, <textarea>, <script>, <style>의 내용은 그대로 둡니다. 공백 2칸, 4칸, 탭 중에서 고른 뒤 결과를 복사하거나 다운로드하세요. "압축"은 반대로 운영 환경을 위해 주석을 지우고 태그 사이 공백을 줄여 페이지 크기를 줄입니다.

자주 묻는 질문

포맷팅하면 페이지 모양이 바뀌나요?

대부분은 바뀌지 않습니다. 블록 요소 사이의 공백은 브라우저가 무시합니다. 다만 나란히 있는 링크 두 개나 span처럼 인라인 요소 사이에서는 줄바꿈 하나가 공백 한 칸만큼 간격을 바꿀 수 있으니, 인라인 요소가 많은 마크업은 정리한 뒤 확인하세요.

<pre>와 <script> 안의 내용이 들여쓰기되지 않는 이유는 무엇인가요?

<pre>와 <textarea> 안의 공백은 쓴 그대로 표시되고, <script>나 <style> 안의 들여쓰기를 바꾸면 코드나 문자열이 달라질 수 있어서 이 블록들은 그대로 보존합니다.

포매터가 잘못된 HTML을 고쳐 주나요?

마크업을 고치거나 검증하지 않습니다. 받은 내용을 들여쓰기만 하지만, 그 덕분에 닫히지 않은 태그 같은 문제가 드러나기 쉽습니다. 표준 준수 여부는 W3C 검사기로 확인하세요.

"압축"은 무엇을 지우나요?

HTML 주석과 태그 사이의 불필요한 공백을 지웁니다. <pre> 안의 텍스트처럼 공백에 의존하는 내용은 남깁니다. 운영 사이트에서는 HTML 압축만 하는 것보다 서버의 gzip이나 Brotli 압축이 더 많이 줄여 줍니다.

Vue나 Angular 같은 템플릿 문법도 정리할 수 있나요?

{{ name }} 같은 템플릿 표현식은 텍스트로 유지되고, 컴포넌트 태그는 일반 요소처럼 들여쓰기됩니다. 속성 값 안에 꺾쇠괄호가 있는 복잡한 지시어는 일반 HTML 포매터를 혼란스럽게 할 수 있으니 결과를 확인하세요.

HTML 포맷터 및 코드 정리

기능

사용 방법

이 도구에 대하여

자주 묻는 질문

관련 도구