HTML 정렬·포맷터 (HTML 코드 정리)

HTML 을 붙여 넣고 「HTML 정렬하기」를 누르면 Prettier 규칙으로 깔끔하게 정리돼요.

입력한 글과 파일은 서버로 보내지 않고 이 브라우저 안에서만 처리해요.

사용 방법

  1. HTML 을 붙여 넣고 「HTML 정렬하기」를 누르세요. 처음 한 번은 정리 도구를 내려받느라 조금 걸릴 수 있어요.
  2. 「들여쓰기」와 「한 줄 최대 글자 수」로 모양을 정해요. 줄이 이 길이를 넘으면 속성이나 내용을 다음 줄로 나눠요.
  3. 「공백 처리」 기본값은 화면 모양이 바뀌지 않도록 인라인 요소 주변 공백을 지켜요. 「공백 무시」를 고르면 더 깔끔해지지만 글자 사이 띄어쓰기가 달라질 수 있어요.
  4. 태그 짝이 맞지 않으면 오류 위치를 행·열로 알려 줘요. 구조를 더 자세히 보려면 HTML 검사기를 써 보세요.

자주 묻는 질문

어떤 규칙으로 정리하나요?

널리 쓰이는 오픈소스 코드 정리 도구 Prettier(MIT 라이선스)를 브라우저에서 그대로 돌려요. 편집기에서 Prettier 로 정리한 결과와 거의 같아요.

정리하면 화면 모양이 바뀌나요?

기본 설정에서는 보이는 모양이 바뀌지 않도록 공백을 다뤄요. 그래서 태그가 어색하게 줄을 넘기는 경우가 있어요. 「공백 무시」로 바꾸면 보기에는 깔끔하지만 인라인 요소 사이 띄어쓰기가 달라질 수 있어요.

코드가 서버로 전송되나요?

아니요. 정리 도구까지 브라우저로 내려받아 이 기기 안에서만 처리해요.

함께 쓰면 좋은 도구

전체 도구