HTML Formatter·Encoder 작동 원리
HTML Formatter는 태그, 주석과 텍스트 토큰을 구분하고 여는 태그와 닫는 태그의 깊이에 맞춰 공백 두 칸을 넣습니다. img, br, meta처럼 닫는 태그가 없는 void 요소는 깊이를 늘리지 않습니다. HTML Encoder는 &, <, >, 큰따옴표와 작은따옴표를 각각 엔티티로 바꾸어 코드 자체를 문서 안에 텍스트로 표시할 수 있게 합니다. Decoder는 엔티티를 원래 문자로 돌립니다. 인코딩은 브라우저 보안 정책을 대신하지 않으며 출력 위치에 맞는 escaping이 필요합니다.
이 페이지의 계산과 변환은 모두 현재 브라우저에서 실행됩니다. 원문과 결과를 ReadyTools 서버에 전송하거나 데이터베이스에 저장하지 않으며, 입력 내용은 localStorage에도 기록하지 않습니다. 다만 운영체제나 브라우저의 클립보드 기록, 확장 프로그램, 화면 공유 기능은 사이트 밖의 영역이므로 민감한 데이터는 테스트용으로 바꾸어 사용하는 편이 안전합니다.
HTML Formatter·Encoder 사용 방법
입력 형식 확인
페이지에 표시된 입력 예시와 형식을 확인하고 분석하거나 변환할 데이터를 붙여 넣습니다. 오류 안내가 나오면 강조된 항목의 문법과 범위를 먼저 확인하세요.
브라우저에서 실행
실행 버튼을 누르면 외부 API 호출 없이 현재 탭에서 처리됩니다. 모바일에서는 완료 후 결과 카드로 자동 이동하며 키보드만으로도 모든 항목을 조작할 수 있습니다.
결과 검토·복사
결과의 구조와 주의사항을 확인한 뒤 복사 버튼을 사용합니다. 실제 프로젝트에 반영하기 전에는 대상 언어, 서비스와 데이터 규칙에 맞는지 다시 테스트하세요.
구체적인 상황으로 이해하는 활용 예시
다음 세 상황은 도구의 처리 과정과 결과 해석을 설명하기 위한 가상 예시입니다. 입력 조건을 바꾸면 결과도 달라지므로 자신의 조건과 비교해 확인하세요.
1. 태그 예시를 텍스트로 인코딩
HTML 인코딩에서 <b>1</b>를 넣으면 <b>1</b>라는 엔티티 문자열이 됩니다. 문서에 태그 코드를 보이게 쓰는 용도이며 숫자 1의 의미는 바뀌지 않습니다. 결과를 어느 HTML 맥락에 넣는지에 따라 필요한 처리가 달라지므로 인코딩 하나로 모든 삽입 보안이 해결되는 것은 아닙니다.
2. 엔티티를 한 단계 디코딩
&lt;를 디코딩하면 <가 됩니다. 원문에 인코딩이 두 번 적용되었다면 한 번 처리한 뒤에도 엔티티가 남을 수 있습니다. 디코딩 결과를 화면에 코드로 표시하는 것과 실행 가능한 HTML로 삽입하는 것은 다르며, 신뢰하지 않는 입력을 그대로 innerHTML에 넣지 마세요.
3. 중첩된 두 태그를 정리
<div><p>예시</p></div>를 정리하면 div 안의 p가 한 단계 들여쓰기되어 구조를 확인할 수 있습니다. 이 기능은 단순 토큰 기준 포매터이며 태그를 잘못 닫은 문서의 의미를 고치거나 접근성을 보장하지 않습니다. 스크립트·스타일·템플릿이 섞이면 원본 보관 후 정리 결과를 대조하세요.
블로그나 기술 문서에 HTML 예제를 그대로 보여주려면 Encoder로 태그 문자를 변환할 수 있습니다. CMS에서 받은 엔티티 문자열을 읽기 위해 Decoder를 사용하고, 압축된 간단한 마크업은 Formatter로 구조를 확인합니다. script, style, pre 안의 내용이나 템플릿 문법은 일반 태그와 다른 규칙을 가지므로 자동 정리 후 반드시 원본과 비교하세요. HTML 유효성 검사와 접근성 검사는 별도의 검사 도구가 필요합니다.
주의사항
디코딩한 HTML을 innerHTML로 바로 삽입하면 XSS 위험이 생길 수 있습니다. 신뢰할 수 없는 문자열은 출력 맥락에 맞는 검증과 sanitizing을 거쳐야 합니다. 포매터는 완전한 HTML 파서나 코드 포매터가 아니므로 스크립트 안의 비교 연산자, 서버 템플릿과 잘못 닫힌 태그를 정확히 처리하지 못할 수 있습니다.