HTML 엔티티 완벽 가이드
HTML 엔티티는 웹 개발에서 가장 기본적이면서도 자주 오해되는 측면 중 하나입니다. HTML 마크업으로 해석될 수 있는 문자를 표시하는 메커니즘이며, 웹 보안에서 중요한 역할을 합니다. 크로스 사이트 스크립팅 공격을 방지하기 위해 특수 문자를 인코딩하든, 수학 기호를 표시하든, 다양한 인코딩에서 콘텐츠가 올바르게 렌더링되도록 하든, HTML 엔티티를 이해하는 것은 모든 웹 개발자에게 필수적입니다.
HTML 엔티티란 무엇인가요?
HTML 엔티티는 HTML에서 단일 문자를 나타내는 문자 시퀀스입니다. 엔티티는 앰퍼샌드(&)로 시작하여 세미콜론(;)으로 끝납니다. 브라우저는 엔티티를 만나면 렌더링 중에 해당 문자로 대체합니다. 이 메커니즘을 통해 HTML에 포함할 수 없거나 문제가 있는 문자를 포함할 수 있습니다.
<)는 태그를 시작하고, 큰 부등호(>)는 태그를 종료하며, 앰퍼샌드(&)는 엔티티 참조를 시작합니다. 이러한 문자를 마크업이 아닌 가시적인 콘텐츠로 표시하려면 반드시 엔티티로 인코딩해야 합니다.
일반적인 HTML 엔티티
HTML은 2,000개 이상의 이름 엔티티를 정의했지만, 일상적인 웹 개발에서는 소수만 자주 사용됩니다. 다음은 가장 자주 접하고 사용하게 될 엔티티입니다:
다섯 가지 필수 엔티티
| 문자 | 이름 엔티티 | 십진수 엔티티 | 십육진수 엔티티 | 용법 |
|---|---|---|---|---|
| & | & | & | 엔티티 참조와의 모호성을 피하기 위해 항상 인코딩해야 함 | < |
| < | < | < | HTML 태그 열기를 방지하기 위해 인코딩해야 함 | > |
| > | > | > | HTML 태그 닫기를 방지하기 위해 인코딩해야 함 | " |
| " | " | " | 큰따옴표 속성 값 내에서 인코딩해야 함 | ' |
| ' | ' | 작은따옴표 속성 값 내에서 인코딩해야 함 | 줄 바꿈 없는 공백(줄 바꿈 방지) | 저작권 기호 |
일반적인 기호 엔티티
| 문자 | 이름 엔티티 | 설명 |
|---|---|---|
| 일반적인 기호 엔티티 | 일반적인 기호 엔티티 | 전각 대시(긴 줄표) |
| 반각 대시(범위 표시용) | 왼쪽 이중 꺾쇠 따옴표 | 오른쪽 이중 꺾쇠 따옴표 |
| 글머리 기호 문자 | 수평 생략 부호(점 세 개) | Registered trademark symbol |
| ™ | ™
| Trademark symbol |
| — | —
| Em dash (long dash) |
| – | –
| En dash (short dash, for ranges) |
| « | «
| Left-pointing double angle quotation mark |
| » | »
| Right-pointing double angle quotation mark |
| • | •
| Bullet character |
| … | …
| Horizontal ellipsis (three dots) |
숫자 엔티티와 이름 엔티티
HTML 엔티티에는 이름과 숫자의 두 가지 형태가 있습니다. 차이점을 이해하면 각 상황에 맞는 올바른 엔티티를 선택하는 데 도움이 됩니다.
이름 엔티티
<는 작은 부등호를, ©는 저작권 기호를 나타냅니다. 이름 엔티티는 더 읽기 쉽고 기억하기 쉬워 HTML 소스 코드의 유지 관리를 용이하게 합니다. 그러나 이름 엔티티는 약 2,000개의 제한된 문자 집합에만 존재하는 반면, Unicode에는 140,000개 이상의 문자가 있습니다.
HTML 엔티티 완벽 가이드
숫자 엔티티는 Unicode 코드 포인트를 통해 문자를 참조합니다. 십진수와 십육진수의 두 가지 형태가 있습니다. 십진수 숫자 엔티티는 &#NNN; 형식을 사용하며, NNN은 십진수 코드 포인트입니다. 십육진수 엔티티는 &#xHHH; 형식을 사용하며, HHH는 십육진수 코드 포인트입니다. 예를 들어, 저작권 기호는 ©(십진수) 또는 ©(십육진수)로 작성할 수 있습니다.
숫자 엔티티는 모든 Unicode 문자를 표현할 수 있어, 이름 엔티티 참조가 없는 문자에 필수적입니다. 희귀한 CJK 문자, 역사적 문자 글리프 또는 이름 엔티티가 없는 이모지를 표시해야 하는 경우 숫자 형식을 사용해야 합니다.
언제 어떤 것을 사용할까
- <, >, ", ')와 ©, ®, ™와 같은 일반적인 기호에는 이름 엔티티를 사용하세요. 더 읽기 쉽고 자체 문서화됩니다.
- 필요한 문자에 이름 엔티티가 없을 때, 또는 프로그래밍 방식으로 HTML을 생성하고 일관된 범용 인코딩 방법이 필요할 때 숫자 엔티티를 사용하세요.
- Unicode 코드 포인트를 다룰 때는 십육진수 숫자 엔티티를 사용하세요. 십육진수는 Unicode 문서와 문자표에서 표준 표기법이기 때문입니다.
HTML 엔티티를 사용해야 하는 경우
언제 엔티티를 사용해야 하는지 아는 것은 사용 방법을 아는 것만큼 중요합니다. 다음은 엔티티가 필요하거나 유용한 주요 시나리오입니다:
1. 예약 문자 표시
<로 작성해야 합니다. 원시 <를 작성하면 브라우저가 이를 HTML 태그의 시작으로 구문 분석하려고 시도하여 페이지 레이아웃을 망가뜨리거나 보안 취약점을 만들 수 있습니다.
2. 모호한 앰퍼샌드 방지
앰퍼샌드 뒤에 문자와 세미콜론이 오면 항상 엔티티 참조로 해석됩니다. 콘텐츠에 엔티티에 속하지 않는 앰퍼샌드가 있는 경우(예: "Tom & Jerry"), 반드시 &로 인코딩해야 합니다. 인코딩되지 않은 앰퍼샌드 뒤에 엔티티 이름과 정확히 일치하는 텍스트가 오면 잘못 디코딩됩니다. 예를 들어, 인코딩되지 않은 "AT&T"는 브라우저가 &T를 엔티티 참조로 해석하면 "AT&T"가 될 수 있습니다(&T는 유효한 엔티티가 아니지만, 이 동작은 기술적으로 여전히 잘못된 것입니다).
3. 키보드에 없는 문자 포함
대시, 저작권 기호, 수학 연산자와 같은 문자는 표준 키보드에서 입력하기 어려울 수 있습니다. 엔티티는 편집기의 입력기나 문자 맵에 의존하지 않고 이러한 문자를 포함할 수 있는 신뢰할 수 있는 방법을 제공합니다. 예를 들어, —는 일반적으로 키보드에서 대시 문자를 찾는 것보다 입력하기 쉽습니다.
4. 줄 바꿈 없는 공백
엔티티는 줄 바꿈 없는 공백을 생성하여 브라우저가 해당 위치에서 줄 바꿈하는 것을 방지합니다. 이는 "10 kg", "제3장" 또는 줄 바꿈으로 분할되어서는 안 되는 브랜드 이름과 같이 관련 단어를 같은 줄에 유지하는 데 중요합니다. CSS가 적절하지 않은 레이아웃에서 시각적 간격을 만들기 위해 자주 사용됩니다.
보안 영향: XSS 방어
HTML 엔티티 인코딩은 크로스 사이트 스크립팅(XSS) 공격을 방어하는 가장 중요한 방어선 중 하나입니다. 공격자가 다른 사용자가 보는 웹페이지에 실행 가능한 코드를 주입할 수 있을 때 XSS가 발생합니다. 엔티티 인코딩은 위험한 문자를 안전한 엔티티 동등 항목으로 변환하여 이를 방지합니다.
엔티티 인코딩이 XSS를 방지하는 방법
를 검색했는데 페이지가 인코딩 없이 렌더링되면, 브라우저는 해당 스크립트를 실행합니다. 그러나 출력이 엔티티 인코딩되면 <script>alert('xss')</script>가 되어, 브라우저는 이를 코드로 실행하지 않고 문자 그대로의 텍스트로 표시합니다.
컨텍스트별 인코딩 규칙
엔티티 인코딩은 HTML 콘텐츠와 속성 컨텍스트에서 유효하지만, 다양한 컨텍스트에는 서로 다른 인코딩 전략이 필요합니다:
- <, >, &를 엔티티로 인코딩하세요. 이는 새로운 HTML 태그 주입을 방지합니다.
- <, >, &, ", '를 엔티티로 인코딩하세요. 따옴표는 속성 값에서 벗어나는 것을 방지하기 위해 반드시 인코딩해야 합니다.