HTML Entity Encoder/Decoder

This tool allows you to convert text with special characters to HTML entities and vice versa. HTML entities help display special characters correctly on web pages.

Mode

Text to Encode

Characters like <, >, &, " and ' will be converted to HTML entities

Encoded HTML

Common HTML Entities

Less than sign

Greater than sign

Ampersand

Double quotation mark

Single quotation mark

Registered trademark

HTML 엔티티 인코더/디코더 사용 방법

1
텍스트 입력
변환하려는 텍스트나 HTML 조각을 입력란에 붙여넣으세요.
2
인코딩 또는 디코딩 선택
특수문자를 HTML 엔티티로 바꾸려면 Encode를, 엔티티를 문자로 되돌리려면 Decode를 클릭하세요.
3
결과 확인
변환된 출력이 결과 패널에 즉시 표시됩니다.

4
출력 복사
Copy Result로 인코딩 또는 디코딩된 텍스트를 가져와 프로젝트에 사용하세요.

HTML 엔티티 실전 가이드

HTML 엔티티란

HTML 엔티티는, 좀 더 정식으로는 문자 참조라 하며, HTML에서 하나의 문자를 대신하는 짧은 코드입니다. 모든 엔티티는 앰퍼샌드(&)로 시작해 세미콜론(;)으로 끝납니다. 엔티티를 쓰면 브라우저가 마크업으로 오해할 만한 문자, 입력하기 어려운 문자, 키보드에 없는 문자를 소스 파일을 순수 ASCII로 유지하면서도 넣을 수 있습니다.

엔티티가 중요한 이유는 뚜렷이 두 가지입니다. 첫째, 몇몇 문자는 HTML 자체가 예약한 것이라 올바르게 표시하려면 반드시 이스케이프해야 합니다. 둘째, 기호, 악센트 글자, 통화 기호, 화살표, 이모지로 이루어진 광대한 세계를 파일의 텍스트 인코딩과 상관없이 참조로 안정적으로 쓸 수 있습니다. 이 도구는 문자를 엔티티로 인코딩하고, 엔티티를 그것이 나타내는 문자로 다시 디코딩합니다.

명명된 참조 대 숫자 참조

엔티티를 쓰는 방법은 두 가지가 있으며, 만들어 내는 결과 면에서는 서로 바꿔 쓸 수 있습니다. 명명된 참조는 사람이 읽을 수 있는 라벨을 사용합니다. 저작권 기호의 ©, 앰퍼샌드의 &, 줄바꿈 없는 공백의   같은 것이죠. HTML은 이런 이름의 고정된 목록을 정의하므로, 지정된 이름이 있는 문자만 이런 방식으로 쓸 수 있습니다.

숫자 참조는 이름 대신 문자의 Unicode 코드 포인트를 사용하며, 어떤 문자든 표현할 수 있습니다. 10진수 형태는 앰퍼샌드, 해시, 10진법으로 쓴 코드 포인트, 세미콜론으로 이루어집니다. 예를 들어 © 입니다. 16진수 형태는 해시 뒤에 x를 더하고 코드 포인트를 16진법으로 줍니다. 예를 들어 © 입니다. ©, ©, © 세 가지는 모두 동일한 © 기호를 렌더링하는데, 10진수 169가 16진수 A9이고 그것이 곧 저작권 코드 포인트이기 때문입니다.

항상 이스케이프해야 하는 다섯 가지

대부분의 문자는 인코딩이 선택 사항이지만, 작은 한 무리는 HTML 소스에서 사실상 필수입니다. 앰퍼샌드 & (&)는 모든 엔티티를 시작하는 문자이므로 반드시 이스케이프해야 합니다. 단어 옆에 날것 그대로 두면 브라우저가 있지도 않은 엔티티를 파싱하려 들 수 있습니다. 보다 작음 기호 < (<)와 보다 큼 기호 > (>)는 태그를 구분하기 때문에 텍스트에서 반드시 이스케이프해야 합니다. 속성 값 안에서는 큰따옴표 " (")와 작은따옴표 ' (')가 속성을 일찍 닫지 않도록 이스케이프가 필요합니다.

그 밖의 것은 모두 편의를 위한 것입니다. é는 UTF-8 파일에 직접 쓰거나 é 또는 é 로 쓸 수 있으며 모두 유효합니다. 예약된 다섯은 다릅니다. 이것을 틀리면 깨진 마크업이 되거나, 신뢰할 수 없는 입력과 함께라면 교차 사이트 스크립팅 구멍이 생기므로, 엉뚱한 자리에서 절대 이스케이프하지 않은 채로 두어서는 안 되는 문자입니다.

실제 예제: 기호와 악센트

명명된 것과 숫자 중 무엇을 고를까

명명된 엔티티는 가독성에서 앞섭니다. © 와 — 는 그 문자가 무엇인지 미래의 독자에게 정확히 알려 주어, 숫자 코드가 빼곡한 벽보다 소스를 유지하기 쉽게 합니다. 절충은 적용 범위입니다. 지정된 이름이 있는 문자만 이름으로 쓸 수 있고, 그 목록은 방대하긴 해도 모든 것을 담고 있지는 않습니다.

숫자 참조는 보편성과 정밀성에서 앞섭니다. Unicode 코드 포인트를 직접 가리키므로 이름이 없는 것과 이모지를 포함해 존재하는 모든 문자를 인코딩할 수 있습니다. 또한 모호하지 않아, 잘 알려지지 않은 기호를 확실히 해야 할 때 편리합니다. 흔한 관행은 익숙한 소수(©, &,  , —)에는 명명된 엔티티를 쓰고, 특이한 것에는 숫자 참조를 쓰는 것입니다.

이모지와 기본 범위를 넘어서는 문자

이모지와 많은 기호는 옛 방식의 단일 코드 단위가 담을 수 있는 값보다 높은 Unicode 범위에 있지만, 숫자 참조는 단지 코드 포인트를 가리킬 뿐이라 이들을 깔끔하게 처리합니다. 활짝 웃는 얼굴 이모지의 코드 포인트는 U+1F600 이므로, 10진수 참조 😀 나 16진수 참조 😀 로 쓸 수 있고 둘 다 같은 글리프를 만들어 냅니다.

실제로는 파일을 UTF-8로 저장하고 이모지를 직접 붙여넣는 편이 보통 더 간단하면서도 똑같이 정확합니다. 숫자 참조는 파이프라인이 날바이트를 보존한다고 믿을 수 없을 때 가치가 생깁니다. 이메일 템플릿, ASCII로 평탄화하는 시스템, 또는 정확한 코드 포인트를 모호함 없이 기록하고 싶은 상황 같은 경우죠. 어느 쪽이든 화면에 나타나는 문자는 전적으로 그 코드 포인트에 의해 결정됩니다.

엉망이 된 엔티티 텍스트 디코딩하기

아주 흔한 실무 작업 하나는 눈에 보이는 엔티티 코드로 가득한 텍스트를 정리하는 것입니다. 웹 페이지나 데이터베이스 내보내기에서 문단을 복사했는데 정상적인 문장 부호 대신 &, ', ", ’ 같은 것이 곳곳에 흩어져 있는 경우죠. 이는 텍스트가 상류 어딘가에서 HTML로 인코딩되었는데 표시를 위해 디코딩된 적이 없다는 뜻입니다. 그것을 여기 Decode 모드에 붙여넣으면 그 참조들이 실제 &, ', ", 그리고 둥근 작은따옴표 문자로 되돌아갑니다.

이중 인코딩을 조심하세요. 텍스트가 두 번 이스케이프되어 &amp; 나 &#39; 같은 시퀀스가 보이는 상황입니다. 여기서는 문자 그대로의 &amp; 가 & 가 되고 다시 & 가 되어야 하므로, 해법은 엔티티가 남지 않을 때까지 한 번 넘게 디코딩하는 것입니다. 한 번 디코딩한 뒤에도 출력에 여전히 & 가 남아 있다면, 결과를 다시 Decode에 통과시켜 두 번째 계층을 벗겨 내세요.

흔한 함정

또한 엔티티는 그 자체로 보안 경계가 아니라 HTML 개념이라는 점을 기억하세요. 신뢰할 수 없는 입력을 엔티티로 인코딩하는 것은 깨진 마크업과 XSS를 막는 일의 일부이지만, 만능 해법으로 의존할 것이 아니라 올바른 문맥에서 출력 시점에 이루어져야 합니다. 끝으로, 일반 콘텐츠 안에서 인코딩이 필요 없는 문자는 인코딩하지 마세요. 과도한 인코딩은 소스를 읽기 어렵게 만들 뿐, 파일이 이미 UTF-8이라면 아무 이득이 없습니다.

자주 묻는 질문

HTML 엔티티란 무엇이고 왜 사용하나요?

HTML 엔티티는 HTML의 예약 문자를 나타내는 코드로, < 에는 <, > 에는 > 를 씁니다. 이를 사용하면 브라우저가 마크업으로 해석하지 않고 해당 문자를 텍스트로 표시할 수 있습니다.

인코더는 어떤 문자를 변환하나요?

보다 작음 기호(<), 보다 큼 기호(>), 앰퍼샌드(&) 같은 HTML 예약 문자와 특수문자를 명명된 엔티티 등가로 변환해 페이지에 안전하게 렌더링되도록 합니다.

엔티티를 다시 일반 문자로 변환할 수 있나요?

네. Decode 모드로 전환해 & 나 < 같은 엔티티가 포함된 텍스트를 붙여넣으면, 도구가 원래의 읽을 수 있는 문자를 반환합니다.

깨진 HTML이나 XSS를 방지하는 데 유용한가요?

사용자가 입력한 텍스트를 엔티티로 인코딩하면 특수문자가 HTML 구조를 깨뜨리는 것을 막을 수 있으며, 신뢰할 수 없는 콘텐츠를 페이지에 안전하게 표시하는 일반적인 단계입니다.

내 텍스트가 서버로 전송되나요?

아니요. 인코딩과 디코딩이 브라우저 안에서 전부 이루어지므로 텍스트가 기기에 남아 있으며, 가입 없이 무료로 사용할 수 있습니다.