Softonic

HTML 정리 도구

단계 1 / 3

최대 100,000자의 HTML을 붙여 넣으세요. 코드는 실행되지 않습니다.

다음: 들여쓰기 선택

HTML을 붙여 넣고 들여쓰기를 두 칸 또는 네 칸으로 선택한 뒤 읽기 쉽게 정리된 결과를 확인하세요. 구조가 분명한 부분만 들여쓰고 인라인 텍스트, 속성, 내용 보존이 중요한 블록은 입력한 그대로 유지합니다. 구조를 판단하기 어려우면 입력을 변경하지 않고 정리된 결과 없이 경고를 표시합니다.

세 단계로 HTML 정리하기

  1. 1

    HTML 붙여 넣기

    정리할 마크업을 입력하세요. HTML 일부나 문서 전체를 붙여 넣을 수 있습니다.

  2. 2

    들여쓰기 선택

    중첩된 블록에 사용할 공백을 두 칸 또는 네 칸으로 선택하세요. 태그나 속성은 그대로 두고 출력 배치만 바뀝니다.

  3. 3

    결과 확인 후 사용하기

    원본과 비교한 뒤 프로젝트에 적합하면 복사하거나 다운로드하세요. 경고가 표시되면 정리된 결과는 제공되지 않습니다.

바뀌는 부분과 유지되는 부분

이 도구는 문장 속 태그를 기준으로 텍스트를 나누지 않으면서 구조가 분명한 블록에 들여쓰기를 적용합니다. 예를 들어 다음처럼 한 줄로 된 HTML을

<main><section><h2>뉴스</h2><p>자세한 내용은 <a href="/news">최신 소식</a>을 읽어보세요.</p></section></main>

다음과 같이 배치할 수 있습니다.

<main>
  <section>
    <h2>뉴스</h2>
    <p>자세한 내용은 <a href="/news">최신 소식</a>을 읽어보세요.</p>
  </section>
</main>

링크 앞뒤의 단어와 href 값은 입력한 그대로 유지됩니다. 프로젝트 규칙에 맞춰 네 칸 들여쓰기로 바꿀 수도 있습니다. 속성 정렬, 따옴표 변경, 문자 참조 재작성, 코드 압축, HTML 복구는 하지 않습니다.

요소 사이 공백은 CSS, 스크립트, 템플릿에 영향을 줄 수 있습니다. 구조가 분명한 블록을 들여쓰면 태그 사이에 줄바꿈과 공백이 추가될 수 있습니다. 공백 처리에 민감한 문서에는 결과를 비교한 뒤 사용하세요. <pre>, <code>, <textarea>, <script>, <style>의 내용은 입력한 그대로 유지합니다.

잘못된 마크업이나 생략된 닫는 태그에 의존하는 마크업처럼 구조를 안전하게 판단할 수 없는 경우에는 입력을 변경하지 않고 경고를 표시합니다. 정리된 결과는 생성되지 않습니다. 이 경고는 정리 가능 여부를 알려 줄 뿐, HTML의 유효성을 판정하지 않습니다. 표준 준수 여부를 확인하려면 HTML 검사기를 사용하세요.

자주 묻는 질문

아니요. 구조가 분명할 때만 들여쓰기를 바꿉니다. 모든 HTML 오류를 찾아내거나 빠진 태그를 추가하지는 않습니다. 경고가 표시되면 확신을 갖고 정리할 수 없었다는 뜻입니다.

인라인 요소 주변의 공백을 포함해 인라인 텍스트를 한데 유지합니다. 다만 구조가 분명한 블록 요소 사이에 공백이 추가될 수 있으므로 공백에 민감한 템플릿에서는 사용 전 결과를 비교하세요.

완전한 pre, code, textarea, script, style 블록은 입력한 그대로 유지됩니다. 블록 내부는 다시 정리하지 않습니다.

정리는 브라우저에서 이루어집니다. 여러 단계를 이동하는 동안 이 탭의 세션 저장소에 입력 내용을 보관합니다.

닫는 태그를 생략해 들여쓰기 위치가 불확실하면 입력을 변경하지 않고 정리된 결과 없이 경고를 표시합니다. 일관된 배치를 원한다면 닫는 태그를 명시하세요.

관련 도구

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

Webpack 설정 생성기

순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.

XML 포매터

일관된 들여쓰기로 XML 문서를 정렬 출력하고, 정확한 줄 번호로 적격성 오류를 잡아냅니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

Protocol Buffers 디코더

hex, Base64, Base64URL, 텍스트 또는 파일의 Protobuf 와이어 형식 바이트를 브라우저에서 디코딩하고 정확한 필드 후보를 확인한 뒤 비공개 보고서로 내보냅니다.

텍스트 파일 인코딩 변환기

깨진 문자를 고치기 위해 텍스트를 UTF-8, UTF-16, Latin-1, Windows-1252 등 여러 인코딩 사이에서 변환하세요.

이 도구는 다른 언어로도 제공됩니다