[잡글] 이모지(emoji) 코드 html(티스토리 본문)로 넣기

이모지는 많은 사이트에서 쉽게 찾을 수 있는데.. 나처럼 유니코드를 이해하지 못한상태에서 사용하려고 하다가 이미지가 복사된 경험이 있는 개초보를 위해  아주 간단한 내용을 적어 본다.

 

 

 

 

 

 

위 사이트를 들어가 보면 U+00000 라고 코드가 적혀 있는데, 이는 유니코드로서, ㅁ+한자를 눌렀을 때 나오는 기호들처럼 사전 약속된 기호로 파악된다. 당연히 이를 그대로 html로 적으면 반영이 되지 않는다.
이에 대한 해결책은... 코드 앞에 있는 U+ 를 &#x 로 변경해주고 끝에 세미콜론을 찍어주면 끝이다.
즉 아래 웃는 얼굴 이모지 같은 경우, U+1F600 인데, 😀 이 될 것이다. 해당 태그의 폰트크기를 조정하여 이모지의 크기를 변경할 수 있다.

 

단, 이는 html에 해당하는 사항이고, 다른 언어 환경에서는 방식이 다르다. 예를 들어, 자바스크립트에서는 U+ 대신 0x 로 바꿔줘야한다는데, 관심사가 아니므로 배제하기로 한다.

 

 

 

물론, 위 사이트에서는 아주 친절하게 마우스를 오버하면 유니코드(U+로 시작하는..) 대신에 HTML 코드도 확인 할 수 있다. 티스토리 글쓰기 모드를 html로 변경하고, 이 코드를 그냥 가져다 붙이면, 이모지가 나오는 것을 확인할 수 있다.

 

 

 

아래와 같은 코드를 적는다면, 이런 결과값이 나오리라.

왜 이모지에서 명암이 사라져서, 샘플과 다르게  구려 보이는지는 모르겠다.

 

 

이후 글쓰기 모드를 기본모드로 변경한 후 다시 html모드로 확인하면, 코드가 전부 이모지로 변경되어 있다. 이후에는 그냥 복사해서 쓰면 되겠다.

 

 

 

 

 

 

--업데이트--

이모지를 편하게 넣을 수 있는 크롬 확장 프로그램이 있어, 아래 글에 적어보았다.

[잡글] 이모지(emoji) 작성 크롬 확장프로그램 - JoyPixels

 

끝.