HTML 엔티티 코드 정리 - 특수문자 표시 완벽 가이드
부터 ©까지 자주 쓰는 HTML 엔티티 코드를 한눈에 정리했습니다. 웹 개발자와 블로거가 반드시 알아야 할 특수문자 표기법을 확인하세요.
블로그 글을 쓰다가 < 같은 부등호를 그대로 입력했더니 화면에 아무것도 안 나타난 경험, 한 번쯤은 있으실 겁니다. 웹 페이지에서 특수문자나 기호를 제대로 표시하려면 HTML 엔티티 코드를 알아야 합니다. 이 기호들은 단순히 보기 좋게 만드는 장식이 아니라, 브라우저가 코드를 해석하는 방식과 직결되는 문제입니다.
특히 코드 예제를 작성하는 개발 블로거나, 저작권 표시·통화 기호를 자주 쓰는 쇼핑몰 운영자라면 엔티티 코드를 외워두는 것이 큰 도움이 됩니다. HTML 엔티티 코드 정리를 한 페이지로 모아두면 필요할 때마다 빠르게 찾아 쓸 수 있습니다.
HTML 엔티티란 무엇인가
HTML 엔티티(Entity)는 브라우저에서 특수문자를 안전하게 표시하기 위한 코드입니다. 모든 엔티티는 앰퍼샌드(&)로 시작해 세미콜론(;)으로 끝납니다. 예를 들어 부등호 <를 화면에 보여주려면 <라고 입력해야 합니다. 그냥 <를 쓰면 브라우저는 HTML 태그의 시작으로 해석해서 의도와 다르게 동작합니다.
엔티티 표기법 두 가지
HTML 엔티티는 두 가지 방식으로 작성할 수 있습니다. 첫 번째는 이름 기반(Named Entity) 방식으로, © 처럼 직관적인 이름을 사용합니다. 두 번째는 숫자 기반(Numeric Entity) 방식으로 © 혹은 16진수 형태인 © 처럼 유니코드 번호를 사용합니다.
기본 HTML 엔티티 코드 정리
실무에서 가장 자주 쓰이는 기본 엔티티부터 정리해보겠습니다. 이 다섯 가지는 거의 매일 쓰는 수준이라 외워두는 것이 좋습니다.
| 문자 | 이름 기반 | 숫자 기반 | 설명 |
|---|---|---|---|
| < | < | < | 여는 부등호 (less than) |
| > | > | > | 닫는 부등호 (greater than) |
| & | & | & | 앰퍼샌드 |
| " | " | " | 큰따옴표 |
| ' | ' | ' | 작은따옴표 |
| (공백) | |   | 줄바꿈 없는 공백 |
줄바꿈 없는 공백( )의 진짜 용도
HTML에서는 연속된 공백을 하나로 압축합니다. 띄어쓰기를 다섯 번 해도 화면에는 한 칸만 나옵니다. 여러 칸을 강제로 띄우고 싶을 때 를 사용합니다. 또한 줄 끝에서 단어가 어색하게 잘리지 않게 하려고 단어 사이에 를 넣기도 합니다.
HTML 엔티티는 단순히 글자를 표시하는 기능을 넘어, XSS 공격을 막는 보안 장치이기도 합니다. 사용자 입력을 그대로 출력할 때 엔티티로 인코딩하면 스크립트 삽입을 차단할 수 있습니다.
기호와 화살표 엔티티
저작권 표기나 디자인 요소로 자주 쓰이는 기호 엔티티를 정리했습니다. 푸터에 들어가는 저작권 마크 ©는 거의 모든 웹사이트에서 볼 수 있습니다.
| 문자 | 이름 기반 | 숫자 기반 | 용도 |
|---|---|---|---|
| © | © | © | 저작권 표시 |
| ® | ® | ® | 등록 상표 |
| ™ | ™ | ™ | 상표 |
| … | … | … | 말줄임표 |
| · | · | · | 중간점 |
| ← | ← | ← | 왼쪽 화살표 |
| → | → | → | 오른쪽 화살표 |
| ↑ | ↑ | ↑ | 위쪽 화살표 |
| ↓ | ↓ | ↓ | 아래쪽 화살표 |
장식용 기호로 활용하기
화살표나 중간점 같은 기호는 메뉴 구분자나 텍스트 장식으로 유용합니다. 예를 들어 빵 부스러기 내비게이션(Breadcrumb)에 →를 넣으면 깔끔한 디자인이 완성됩니다. 아이콘 폰트를 불러오지 않고도 기본 화살표를 표시할 수 있어서 페이지 로딩 속도에도 도움이 됩니다.
수학 기호와 통화 엔티티
수학 공식이나 통계 자료를 다루는 글에서는 수학 기호 엔티티가 필수입니다. 가격 정보를 다룰 때는 각국 통화 기호도 자주 등장합니다.
- 수학 기호: ±(±), ×(×), ÷(÷), ≠(≠), ≤(≤), ≥(≥)
- 분수 표기: ½(½), ¼(¼), ¾(¾)
- 통화 기호: &won;(₩), $($), €(€), ¥(¥), £(£)
한국 원화 표기의 함정
한국 원화(₩)는 ₩ 또는 ₩로 표기합니다. 한글 ₩ 글자와 시각적으로 비슷하지만 유니코드상 다른 문자입니다. 일부 폰트에서는 두 문자가 다르게 렌더링되므로, 일관성을 위해 한 가지 방식으로 통일해서 사용하는 것이 좋습니다.
실전 활용 팁과 주의사항
HTML 엔티티를 사용할 때 흔히 발생하는 실수와 해결 방법을 정리해보겠습니다. 작은 부주의가 큰 버그로 이어질 수 있는 부분이라 꼭 확인하시기 바랍니다.
세미콜론을 빠뜨리지 말 것
엔티티 코드의 끝에 세미콜론(;)을 반드시 붙여야 합니다. © 라고만 쓰면 일부 브라우저는 인식하지 못하거나 다음 문자까지 엔티티의 일부로 해석합니다. 한 글자 차이로 전체 레이아웃이 깨질 수 있으니 주의해야 합니다.
이름 기반은 대소문자를 구분한다
- Á 와 á 는 서로 다른 문자(Á vs á)입니다
- 일반적으로 소문자 이름이 표준이지만, 일부 엔티티는 대문자만 정의되어 있습니다
- 확실하지 않으면 숫자 기반 표기법을 사용하는 것이 안전합니다
인코딩 도구 활용하기
매번 코드를 외워서 입력하는 대신, 자동 인코딩 도구를 활용하면 편리합니다. 텍스트 에디터의 정규표현식 치환 기능을 쓰거나, 온라인 변환 서비스를 활용할 수 있습니다. 작업 시간을 측정하면서 효율을 높이고 싶다면 온라인 타이머를 함께 사용해보는 것도 방법입니다. 일정 시간 동안 변환 작업에 집중하면 생산성이 눈에 띄게 올라갑니다.
엔티티 변환 도구와 마무리
대량의 텍스트를 한꺼번에 변환해야 한다면 개발자 도구를 활용하는 것이 효율적입니다. 자바스크립트에서는 textContent 속성을 사용해 자동 인코딩을 처리할 수 있고, 백엔드 언어에서도 htmlspecialchars(PHP), escape(Python) 같은 함수가 마련되어 있습니다.
자주 쓰는 엔티티 빠른 검색 표
| 상황 | 추천 엔티티 |
|---|---|
| 코드 예제 작성 | < > & |
| 저작권 푸터 | © ® |
| 가격 표시 | ₩ € |
| 메뉴 구분자 | · • → |
| 강제 띄어쓰기 | |
웹 작업을 하다 보면 서버 점검이나 보안 이슈로 IP 정보가 필요한 순간도 생깁니다. 그럴 때는 IP 주소 조회 서비스를 활용하면 빠르게 정보를 확인할 수 있습니다. HTML 엔티티 정리표는 자주 참고하게 되니 즐겨찾기에 추가해두시고, 코드 예제를 작성할 때는 항상 <와 >를 엔티티로 변환하는 습관을 들이시기 바랍니다.
지금 작성 중인 글에 부등호나 앰퍼샌드가 들어 있다면, 우선 그 부분부터 엔티티 코드로 바꿔보세요. 화면 깨짐 현상이 사라지는 것을 바로 확인할 수 있습니다.
