HTML Emogi 이모지 제공 사이트 (쉬운 복붙과 태그 및 유니코드)

이모지(Emogi)를 아십니까? 카카오톡에는 이모티콘이 있습니다. 이모지는 사실 카톡의 이모티콘보다 더 긴 역사(?)를 가지고 있죠. 태그만으로 사용할 수 있고 단순히 복북해서 사용할수도 있습니다.

😀🤣😨😺🦊🐮

이렇게 말입니다. 위의 상태를 HTML로 살펴봐도 그냥 이미지로 적용되어 있어요. 즉 아이콘 이미지를 그대로 텍스트처럼 복붙해서 사용하는 방법이 가장 일반적이면서도 쉬운 방법입니다. 위의 아이콘을 제공하는 사이트는 이것입니다.

아이콘 복붙해서 사용

Icons and Symbols - HTML Character Code Picker

이곳에 방문하시어 다양한 아이콘을 살펴보시고 원하는 아이콘을 클릭해 복사 후 붙여넣어 사용하면 됩니다.

보시면 이모지 위에 카테고리가 있습니다. 카테고리를 선택해서 원하는 이모지를 선택해 보시기 바랍니다. 본문 처음에 삽입된 이모지는 이 방법으로 사용되었습니다.

HTML 코드

위의 플랫폼 사이트에서 조금 더 아래로 내려가보시면 HTML 코드로 사용 가능한 이모지가 있습니다. 각 이모지 아이콘마다 아래에 &#으로 시작하는 코드가 있을거에요. 해당 태그를 그대로 복사하시어 <p>태그로 감싼 후 원하는 위치에 그대로 삽입하면 됩니다. 만약 뺑뺑이 이모지를 사용할 계획이라면 최종적으로 이런 형태가 되겠죠.

<p>&#127744;</p>

HTML 태그를 사용하기에 적절한 상황은 홈페이지를 제작할 때 레이아웃의 디자인으로서 사용하기에 요긴합니다. 따라서 일반적으로 아이콘처럼 사용하기에는 다소 부적합한 방법입니다. 그래도 알고 있으면 요긴하게 쓸 수 있을테니 알아둡시다.

유니코드

유니코드로도 활용할 수 있습니다.

Emoji unicode characters for use on the web

이 사이트에서는 각종 아이콘들을 유니코드로 제공하고 있습니다. 사용 방법은 다음과 같습니다.

원하는 이모지를 찾습니다. 발견했다면 유니코드를 복사합니다. 그리고 유니코드를 수동으로 변환합니다.

U+1F602 > &#x1F602

이렇게요. 즉 U+를 &#x로 변경해서 HTML UTF-8에서 인식 가능한 태그 형태로 바꿔서 사용해야 합니다. 상당히 번거롭죠? 따라서 유니코드 사용 방법은 비추천합니다. 이것도 그냥 알아만 두시면 될 것 같습니다. 끝.