HTML 특수문자 코드 총정리 : 엔티티 코드 (Entity Code)
블로그 포스팅을 하다 보면 HTML 특수문자를 사용해야 할 때가 종종 있습니다. 이 글에서는 HTML 특수문자가 무엇인지, 그리고 자주 사용하는 Entity Code와 그외 다양한 코드를 알려드리겠습니다.
Entity Code 란?
Entity Code는 웹 페이지에서 특정 기호나 문자를 표현하기 위해 사용하는 HTML 특수문자 입니다. 일반적으로 키보드에서 직접 입력할 수 없는 문자나, HTML 문법과 충돌할 수 있는 문자들을 안전하게 표시하기 위해 사용됩니다. 예를 들어, <와 >는 HTML 태그를 정의하는 기호이기 때문에, 이를 그대로 사용하면 브라우저가 태그로 인식해버립니다. 따라서 이러한 문자는 각각 <와 >로 표현해야 합니다.
자주 사용하는 HTML 특수문자
웹 페이지에서 특수문자를 사용하는 이유는 다양합니다. 첫째, 사용자에게 명확한 정보를 전달하기 위해서입니다. 예를 들어, 저작권 기호인 ©를 사용하고 싶다면, 이를 HTML 특수문자로 표현해야 합니다. 둘째, HTML 문법과의 충돌을 피하기 위해서입니다. HTML 문서 내에서 특정 기호는 태그로 인식되기 때문에, 이를 특수문자로 변환하여 사용해야 합니다. 이처럼 자주 사용하는 Entity Code를 아래 표로 정리해 보았습니다.
| Entity Code | 기호 | 설명 |
| | (space) | 공백을 유지하기 위해 사용 |
| < | < | < 기호로, 태그와 혼동을 피하기 위해 사용 |
| > | > | > 기호로, 태그와 혼동을 피하기 위해 사용 |
| " | " | 큰따옴표(")로, HTML 속성 값 내에서 사용 |
| ' | ' | 작은따옴표(')로, HTML 속성 값 내에서 사용 |
| & | & | 앰퍼샌드(&) 기호로, HTML 구문과 혼동을 피하기 위해 사용 |
여러가지 HTML 특수문자
웹 페이지에는 다양한 기호가 쓰이기때문에 추가로 여러가지 Entity Code를 아래의 표로 정리해 보았습니다.
| Entity Code | 기호 | 설명 |
| © | © | 저작권 기호 |
| ® | ® | 등록 상표 기호 |
| ™ | ™ | 상표 기호 |
| € | € | 유로화 기호 |
| × | × | 곱셈 기호 |
| ÷ | ÷ | 나눗셈 기호 |
| ± | ± | 플러스-마이너스 기호 |
| ∑ | ∑ | 합계 기호 |
| ∞ | ∞ | 무한대 기호 |
| √ | √ | 제곱근 기호 |
| ∝ | ∝ | 비례 기호 |
| ∫ | ∫ | 적분 기호 |
| ≈ | ≈ | 근사치 기호 |
| ≠ | ≠ | 같지 않음 기호 |
| ← | ← | 왼쪽 화살표 |
| → | → | 오른쪽 화살표 |
| ↑ | ↑ | 위쪽 화살표 |
| ↓ | ↓ | 아래쪽 화살표 |
| ↔ | ↔ | 양방향 화살표 |
| ↵ | ↵ | 줄 바꿈 화살표 |
| ¡ | ¡ | 거꾸로 된 느낌표 (스페인어) |
| ¿ | ¿ | 거꾸로 된 물음표 (스페인어) |
| « | « | 여는 인용부호 (프랑스어) |
| » | » | 닫는 인용부호 (프랑스어) |
| “ | “ | 여는 큰따옴표 |
| ” | ” | 닫는 큰따옴표 |
| ‘ | ‘ | 여는 작은따옴표 |
| ’ | ’ | 닫는 작은따옴표 |
| ¢ | ¢ | 센트 기호 |
| £ | £ | 파운드 기호 |
| ¥ | ¥ | 엔화 기호 |
| ¤ | ¤ | 일반 통화 기호 |
| § | § | 절 기호 |
| † | † | 십자 기호 (주석에 사용) |
| • | • | 글머리 기호 |
| … | … | 말줄임표 |
| ′ | ′ | 프라임 기호 |
| ‾ | ‾ | 상단 줄 기호 |
| ♠ | ♠ | 스페이드 기호 |
| ♣ | ♣ | 클럽 기호 |
| ♥ | ♥ | 하트 기호 |
| ♦ | ♦ | 다이아몬드 기호 |
| ‰ | ‰ | 천분율 기호 |
| é | é | 악센트가 붙은 e (프랑스어, 스페인어) |
HTML 특수문자 사용예시
HTML 특수문자는 다양한 상황에서 사용될 수 있습니다. 예를 들어, 웹 페이지의 제목이나 본문에 저작권 기호를 넣고 싶다면 다음과 같이 작성할 수 있습니다.
<p>저작권 © 2023 나의 웹사이트</p>위의 코드는 브라우저에서 다음과 같이 표시됩니다.
→ 저작권 © 2023 나의 웹사이트
또한, HTML 문서 내에서 태그와 함께 사용할 때는 다음과 같이 작성해야 합니다.
<p>HTML 태그는 <html>로 시작합니다.</p>위의 코드는 브라우저에서 다음과 같이 표시됩니다.
→ HTML 태그는 <html>로 시작합니다.
Google에서 제공하는 이모티콘
HTML 특수문자 외에도 이모티콘을 적용하고 싶다면, 구글에서 제공하는 수많은 이모티콘이 있으니 페이지에 방문해서 HTML 링크 소스를 복사해서 사용 가능합니다.
위의 그림처럼 사용할 아이콘을 선택 후 SVG 코드를 복사해서 HTML 에디터에 붙여넣으면, 아래와 같이 구글에서 제공하는 수많은 아이콘을 사용할 수 있습니다.