마크업에 줄바꿈이나 들여쓰기가 제대로 되어 있지 않아 읽기 어려울 때 줄바꿈과 들여쓰기를 대신 하는 프로그램입니다. 아래 "포맷" 버튼을 눌러보세요.
기존 마크업을 리팩토링한다거나, CMS에서 생성한 마크업을 검토하려고 할 때 줄바꿈과 들여쓰기가 엉망일 때가 많아서 작업이 힘들었습니다. 한동안 HTMLTidy 플러그인을 썼었는데, 이 플러그인은 빈 요소를 지우고 닫는 태그를 삽입하는 등 마크업을 강제로 바꿔버립니다. XHTML 문서로만 작업할 때는 상관이 없었는데, HTML 5로 넘어오면서 Tidy 플러그인이 HTML 5의 문법을 인식하지 못하기 때문에 골치아픈 일이 많았습니다.
Tidy 플러그인도 언젠가는 5 문법을 인식하도록 업그레이드 되겠지만, 제 생각에는 마크업을 강제로 수정하는 것은 썩 좋아보이지 않았습니다. 이를 보완하기 위해 원래 마크업이 틀렸든 맞든 신경쓰지 않고 틀리면 틀린대로, 맞으면 맞는대로 읽기 쉽게 줄바꿈과 들여쓰기만 넣는 프로그램을 만들었습니다.
맨 위에 있는 textarea에 정렬을 원하는 마크업을 붙여넣고 "포맷" 버튼을 누르시면 정렬된 내용이 textarea에 나타납니다. 자동으로 textarea 내용을 전체선택 하므로 다른 프로그램에서 사용하려면 Ctrl-C 만 누르시면 됩니다.
이 프로그램은 온전히 자바스크립트로만 만들었고 어떤 내용도 서버로 전송하거나 수집하지 않습니다.
문자열 길이가 0이 될 때까지 반복한 후 output을 반환합니다.
태그를 정확히 닫지 않으면 문제가 생깁니다.
<table>
<tr>
<td>td 1...
<tr>
<td>td 2...
</table>
위 마크업 구조는 XHTML에서는 유효성 검사에 걸리지만, HTML로서는 올바른 마크업입니다. 하지만 이 프로그램은 암시적인 닫는 태그를 만들지 못하므로(만들 계획도 없습니다. 이 프로그램의 작성 목적은 마크업을 수정하지 않는 것입니다), "닫는 태그에서 들여쓰기 칸 수를 줄이지 못해서" 이런 웃기는 모양이 됩니다.
<table>
<tr>
<td>td 1...
<tr>
<td>td 2...
</table>
td 뒤에 /td 없이 tr이 나왔다면 /td가 생략된 것이라고 인식하고 들여쓰기를 조절해야 맞지만, HTML 문법이 지나치게 관대하기 때문에 이 모든 경우의 수를 감안해서 조절하기는 매우 어렵습니다. 이 문제는 당분간 해결하지 못할 것으로 생각합니다. 이 프로그램은 마크업 구조는 전혀 손대지 않고 줄바꿈문자와 스페이스만 삽입하므로 모양은 우습겠지만 브라우저에는 똑같이 표현됩니다.
댓글 (29)