[JavaScript] Exploprer에서 이모티콘 제대로 보여주기

스마트폰에 내장된 기본이모티콘 많이들 쓰시나요? 전 예전에는 ios랑 안드로이드랑 호환이 안되서 많이 안쓰다가, 최근에는 호환이 잘 되는 것 같아 자주 쓰고 있습니다.
그런데 이 이모티콘들, PC에서도 쓸 수 있습니다.

• 맥os: 타이핑 중, command+control+space 키[note]OS X 매버릭스의 새로운 이모티콘•특수문자 입력 방법 마스터하기[/note]
  

  

• 윈도우8: 터치키보드에서 이모티콘 선택[note]how to use emoji on windows 8[/note]
  

  

• 공통: 이모티콘 사이트( get emoji 등)에서 복사+붙여넣기
  

  

---

문제는 이 이모티콘이 이쁘게 적용되지 않는 브라우저들도 있다는 거죠.
(여기서는 ie를 예로 들었지만 크롬에서도 비슷합니다..)

지원 안되는 브라우저들 시르다이 상황에 대한 해결책이 바로 트위터에서 만든 twemoji인 것이죠.

10초만에 설치하기

twemoji는 github에 공개되어있고, cdn에서 끌어다 쓸 수 있어서 매우 편합니다. 적용하고 싶으신분들은 아래 두줄만 html코드 중 </body> 위에 추가시키면 끝입니다.

<script src="//twemoji.maxcdn.com/twemoji.min.js"></script>

<script>twemoji.parse(document.body);</script>

view rawtwemoji_default.js hosted with ❤ by GitHub

그런데 기본크기가 36×36으로 좀 큽니다. 그래서 작게 나오도록 코드를 수정했습니다.

<script src="//twemoji.maxcdn.com/twemoji.min.js"></script>

<script>twemoji.parse(document.body, {size: 16});</script>

view rawtwemoji_size16.js hosted with ❤ by GitHub

사이즈는 16, 36, 72가 있습니다. 16과 36의 중간크기가 없는게 아쉽네요

적용전

적용후