HTML 정리
읽으려면 펼치고, 보내려면 줄이고.
예제는 입력과 설정을 일시적으로 바꿉니다. 이전 작업을 복원할 수 있습니다.
0자
출력
위에 붙여넣거나 입력하면 여기에 결과가 표시됩니다.
파일은 내 기기 밖으로 나가지 않습니다
이 도구는 브라우저 안에서만 작동합니다. 붙여넣은 내용은 기기에서 처리되고 서버로 전송되지 않으므로 토큰, 키, 공개 전 문서도 안심하고 사용할 수 있습니다.
사용 예시
에디터에서 줄을 바꿔 쓴 동아리 공지, 띄어쓰기를 지키며 정리하기
사진 동아리 모집 공지 HTML은 에디터에서 직접 줄을 바꿔 가며 쓴 6줄, 122자입니다. 굵게 쓴 모집 기간과 기울여 쓴 인원 사이에서 줄이 바뀌어 있습니다. 「보기 좋게 정리」와 공백 4칸으로 붙여넣습니다.
- 11줄이 됩니다. div, h2, p가 각각 줄을 따로 차지하고, 안의 글은 한 단계 들여 씁니다.
- 「9월 1일~12일,」 뒤의 줄바꿈은 공백 하나가 되어 「모집 기간은 9월 1일~12일, 선착순 20명입니다.」가 한 줄로 이어집니다. 줄바꿈도 화면에서는 띄어쓰기로 보이기 때문입니다.
- 「20명입니다」처럼 태그를 사이에 두고 붙어 있던 곳에는 공백이 생기지 않습니다.
- 「압축」으로 바꾸면 122자가 117자가 되고, 그 공백 하나는 그대로 남습니다.
| 설정 | 줄 | 글자 수 |
|---|---|---|
| 원본 | 6 | 122 |
| 보기 좋게 정리, 공백 4칸 | 11 | 175 |
| 보기 좋게 정리, 공백 2칸 | 11 | 151 |
| 원본을 압축 | 1 | 117 |
어느 설정이든 화면에는 「모집 기간은 9월 1일~12일, 선착순 20명입니다.」가 똑같이 띄어 쓰여 보입니다. 정리된 11줄은 고치기 쉽고, 117자 한 줄은 그대로 게시판에 붙여 넣을 수 있습니다.
사용 방법
- HTML을 붙여넣습니다. 입력하는 대로 정리됩니다.
- 「압축」으로 바꾸면 들여쓰기와 주석을 걷어냅니다.
- 공백 2칸·4칸·탭 중에서 고릅니다.
- 결과를 복사하거나 파일로 내려받습니다.
자주 묻는 질문
- 조금 어긋난 문서도 정리되나요?
- 됩니다. 마크업을 트리로 파싱하지 않고 태그와 텍스트의 흐름으로 읽습니다. 정리하고 싶은 HTML은 대개 「이해하려고 하는 HTML」이고, 그것을 거부하는 도구는 쓸모가 없기 때문입니다. 닫지 않은 태그도 그대로 통과합니다.
- 글 사이의 공백이 깨지지 않나요?
- 깨지지 않습니다. 이 일에서 가장 까다로운 부분입니다. <b>하나</b>와 <i>둘</i> 사이의 공백은 화면에 나오므로 남기고, <div> 앞뒤의 공백은 나오지 않으므로 없앱니다. 인라인 요소는 주변 낱말과 같은 줄에 남습니다.
- <pre> 안은 건드리나요?
- 한 글자도 건드리지 않습니다. <pre>와 <textarea> 안의 공백은 모두 화면에 나오므로 쓰인 그대로 내보내고, 왼쪽으로 당기지도 않습니다. script와 style은 공백에 의미가 없으므로 태그 아래로 맞춥니다.
- 압축하면 이름이 바뀌나요?
- 바뀌지 않습니다. 주석과 화면에 영향 없는 공백만 없앱니다. 이름도 순서도 그대로라 나온 문서는 넣은 문서와 똑같이 보입니다.
- 압축하면 <style>이나 <script> 안의 CSS·JavaScript도 줄어드나요?
- 줄어들지 않습니다. 코드 앞뒤의 공백만 없애고, 안쪽의 공백과 줄바꿈은 쓴 그대로 남습니다. 두 줄로 쓴 <style>은 두 줄로 나옵니다. 코드 자체를 줄이려면 먼저 CSS 정리나 JavaScript 압축을 거치세요.
- 입력한 내용이 어디로 전송되나요?
- 아니요. 브라우저 안에서 동작하므로 붙여넣은 내용은 내 컴퓨터를 떠나지 않습니다.