웹사이트에서 앰퍼샌드 기호와 같은 특수 문자를 사용해야 하는 경우가 있을 수 있습니다. 그러나 앰퍼샌드 기호는 예약된 HTML 기호이므로 HTML 코드에 단순히 “&”를 입력할 수 없습니다.
대신 HTML 엔티티 또는 특수 코드를 사용하여 이러한 문자를 나타낼 수 있습니다. 이렇게 하면 실제 HTML 코드를 방해하지 않고 웹페이지에 기호를 추가할 수 있습니다.
HTML에서 기호란 무엇인가요?
HTML 웹사이트를 만들 때 구두점을 위해 다양한 기호를 사용하게 됩니다. 대부분의 문자는 페이지에 직접 추가할 수 있지만, 일부는 특별한 의미가 있거나 입력하기 어렵습니다. 예를 들어 HTML은 콘텐츠의 구조를 나타내기 위해 꺾쇠 괄호(‘및’), 앰퍼샌드(‘&’), 따옴표(” 및 ‘) 등의 기호를 사용합니다.
웹 브라우저는 일반적으로 꺾쇠 괄호 기호를 열기 또는 닫기 태그로 해석합니다. 의도한 것과 다른 경우 웹페이지에 오류가 발생할 수 있습니다. 엔티티 코드가 필요한 기호의 예는 다음과 같습니다:
⭐ 앰퍼샌드 ( )
⭐ 보다 작음 ( )
⭐ 보다 큼 ( > )
⭐ 큰따옴표 ( " )
⭐ 작은따옴표 ( ' )
저작권 및 상표 기호 등의 기타 기호에는 엔티티 코드가 필요하지 않지만 원하는 경우 엔티티 코드를 사용해도 됩니다. 이러한 기호는 입력하기 어색하거나 텍스트 편집기에서 지원되지 않을 수도 있습니다. 몇 가지 예는 다음과 같습니다:
⭐ 저작권 기호(©)
⭐ 상표 기호(™)
⭐ 등록 상표 기호(®)
이름 및 숫자 엔티티란 무엇인가요?
숫자 엔티티 코드를 사용하여 모든 심볼을 표현할 수 있으며, 명명된 엔티티도 가장 일반적으로 사용할 수 있습니다. 다음은 몇 가지 예입니다:
|
기호 |
명명된 엔티티 코드 |
숫자 엔티티 코드 |
|
앰퍼샌드 |
& amp; |
& |
|
미만 |
< |
< |
|
> |
> |
|
|
큰따옴표 |
& |
" |
|
작은따옴표 |
&APOS; |
' |
|
저작권 |
© |
© |
|
상표 기호 |
™ |
™ |
|
등록 상표 기호 |
& reg; |
® |
이름 또는 숫자 코드 중 하나를 사용하면 해당 기호가 표시됩니다. 예를 들어 “©” 또는 “©”를 사용하면 저작권 기호가 표시됩니다.
웹페이지에 이모티콘 추가하기
엔티티 코드를 사용하여 이모티콘을 표시할 수도 있습니다. 모든 이모티콘에는 HTML의 숫자형 엔티티 코드가 있지만 모든 이모티콘에 이름이 지정된 엔티티 코드가 있는 것은 아닙니다. 몇 가지 예는 다음과 같습니다:
|
Symbol |
숫자 엔티티 코드 |
|
스마일링 페이스(😃) |
& #x1F603; |
|
웃는 얼굴 (😆) |
& # |
|
웃는 얼굴 (😇) |
😇 |
엔티티 코드를 사용하여 웹페이지에 기호 삽입 방법
HTML 페이지 콘텐츠에 엔티티 코드를 삽입할 수 있습니다. 브라우저에서 웹페이지를 보면 코드가 해당 기호로 변환됩니다.
⭐ 새 HTML 파일에 HTML 웹페이지의 기본 구조를 추가합니다:
<!DOCTYPE html>
<html>
<head>
<title>Symbol and Entity Example</title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
⭐ 본문 태그 안에 HTML 콘텐츠를 추가합니다. 표시하려는 심볼의 이름 또는 숫자 엔티티 코드를 포함합니다:
<h1>HTML Symbols</h1>
<p>Copyright symbol: ©</p>
<p>Ampersand symbol: &</p>
<p>Trademark symbol: ™</p>
<p>Smiling Face: 😃</p>
⭐ 웹 브라우저에서 HTML 파일을 열어 해당 심볼을 확인합니다: 
웹사이트에서 특수 또는 예약 HTML 기호 사용
이제 HTML 웹페이지에 기호를 추가하는 방법을 알았으므로 웹사이트를 더욱 매력적으로 만들기 위해 추가할 수 있는 다른 흥미로운 콘텐츠를 탐색할 수 있습니다.