HTML 특수 문자란 무엇인가?
HTML 특수문자는 HTML 문서에서 특수 기호를 표시하기 위해 사용하는 문자입니다.
예를 들어, < 기호는 HTML의 시작 태그로 인식되기 때문에, <라는 기호만을 그대로 기재하면 브라우저에서의 표시에 문제가 생기거나 표시되지 않거나 합니다. HTML에서 특별한 의미로 사용되는 이러한 기호를 브라우저에서 그대로 표시하고 싶은 경우는 '특수 문자' 라고 하는 것으로 변환해서 사용할 필요가 있습니다. 특수 문자에는 전용의 문자 코드가 있어, 그 코드를 기재하는 것으로 기호를 브라우저상에 그대로 표시시킬 수가 있습니다. 예를 들어, < 기호는 이 기호의 의미로 브라우저에서 표시하게 하는 특수문자인 < 로 변환하여 사용합니다.
알아두세요! HTML 특수 문자는 HTML Entity, HTML Escape Sequence 또는 Character Entity라고도 불립니다. 다 동일한 개념을 가리키며, HTML 문서에서 특수 문자를 나타내는 데 사용되는 용어입니다.
HTML에는 일부 문자가 예약되어 있거나 특별한 의미를 가집니다.
설명에 앞서 사례로 살펴 보겠습니다.
"<p> 요소에 대해 알아보자!"라는 텍스트를 웹 페이지에 표시하려고 아래의 예제처럼 마크업하겠습니다.
이 코드는 브라우저에서 다음과 같이 표시됩니다.
"<p> 요소에 대해 알아보자!"라는 텍스트가 표시되지 않고 " 요소에 대해 알아보자!"라는 텍스트가 표시됩니다.
"<p>"라는 텍스트가 제대로 표시되지 않았습니다.
위의 코드에서 <p>의 < 기호는 브라우저에서 HTML 태그의 시작을 나타내는 것으로 인식됩니다. 따라서, 해당 코드는 잘못된 태그 구문으로 간주됩니다.
HTML에는 일부 문자중에서는 HTML 코드에서 일반 문자로 사용할 수 없고 HTML 코드로 인식하게 하여 코드로만 사용하도록 예약해 놓은 문자가 있습니다. 이러한 특수한 의미의 문자를 'HTML 예약어'라고 말합니다.
이러한 특수 문자들은 HTML 문서에서 특정한 역할을 수행하거나 특수한 표현을 나타내기 위해 사용됩니다.
특수 문자의 예시로는 다음과 같은 문자들이 있습니다.
<: HTML 태그의 시작을 나타내는 역할을 합니다.>: HTML 태그의 끝을 나타내는 역할을 합니다.&: HTML 엔티티를 시작하는 신호로 사용되며, 특수 문자를 나타내기 위해 함께 사용됩니다."": 쌍따옴표. HTML 속성 값의 시작과 끝을 나타내는 역할을 합니다.'': 홑따옴표. HTML 속성 값의 시작과 끝을 나타내는 역할을 합니다.
이러한 특수 문자들은 HTML 문서에서 제대로 표현되기 위해는 특별한 처리가 필요하며, 'HTML 특수문자'라는 이름의 특수 문자를 만들어진 것입니다. 이 HTML 특수문자로 마크업하면 브라우저에서 제대로 표시됩니다.
HTML 특수 문자는 예약어를 제대로 표현하기 위한 특수 기호입니다.
HTML 특수 문자를 사용해서 앞서 사례로 살펴 본 HTML을 작성해 보겠습니다.
| 표시될 문자 | 실제 작성할 특수 문자 |
|---|---|
< |
< |
> |
> |
HTML 특수 문자를 사용하지 않으면, 웹 페이지의 내용이 잘못 해석될 수 있고, 텍스트의 일관성과 가독성이 훼손될 수 있습니다. HTML 특수 문자를 사용하여 예약어를 대체함으로써 이러한 문제를 방지하고, 정확한 표현과 호환성을 유지할 수 있습니다.
HTML 특수 문자 표
HTML에서 특수문자는 다음의 두 가지 상황에 사용합니다.
- 예약된 문자와의 충돌을 피하기 위해서
- 키보드에는 없는 특수한 문자를 표시하기 위해서
예약된 문자와의 충돌을 피하며 웹 콘텐츠 작성하려면 반드시 사용해야 할 HTML 특수 문자
| 표시될 문자 | 실제 작성할 특수 문자 |
|---|---|
< |
< |
> |
> |
& |
& |
" |
" |
' |
' |
키보드에는 없는 특수한 문자를 표시하기 위한 주요 HTML 특수 문자
HTML 특수 문자는 예약어를 제대로 표현하기 위한 특수 기호이지만,
키보드에 없는 특수한 기호들이 HTML 특수 문자 리스트에는 포함되어 있습니다.
이러한 키보드에는 없는 특수한 문자를 제대로 표시하기 위해서도 HTML 특수 문자를 사용합니다.
키보드에는 없는 특수한 문자를 표시하기 위한 주요 특수 문자를 HTML에 그대로 삽입해도 되고
표시되는 특수 문자를 그냥 복사해서 붙여 넣어도 됩니다.
| 표시될 문자 | 실제 작성할 특수 문자 |
|---|---|
| & | & |
| © | © |
| ® | ® |
| ¶ | ¶ |
| · | · |
| • | • |
| × | × |
| ÷ | ÷ |
| ¼ | ¼ |
| ½ | ½ |
| ¾ | ¾ |
| Σ | Σ |
| α | α |
| β | β |
| δ | δ |
| Ω | Ω |
| ← | ← |
| → | → |
| ↔ | ↔ |
| ↑ | ↑ |
| ↓ | ↓ |
| « | « |
| » | » |
| ▶ | ▶ |
| ▼ | ▼ |
| ♠ | ♠ |
| ♣ | ♣ |
| ♥ | ♥ |
| ♦ | ♦ |
공백을 나타내는 특수 문자( )
HTML 특수 문자 중에서는 일반적으로는 '띄어쓰기'라고 부르는 키보드의 스페이스(Space) 바를 누르면 입력되는 공백를 나타내는 것이 있습니다.
실제 작성할 특수 문자는 이고, 바꿈이 일어나지 않는 공백 문자(Non-breaking Space)입니다. 이 특수문자는 다음의 상황에서 유용합니다.
- 일반적인 상황에서 HTML에서는 공백 여러 개를 그냥 입력해도 하나로 줄어드는데 여러 번 띄어쓰기를 하고 싶을 때
- 줄바꿈없이 띄어쓰기를 하고 싶을 때
알아두세요! 위 HTML 특수 문자표 이 외에도 더 많은 HTML 특수 문자가 있습니다. 공식 목록 레퍼런스에서 확인해 보시기 바랍니다.
웹 페이지에서 이모지(이모티콘) 사용하기
이모지(Emoji)는 감정, 상황, 개념 등을 표현하기 위해 사용되는 작은 그래픽 아이콘입니다.
흔히 '이모티콘'이라고도 말합니다. 😃(웃는 얼굴), 🎉(파티 모자), ❤️(하트) 등이 일반적으로 사용되는 이모지입니다.
웹 페이지에 이모지를 삽입하는 방법에 대해 살펴 보세요!