star

#Ludens

#social #IT #web #iPad #fashion #psychology #responsive

PC웹에서 twemoji로 이모티콘 이쁘게 보기

2015.06.26 14:51 in Web/Coding

emoji
emoji by downloadsource.fr

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

그런데 이 이모티콘들, PC💻에서도 쓸 수 있습니다.

  • 맥OS: 타이핑 중, Command+Control+Space 키[각주:1]
  • 윈도우8: 터치키보드에서 이모티콘 선택[각주:2]
  • 공통: 이모티콘 사이트(Get Emoji 등)에서 복사+붙여넣기

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

지원 안되는 브라우저들 시르다 😭😭

이 상황에 대한 해결책이 바로 트위터에서 만든 twemoji인 것이죠. 😆😆

10초만에 설치하기

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

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

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

참 쉽죠? :)

  1. <a href="http://macnews.tistory.com/1723" target="_blank">OS X 매버릭스의 새로운 이모티콘•특수문자 입력 방법 마스터하기</a> [본문으로]
  2. <a href="http://blog.getemoji.com/emoji-keyboard-windows" target="_blank">How To Use Emoji On Windows 8</a> [본문으로]
신고
tag, , , , , , , , , , , , , ,
받은 트랙백이 없고 , 댓글이 없습니다.

티스토리 툴바