HTML 엔티티 인코더 / 디코더

HTML 엔티티는 HTML 소스 코드에서 특정 문자를 나타내는 짧은 텍스트 시퀀스입니다. `<`와 `>`는 HTML 태그의 경계를 나타내기 때문에 콘텐츠 안에서 `<`를 그대로 사용하면 태그 시작으로 오해할 수 있습니다. 이런 문자는 `&lt;`처럼 엔티티로 표기해야 합니다.

HTML 엔티티에는 두 가지 형태가 있습니다. 명명 엔티티는 `&`와 `;` 사이에 읽기 쉬운 이름을 사용합니다. 예를 들어 `&amp;`는 앰퍼샌드(&), `&copy;`는 저작권 기호, `&mdash;`는 em 대시입니다. 숫자 엔티티는 10진수 또는 16진수 유니코드 코드포인트를 사용합니다. `&#169;`와 `&#xA9;`는 모두 © 저작권 기호를 나타냅니다.

모든 개발자가 알아야 할 다섯 가지 예약된 HTML 문자:

• `&amp;` – 앰퍼샌드 `&`
• `&lt;` – 보다 작은 부호 `<`
• `&gt;` – 보다 큰 부호 `>`
• `&quot;` – 큰따옴표 `"`
• `&#39;` – 작은따옴표 / 아포스트로피 `'`

이 다섯 가지 외에도 HTML은 수백 가지 다른 문자를 위한 명명 엔티티를 정의합니다. 악센트 문자(`&eacute;` = é), 줄 바꿈 없는 공백(`&nbsp;`), 타이포그래피 구두점(`&mdash;`, `&ldquo;`, `&rdquo;`), 통화 기호(`&euro;` = €), 수학 기호, 그리스 문자 등이 포함됩니다.

HTML 문서에 일반 텍스트를 삽입할 때 그 텍스트에 HTML 예약 문자가 포함될 수 있다면 반드시 인코딩해야 합니다. 가장 흔한 상황:

• 원시 HTML을 저장하는 CMS나 템플릿에 사용자 생성 콘텐츠나 블로그 텍스트를 붙여넣을 때.
• 블로그 게시물이나 문서 페이지에 코드 예제를 삽입할 때. `<strong>굵게</strong>` 같은 스니펫은 `&lt;strong&gt;굵게&lt;/strong&gt;`로 인코딩해야 브라우저가 텍스트로 렌더링합니다.
• HTML `<script>` 태그 안에 삽입된 JSON 페이로드를 구성할 때. `<`, `>`, `&`가 주변 HTML 구조를 깨뜨릴 수 있습니다.
• 큰따옴표가 포함될 수 있는 속성 값을 저장할 때. 주변 `"..."` 구분자가 깨지지 않도록 합니다.
• HTML 이메일 템플릿용 특수 문자를 인코딩할 때.

예약된 다섯 문자만 이스케이프하면 되는 경우에는 기본 모드를 사용하세요. 최대 HTML 호환성이 필요하거나 ASCII만 지원하는 레거시 시스템에는 확장 모드를 사용하세요.

이미 이스케이프된 텍스트를 받고 원본 문자를 읽거나 처리하거나 표시해야 할 때 HTML 엔티티를 디코딩합니다. 검색 용어로는 HTML decode, HTML unescape, HTML 인코딩된 텍스트를 일반 텍스트로 변환 등으로 불립니다. 일반적인 상황:

• API 응답의 문자열 필드에 HTML 이스케이프된 텍스트가 있을 때. 예를 들어 `Tom & Jerry`를 기대했는데 `Tom &amp; Jerry`가 반환되는 경우. HTML 엔티티를 텍스트로 변환해야 합니다.
• CMS가 이중 인코딩하여 `&lt;` 또는 `<` 대신 `&amp;lt;` 같은 문자열이 생성된 경우.
• 텍스트 콘텐츠가 HTML 인코딩되어 있는 RSS 또는 Atom 피드 항목을 읽을 때.
• HTML 이스케이프된 쿼리 파라미터나 오류 메시지가 포함된 로그 라인을 확인할 때.
• 콘텐츠가 엔티티로 저장된 HTML 소스 파일에서 보이는 텍스트를 복사할 때.

이 도구는 명명 엔티티(`&amp;`, `&copy;`, `&mdash;`, `&nbsp;` 등 수백 가지)와 10진수(`&#169;`) 및 16진수(`&#xA9;`) 숫자 엔티티를 모두 디코딩합니다.

이 인코더는 두 가지 인코딩 상세 수준을 제공합니다.

기본 모드는 다섯 가지 예약된 HTML 문자만 인코딩합니다: `&` → `&amp;`, `<` → `&lt;`, `>` → `&gt;`, `"` → `&quot;`, `'` → `&#39;`. 악센트 문자(`é`, `ü`), 기호(`©`, `—`), 이모지(😀) 등 다른 모든 문자는 변경 없이 그대로 출력됩니다. 대상 환경이 유니코드를 네이티브로 지원하는 경우 기본 모드를 사용하세요.

확장 모드는 동일한 다섯 가지 예약 문자를 인코딩하면서 추가로 모든 비 ASCII 문자를 10진수 숫자 엔티티로 변환합니다. 예를 들어 `é` → `&#233;`, `©` → `&#169;`, `—` → `&#8212;`, 😀 → `&#128512;`. 순수 ASCII 출력이 필요하거나 레거시 시스템을 위해 확장 모드를 사용하세요.

개발자들은 같은 작업을 htmlDecode, htmlEncode, HTML escape, HTML unescape, HTML 인코딩, HTML 디코딩 등 다양한 용어로 검색합니다. 표현이 다를 뿐 목적은 동일합니다: 읽을 수 있는 문자와 HTML 엔티티 표현 간의 안전한 변환.

기본 모드 왕복 변환 예시:

• 입력: `Café & © 😀`
• 인코딩 (기본): `Café &amp; © 😀`
• 디코딩: `Café & © 😀`

확장 모드 왕복 변환 예시:

• 입력: `Café & © 😀`
• 인코딩 (확장): `Caf&#233; &amp; &#169; &#128512;`
• 디코딩: `Café & © 😀`

HTML 엔티티 인코딩과 URL 인코딩(퍼센트 인코딩)은 목적도 출력 형식도 완전히 다른 두 가지 별개의 메커니즘입니다. 둘 다 특수 문자를 대체 표현으로 변환하지만 쓰임새가 전혀 다릅니다.

HTML 엔티티 인코딩은 HTML 문서용입니다. HTML 마크업에서 특별한 의미를 가진 문자를 엔티티 시퀀스로 대체하며, HTML 파서는 이를 텍스트 콘텐츠로 처리합니다. `&amp;`는 브라우저에서 `&`로 표시됩니다.

URL 인코딩(퍼센트 인코딩)은 URL용입니다. URL에서 안전하지 않거나 예약된 문자를 퍼센트로 인코딩된 바이트 시퀀스로 대체합니다. 공백은 `%20`, 앰퍼샌드는 `%26`, 보다 작은 부호는 `%3C`가 됩니다.

두 시스템에서 같은 문자의 비교:

• `&` – HTML: `&amp;`, URL: `%26`
• `<` – HTML: `&lt;`, URL: `%3C`
• `>` – HTML: `&gt;`, URL: `%3E`
• `"` – HTML: `&quot;`, URL: `%22`
• `'` – HTML: `&#39;`, URL: `%27`

HTML 인코딩된 텍스트를 URL 인코더에 붙여넣으면 엔티티 문자 자체(`&`, `;`, `#`)가 인코딩되어 원하는 결과가 나오지 않습니다. HTML 엔티티 디코딩·인코딩, HTML 인코딩된 텍스트 변환에는 이 페이지를 사용하세요.

HTML 엔티티 인코딩(이 도구)은 문자를 HTML 엔티티 동등물로 변환하고 그 반대도 수행합니다. HTML 요소를 추가하거나 제거하거나 재구성하지 않습니다. 문서 구조는 그대로 유지되며 특수 문자의 표현 방식만 달라집니다.

HTML 정리(클리닝)는 다른 작업으로 HTML 마크업을 제거하거나 다시 작성합니다. 원치 않는 태그 삭제, 속성 정규화, 잠재적으로 위험한 콘텐츠 sanitize 등을 수행합니다. 정리 함수는 `<b onclick="...">굵게</b>`를 `<b>굵게</b>` 또는 단순히 `굵게`로 변환할 수 있습니다.

이 도구는 HTML을 정리하지 않습니다. 인코더에 원시 HTML을 붙여넣으면 마크업의 꺾쇠 괄호와 예약 문자를 인코딩하여 `<p>안녕하세요</p>`를 `&lt;p&gt;안녕하세요&lt;/p&gt;`로 변환합니다. 요소를 검사하거나 삭제하거나 재구성하지 않습니다.

또한 이 도구는 텍스트 클리너도 아닙니다. 여분의 공백 제거, 악센트 제거, 줄 바꿈 정규화를 수행하지 않습니다. HTML 엔티티 인코딩과 디코딩만이 이 도구의 유일한 역할입니다.