WebTools

Useful Tools & Utilities to make life easier.

HTML Entity Encode

특수 문자를 HTML 안전 엔티티 코드로 변환합니다.

HTML 엔티티 인코딩이란?

HTML에서 <, >, & 같은 기호는 태그의 시작·끝이나 특수 표기를 나타내는 구조 문자입니다. 그래서 이 기호를 글 내용으로 그대로 쓰면 브라우저가 태그로 오해해 화면이 깨지거나 코드가 사라집니다. 이럴 때 기호를 화면에는 원래 모양으로 보이되 브라우저가 태그로 착각하지 않도록 바꿔 주는 표기가 HTML 엔티티이고, 원문을 그 엔티티로 바꾸는 작업이 엔티티 인코딩입니다.

이 도구는 구조 문자와 일부 비ASCII 문자를 숫자 참조(numeric reference) 방식으로 바꿉니다. 즉 &lt; 같은 이름이 아니라 &#60;처럼 &#과 유니코드 10진수 번호, 세미콜론으로 표기합니다. 코드 조각을 블로그 글이나 문서에 그대로 보여 주고 싶을 때, 태그가 실행되지 않고 글자 그대로 나오게 하는 데 씁니다.

사용 방법

  1. 편집기 영역에 인코딩할 HTML이나 텍스트를 입력합니다.
  2. 아래의 변환 버튼을 누르면 편집기 안의 내용이 엔티티로 인코딩된 결과로 바뀝니다.
  3. 편집기 위쪽의 복사 버튼으로 결과를 클립보드에 담아 사용합니다.

결과가 입력 편집기에 그대로 덮어써지므로, 변환 전 원본은 따로 보관해 두는 것이 좋습니다. 반대로 엔티티를 원래 기호로 되돌리려면 HTML 엔티티 디코딩 도구를 사용하세요.

인코딩 예시

대표적인 구조 문자가 어떤 숫자 참조로 바뀌는지 정리하면 다음과 같습니다.

원래 문자인코딩 결과의미
<&#60;여는 꺾쇠(태그 시작)
>&#62;닫는 꺾쇠(태그 끝)
&&#38;앰퍼샌드

예를 들어 <p>를 넣으면 &#60;p&#62;로 바뀝니다. 이 결과를 HTML 문서에 넣으면 브라우저는 태그로 실행하지 않고 화면에 <p> 글자 그대로 보여 줍니다. 참고로 이 도구는 <·>·&와 유니코드 U+00A0부터 U+9999까지의 문자만 바꾸며, 그 범위 밖인 일반 한글 음절(가∼힣)은 건드리지 않고 그대로 둡니다. 그래서 한글 설명은 읽기 좋게 유지되고 위험한 구조 문자만 안전해집니다.

자주 묻는 질문

&lt;가 아니라 &#60;으로 나오나요?

HTML 엔티티에는 이름을 쓰는 방식(&lt;)과 번호를 쓰는 방식(&#60;) 두 가지가 있습니다. 둘은 화면에 보이는 결과가 완전히 같습니다. 이 도구는 어떤 문자든 규칙적으로 처리할 수 있는 숫자 참조 방식을 사용합니다. 이름 방식이 꼭 필요하다면 결과를 받아 &#60;&lt;로 손수 바꾸면 됩니다.

한글이나 이모지는 왜 그대로인가요?

이 도구는 유니코드 U+9999까지의 문자만 인코딩 대상으로 봅니다. 일반적인 한글 음절과 대부분의 이모지는 그보다 뒤 번호라 변환하지 않고 그대로 둡니다. HTML에서 정말 문제를 일으키는 것은 <·>·&이므로, 이 핵심 기호만 확실히 처리하면 대개 충분합니다.

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

아닙니다. 인코딩 처리는 접속한 분의 브라우저 안에서 자바스크립트로 이루어지며, 입력한 내용이 서버로 올라가지 않습니다. 외부에 노출하기 민감한 코드도 안심하고 넣을 수 있습니다.