DevTools

HTML 포매터

Ali Hub DevTools에서 HTML 포매터을(를) 사용하세요. 명확한 입력 확인, 결과, 개인정보 보호 정보 및 문서화된 제한을 제공합니다.

기본 입력

저장소는 도구가 브라우저 로컬, 버전 관리, 범위 제한, 삭제 가능, 비민감 데이터임을 명시한 경우에만 사용됩니다.

이 도구 설치

빠르게 사용할 수 있도록 이 도구를 기기에 추가합니다.

HTML 포매터

요소, 속성, 텍스트, 주석과 문서 구조를 유지하면서 HTML에 일관된 들여쓰기를 적용합니다.

Make HTML structure easier to inspect

압축된 HTML은 중첩과 속성, 텍스트, 주석을 한 줄에 숨길 수 있습니다. 이 도구는 검토하기 쉬운 레이아웃을 보여 줍니다.

서식은 표시만 바꾸며 유효성, 접근성, 보안 또는 브라우저 호환성을 증명하지 않습니다. 원본과 diff를 보관하세요.

중첩 요소, 속성, 텍스트, 주석과 엔티티가 있는 샘플을 사용하고 필요한 검사를 실행하세요.

Formatting is not HTML validation

HTML은 요소, 속성, 텍스트, 주석과 선언의 트리입니다. 들여쓰기는 부모 자식 관계와 종료 태그를 보여 줍니다.

Formatter는 공백을 정리하지만 표준, 접근성, 보안, 템플릿 규칙과 동작을 검증하지 않습니다.

브라우저는 잘못된 markup을 다르게 복구할 수 있으므로 void 요소, 선택 태그, script, style과 entity를 확인하세요.

How to format HTML

  1. 완전한 HTML 문서나 지원되는 조각을 입력합니다.
  2. 중첩, 태그, 속성, 텍스트, 주석, script와 style을 확인합니다.
  3. 값, entity, 텍스트와 순서를 원본과 비교합니다.
  4. HTML, 접근성, 템플릿과 브라우저 테스트를 실행합니다.
  5. 샘플에서 인증정보와 개인정보를 제거합니다.

Formatting method

  • 요소, 속성, 텍스트,

    요소, 속성, 텍스트, 주석, 선언과 내장 영역을 읽습니다.

  • 줄바꿈과 들여쓰기를 추가해

    줄바꿈과 들여쓰기를 추가해 중첩과 순서를 보입니다.

  • 원본의 값, 텍스트,

    원본의 값, 텍스트, 주석, entity, script와 style을 유지합니다.

parser 복구, 선택 태그, 공백, 내장 언어와 정확한 오류는 실제 엔진에서 확인해야 합니다.

Read the formatted result

성공 결과는 입력 HTML의 읽기 쉬운 배치입니다. 구조, 속성, 텍스트, 주석, entity와 script를 원본과 확인하세요.

실패는 브라우저 복구나 특정 parser 오류를 증명하지 않습니다.

validator, 접근성 또는 build 문제는 별도 계약이며 서식은 의미나 보안을 추가하지 않습니다.

흔한 실수

들여쓰기를 검증으로 오해하면 속성 누락, 잘못된 중첩과 접근성 문제를 놓칠 수 있습니다.

entity, 속성 또는 공백 민감 텍스트를 바꾸면 동작이 달라집니다.

브라우저 복구가 formatter 출력과 같다고 가정하지 마세요.

비공개 템플릿, 토큰과 사용자 데이터를 붙여 넣지 마세요.

제한 사항 및 특수 사례

이 기능은 HTML 표시 형식이며 표준, 접근성, 보안, 호환성, 템플릿 정확성이나 minify를 보장하지 않습니다.

선택 태그, void 요소, CSS, JavaScript, entity와 큰 문서는 대상 도구로 시험하세요.

정책이 허용하지 않으면 기밀 markup을 입력하지 마세요.

Examples

서식이 HTML을 검증하나요?

서식이 HTML을 검증하나요?

완전한 HTML 문서나 지원되는 조각을 입력합니다.

성공 결과는 입력 HTML의 읽기 쉬운 배치입니다. 구조, 속성, 텍스트, 주석, entity와 script를 원본과 확인하세요.

페이지 동작이 바뀌나요?

페이지 동작이 바뀌나요?

중첩, 태그, 속성, 텍스트, 주석, script와 style을 확인합니다.

실패는 브라우저 복구나 특정 parser 오류를 증명하지 않습니다.

속성이 보존되나요?

속성이 보존되나요?

값, entity, 텍스트와 순서를 원본과 비교합니다.

validator, 접근성 또는 build 문제는 별도 계약이며 서식은 의미나 보안을 추가하지 않습니다.

주석이 보존되나요?

주석이 보존되나요?

HTML, 접근성, 템플릿과 브라우저 테스트를 실행합니다.

성공 결과는 입력 HTML의 읽기 쉬운 배치입니다. 구조, 속성, 텍스트, 주석, entity와 script를 원본과 확인하세요.

fragment를 정렬할 수 있나요?

fragment를 정렬할 수 있나요?

샘플에서 인증정보와 개인정보를 제거합니다.

실패는 브라우저 복구나 특정 parser 오류를 증명하지 않습니다.

접근성이 좋아지나요?

접근성이 좋아지나요?

완전한 HTML 문서나 지원되는 조각을 입력합니다.

validator, 접근성 또는 build 문제는 별도 계약이며 서식은 의미나 보안을 추가하지 않습니다.

Frequently asked questions

서식이 HTML을 검증하나요?

아니요. HTML validator, 접근성, 브라우저와 템플릿 테스트를 사용하세요.

페이지 동작이 바뀌나요?

지원 입력에서는 표시 공백만 바뀌어야 하지만 비교하고 시험하세요.

속성이 보존되나요?

예제는 이름과 값을 유지하며 중요한 URL, class, id는 diff로 확인합니다.

주석이 보존되나요?

예제는 주석을 유지하므로 실제 입력에서 확인하세요.

fragment를 정렬할 수 있나요?

완전한 문서나 지원되는 조각을 사용하세요.

접근성이 좋아지나요?

아니요. semantics, focus, contrast와 ARIA는 별도 검사가 필요합니다.

잘못된 HTML을 고치나요?

자동 복구를 가정하지 말고 원본을 수정해 검증하세요.

서식 후 무엇을 하나요?

diff를 검토하고 validator와 접근성 테스트를 실행한 뒤 대상 브라우저에서 렌더링하세요.

References