HTML 기호란 무엇인가?
HTML 기호(Symbol)란 일반 키보드에는 없는 물리학·수학·공학·통화 분야의 다양한 특수 문자를 의미합니다. 이러한 기호를 웹 페이지에 표시하려면 HTML 엔티티(entity)를 사용해야 하며, 엔티티는 앰퍼샌드(&)로 시작하여 세미콜론(;)으로 끝나는 특수한 코드 형식입니다.
대부분의 기호에는 미리 정의된 엔티티 이름(entity name)이 있습니다. 만약 엔티티 이름이 존재하지 않는다면 10진수 또는 16진수 참조 형식의 엔티티 번호(entity number)를 대신 사용할 수 있습니다.
HTML 기호 작성 문법
HTML에서 특수 기호를 표현하는 방법은 다음 세 가지입니다.
&엔티티이름;
또는
&#엔티티10진수번호;
또는
&#x엔티티16진수번호;
자주 사용되는 HTML 엔티티
| 출력 결과 | 엔티티 이름 | 엔티티 번호 | 설명 |
|---|---|---|---|
| < | < | < | ~보다 작음 |
| > | > | > | ~보다 큼 |
| & | & | & | 앰퍼샌드 |
| " | " | " | 큰따옴표 |
| © | © | © | 저작권 |
| ® | ® | ® | 등록 상표 |
| € | € | € | 유로화 기호 |
| → | → | → | 오른쪽 화살표 |
| ♥ | ♥ | ♥ | 하트 기호 |
HTML 기호 예제
다음은 수학 기호와 그리스 문자 기호를 HTML 엔티티로 출력하는 전체 예제 코드입니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
</style>
<body>
<h1>HTML 기호 데모</h1>
<p>수학 기호 예시</p>
<p>∀ -- 전칭 기호(for all)</p>
<p>∇ -- 나블라(nabla) 기호</p>
<p>∅ -- 공집합(empty set) 기호</p>
<p>∃ -- 존재(there exists) 기호</p>
<p>그리스 문자 기호 예시</p>
<p>γ -- 감마(gamma) 기호</p>
<p>δ -- 델타(delta) 기호</p>
<p>ε -- 입실론(epsilon) 기호</p>
<p>α -- 알파(alpha) 기호</p>
</body>
</html>
실행 결과
위 코드를 브라우저에서 실행하면 파스텔 그라데이션 배경 위에 ∀(전칭), ∇(나블라), ∅(공집합), ∃(존재) 등의 수학 기호와 γ(감마), δ(델타), ε(입실론), α(알파) 등의 그리스 문자 기호가 가운데 정렬되어 표시됩니다.
활용 팁
엔티티 이름은 직관적이고 기억하기 쉬운 장점이 있지만, 일부 오래된 브라우저나 환경에서는 지원하지 않을 수 있습니다. 안정성이 중요한 문서라면 숫자 코드(10진수 또는 16진수)를 사용하는 것이 좋습니다. 또한 문서 인코딩을 UTF-8로 지정하면 상당수 특수 문자를 엔티티 없이 직접 입력할 수도 있습니다.