HTML 엔티티 인코더 / 디코더/ & < > "
HTML 특수 문자를 엔티티로 인코딩하고 명명/숫자 엔티티를 디코딩합니다. XSS 방지에 필수적인 도구입니다.
일반 텍스트
0 문자
HTML 엔티티
0 문자
자주 사용하는 HTML 엔티티
&&<<>>""''©©®®™™ ——……«»«»이 도구가 도움이 되었나요?
HTML 인코딩/디코딩 도구란
HTML 인코딩/디코딩 도구는 일반 텍스트와 HTML 엔티티 간의 변환을 수행합니다. HTML 엔티티는 &로 시작하고 ;로 끝나는 특수 코드로, <, >, &, 따옴표 등의 특수 문자를 HTML 태그로 파싱되지 않도록 안전하게 표시합니다.
HTML 인코딩/디코딩의 일반적인 사용 사례
코드 스니펫 표시: 블로그나 문서에서 HTML/JavaScript 코드 표시 시 < 와 > 를 < 와 > 로 인코딩. XSS 공격 방지: 표시 전 사용자 입력을 인코딩하여 악성 스크립트 실행 방지.
코드 예제
JavaScript (Browser)
// Encode using a temporary DOM element (browser only)
function htmlEncode(str) {
const div = document.createElement('div');
div.appendChild(document.createTextNode(str));
return div.innerHTML;
}
// Decode
function htmlDecode(str) {
const div = document.createElement('div');
div.innerHTML = str;
return div.textContent ?? div.innerText;
}
// Manual encode (works in Node.js too)
const escapeHtml = (s) => s
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');Python
import html
# Encode (escape)
html.escape('<script>alert("xss")</script>')
# '<script>alert("xss")</script>'
# Encode including single quotes
html.escape("it's", quote=True)
# 'it's'
# Decode (unescape)
html.unescape('<b>Hello & World</b>')
# '<b>Hello & World</b>'Go
import "html"
// Encode
html.EscapeString("<script>alert('xss')</script>")
// "<script>alert('xss')</script>"
// Decode
html.UnescapeString("<b>Hello & World</b>")
// "<b>Hello & World</b>"
// In templates (auto-escaped)
import "html/template"
t := template.Must(template.New("").Parse(
"<p>{{.}}</p>"))
t.Execute(os.Stdout, "<b>Hello</b>")
// <p><b>Hello</b></p>PHP / Twig
<?php
// Encode
htmlspecialchars('<b>Hello</b> & "World"', ENT_QUOTES, 'UTF-8');
// '<b>Hello</b> & "World"'
// Decode
htmlspecialchars_decode('<b>Hello</b>');
// '<b>Hello</b>'
// All HTML entities (including named ones)
htmlentities('© 2025 — Café', ENT_QUOTES, 'UTF-8');
// '© 2025 — Café'
// Twig (auto-escaped by default)
// {{ user_input }} ← auto-escaped
// {{ user_input|raw }} ← raw HTML (unsafe!)자주 묻는 질문
HTML 엔티티 인코딩이 왜 필요한가요?
HTML에서 특정 문자는 특별한 의미를 가집니다: < 와 > 는 태그에, & 는 엔티티에, " 는 속성 값에 사용됩니다. 사용자 입력을 HTML에 직접 삽입하면 브라우저가 이를 HTML 구조로 해석하여 XSS(교차 사이트 스크립팅) 취약점이 발생합니다. <, >, &, " 등의 엔티티로 이스케이프하면 브라우저가 코드를 실행하지 않고 텍스트로 표시합니다.
명명 엔티티와 숫자 엔티티의 차이점은 무엇인가요?
명명 엔티티는 기억하기 쉬운 이름을 사용합니다: &(&), ©(©), (줄 바꿈 없는 공백). 숫자 엔티티는 유니코드 코드 포인트를 사용합니다: 10진수 © 또는 16진수 ©(둘 다 ©를 의미). 명명 엔티티는 HTML 사양에 정의된 문자에만 존재하며, 숫자 엔티티는 모든 유니코드 문자를 표현할 수 있습니다.
HTML 인코딩에서 가장 중요한 5개 문자는 무엇인가요?
필수 5개 문자: & → &(다른 엔티티가 깨지지 않도록 먼저 인코딩해야 함), < → <, > → >, " → "(속성 값 내부), ' → ' 또는 '(속성 값 내부). 기타 문자(한국어, ©, € 등)는 인코딩이 필요 없으며, 최신 브라우저는 UTF-8을 완벽하게 지원합니다.
란 무엇이며 언제 사용하나요?
는 줄 바꿈 없는 공백(U+00A0)입니다. 일반 공백과의 차이: 1) 브라우저가 에서 줄 바꿈을 하지 않습니다. 2) 여러 문자가 하나로 축소되지 않습니다(HTML은 기본적으로 연속 공백을 축소합니다). 숫자와 단위 사이 '100 km'처럼 고정 간격이 필요한 곳에 사용합니다.
React와 Vue는 자동으로 HTML 인코딩을 하나요?
네. React JSX와 Vue 템플릿은 기본적으로 모든 보간된 값을 이스케이프합니다. React에서 <div>{userInput}</div>는 특수 문자를 자동 인코딩하며, dangerouslySetInnerHTML만 이를 우회합니다(극도의 주의 필요). Vue에서 {{ userInput }}는 자동으로 이스케이프되며, v-html 디렉티브만 원시 HTML을 삽입합니다.
HTML 인코딩과 URL 인코딩의 차이점은 무엇인가요?
HTML 엔티티 인코딩(&, < 등)은 HTML 문서 컨텍스트에서 특수 문자를 이스케이프하여 HTML 파싱 모호성을 방지합니다. URL 인코딩(%26, %3C 등)은 URL/URI 컨텍스트에서 비ASCII 및 예약 문자를 이스케이프합니다. 목적이 다르므로 혼용할 수 없습니다. href 속성의 링크에서는 먼저 값을 URL 인코딩한 후 전체를 HTML 엔티티 인코딩합니다.