[html] 웹페이지에 이모지 넣는 방법

오늘은 웹페이지에 이모지를 넣는 방법에 대해 살펴보도록 하겠습니다.

 

이모지(emoji)란?

이모지는 유니코드를 이용해 만든 그림 문자를 뜻합니다. 그렇다면 유니코드는 뭘까요? 유니코드는 전세계의 모든 문자를 특정 숫자(코드)와 1:1로 매칭한 것을 뜻합니다. 모든 문자는 나름대로 그 자신과 매칭되는 유니코드가 있는 것입니다.

 

 

- 유니코드 영역

 

위 문서를 보시면 전세계의 모든 문자가 유니코드에서 어떤 영역 범위에 속하는 지를 대략적으로 확인해보실 수 있습니다. 

 

아래와 같은 것들이 이모지입니다. 저희가 하루에도 몇 번씩 사용하는 것들이죠?

 

 

html 문서에 이모지 넣는 방법

그러면 이제 html 문서에 이모지를 넣는 방법에 대해 살펴보겠습니다. https://apps.timwhitlock.info/emoji/tables/unicode 사이트에 들어가서 원하는 이모지의 유니코드에서 앞에 있는 U+를 대신 &#x를 붙여준 상태로 html 문서상 원하는 위치에 넣어주시면 됩니다. 

 

 

무슨 말인가하면, U+1F601인 이모지를 넣으려면 😁을 html에 넣어줘야 한다는 것입니다.

 

U+1F601 -> 😁

 

<div>
안녕 &#x1F601;
</div>

 

 

이모지는 아이폰에서 보이는 것과 안드로이드에서 보이는 것이 다를 수 있으니 당황하지 마시길 바랍니다. 

 

 

관련 글

- html 문서 내  의 의미는?