0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
설정
일관된 들여쓰기와 읽기 쉬운 구조로 HTML 코드를 포맷하세요. 들여쓰기와 줄 간격을 설정하고, 코드를 에디터에 붙여넣은 후 포맷하세요.
소스 코드
라인:0캐릭터:0
작동 방식
HTML 문서를 정리하고 다시 들여써서 태그 계층이 명확하고 일관되도록 합니다. 축소된 마크업의 중첩을 풀거나 다른 사람의 템플릿을 검토하거나 뷰의 스타일을 표준화하는 데 이상적입니다.
들여쓰기 종류·크기와 줄 끝 외에도, 속성을 어떻게 줄바꿈할지(예: 한 줄에 하나)와 줄바꿈 전 최대 줄 길이를 제어할 수 있어, 속성이 많은 태그에 유용합니다.
모든 처리는 js-beautify로 브라우저에서 이루어지며 pre, textarea 같은 블록의 내용을 존중합니다. 표현 형식만 정리하며, HTML을 검증하거나 누락된 태그를 닫지 않습니다.
예시
<ul><li><a href="/a">A</a></li><li>B</li></ul><ul>
<li><a href="/a">A</a></li>
<li>B</li>
</ul>중첩된 각 요소는 해당 들여쓰기와 함께 자체 줄에 놓입니다.활용 사례
- 페이지의 축소된 HTML 마크업의 중첩을 풀고 읽기 쉽게 만들기.
- 커밋 전에 템플릿의 들여쓰기를 표준화하기.
- 속성이 많은 태그에서 속성 줄바꿈을 제어하기.
- 중첩 테이블이 있는 이메일이나 뉴스레터 조각을 검토하기.
자주 묻는 질문
속성 줄바꿈 옵션은 무엇을 하나요?
태그 속성을 어떻게 배치할지 정합니다: 같은 줄에, 한 줄에 하나씩 강제, 또는 정렬. 요소에 속성이 많아 가독성을 높이고 싶을 때 유용합니다.
pre나 textarea의 내용이 깨지나요?
아니요. 포매터는 공백과 줄바꿈이 의미를 갖는 pre, textarea 같은 태그의 내용을 존중하며 다시 들여쓰지 않습니다.
HTML을 검증하거나 고치나요?
아니요. 들여쓰기와 줄바꿈만 재배치합니다. 태그가 올바르게 닫혔는지 확인하거나 마크업 오류를 고치지 않습니다.
내 코드가 서버에 업로드되나요?
아니요. 서식 지정은 모두 브라우저에서 이루어지며, HTML은(는) 컴퓨터를 벗어나지 않습니다.