HTML 포매터
이 HTML 포매터로 HTML 조각을 정리하세요. 마크업을 붙여넣으면 div, section, p, ul, table과 같은 블록 요소를 각각 별도 줄에 배치하고 공백 두 칸으로 들여씁니다. 인라인 콘텐츠의 불필요한 공백은 줄이고, 인라인 CSS 및 JavaScript 형식을 지정하며, pre와 textarea의 내용은 그대로 유지합니다. 붙여넣었거나 생성된 또는 압축된 마크업을 읽고 검토하기 좋게 정리하려는 웹 개발자와 디자이너에게 적합합니다.
자주 묻는 질문
HTML 포매터는 줄바꿈 위치를 어떻게 결정하나요?
div, section, article, header, footer, nav, main, form, p, h1에서 h6, ul, ol, table 또는 blockquote와 같이 블록 수준의 자식 요소를 포함하는 요소는 확장되어 각 자식 요소가 별도의 줄에 놓이고 공백 두 칸으로 들여쓰기됩니다. 블록 자식 요소가 없는 요소는 한 줄로 유지됩니다.
전체 HTML 문서가 한 줄로 반환되는 이유는 무엇인가요?
포매터 규칙에서 html, head 및 body 요소는 블록 수준 태그가 아니므로, 이 요소들로 감싼 문서는 doctype을 제외하면 인라인 상태로 유지됩니다. 내용을 확장된 형태로 출력하려면 body 안의 내용이나 작업 중인 조각을 붙여넣으세요.
공백은 어떻게 처리되나요?
인라인 콘텐츠 안의 연속된 공백, 탭 및 줄바꿈은 하나의 공백으로 줄어들며, 이는 브라우저의 렌더링 방식과 일치합니다. pre 및 textarea 요소의 내용은 공백이 작성된 그대로 유지됩니다.
인라인 script와 style도 형식이 지정되나요?
예. style 블록은 CSS 형식으로, script 블록은 JavaScript 형식으로 정리됩니다. JSON 및 JSON-LD 유형은 JSON 형식으로 정리됩니다. 텍스트 템플릿과 같은 다른 유형의 스크립트는 작성된 그대로 유지됩니다.
void 요소는 어떻게 작성되나요?
Self-closing 태그(예: <br/>)는 슬래시 앞에 공백을 넣어 <br />와 같이 씁니다. 슬래시 없이 작성한 <img src="a.png"> 같은 빈 요소는 원래 형식을 유지합니다.
속성도 변경되나요?
아니요. 속성, 따옴표 및 순서는 작성된 그대로 유지됩니다. 요소 사이의 공백만 재배치됩니다.
주석이 보존되나요?
예. HTML 주석과 doctype은 유지되며 각각 별도의 줄에 배치됩니다. 주석 처리된 마크업을 포함해 내용은 작성된 그대로 복사됩니다.
포매터가 잘못된 HTML를 수정하나요?
아니요. 마크업을 검증하거나 수정하지 않습니다. 닫히지 않은 태그도 가능한 범위에서 형식이 지정되므로 구조 오류를 찾아야 할 때는 검증기를 실행하세요.
결과가 html 코드 펜스로 감싸지는 이유는 무엇인가요?
결과는 html 표시가 있는 Markdown 코드 블록으로 반환되어 Markdown에서 구문 강조가 적용됩니다. .html 파일에 붙여넣을 때 펜스 사이의 줄을 복사하세요.
얼마나 많은 HTML를 형식 지정할 수 있나요?
실행당 최대 5 MB까지 가능합니다. 더 큰 입력은 메시지와 함께 거부됩니다. 출력은 Code Formatter의 HTML 옵션과 동일합니다.