이모지(Emoji) 소개
이모지는 감정, 상황, 개념 등을 표현하기 위해 사용되는 작은 그래픽 아이콘입니다. 흔히 '이모티콘'이라고도 말합니다.
이모지는 주로 텍스트 메시지, 소셜 미디어 게시물, 이메일 등에서 사용되며, 감정이나 의도를 명확하게 전달하거나 대화를 더 재미있게 만들기 위해 사용됩니다. 예를 들면, 😃(웃는 얼굴), 🎉(파티 모자), ❤️(하트) 등이 일반적으로 사용되는 이모지입니다. 이모지는 다양한 종류와 다양한 의미를 가지고 있으며, 각 플랫폼 및 운영체제마다 디자인이 다를 수 있습니다.
웹 페이지에 이모지 삽입하는 방법
- 그냥 복사해서 붙여 넣기
- 이모지 아이콘에 해당하는 유니코드를 HTML에 삽입하기
그냥 복사해서 붙여 넣기
말 그대로 원하는 이모지를 복사해서 원하는 곳에 붙여 넣으면 됩니다. 메모장에 붙여 넣어도 적용됩니다. HTML이나 CSS에 그냥 붙여 넣으면 됩니다.
코드 부연설명
::before 가상 요소 선택자는 선택한 요소의 실제 콘텐츠 바로 앞에(before) 첫 번째 자식인 스타일이 가능한 가상의 요소를 CSS로 생성하는 선택자입니다.
코드 부연설명
<button> 태그는 내용물에 의해 레이블이 지정된 버튼을 나타냅니다.
이모지 아이콘에 해당하는 유니코드를 HTML에 삽입하기
HTML을 조금만 이해하고 있으면 HTML의 콘텐츠에 유니코드를 삽입하면 됩니다.
유니코드 값을 직접 HTML 문서의 텍스트 내에 삽입하면 대부분의 브라우저와 운영체제에서 이모지가 올바르게 표시됩니다. 다음은 유니코드를 사용하여 HTML 문서에 이모지를 삽입하는 방법의 간단한 예입니다.
유니코드(Unicode)란 전 세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 처리하기 위한 국제 표준 문자 전산 처리 방식입니다. 이 표준은 문자와 그에 해당하는 숫자 코드를 매핑하여 문자를 컴퓨터에서 표현할 수 있도록 합니다. 유니코드는 다양한 언어의 문자뿐만 아니라 기호, 숫자, 제어 문자 등을 포함하고 있으며, 현재는 수천 개의 문자를 포함하고 있습니다. 유니코드는 전 세계의 언어와 문자 체계를 아우르기 위해 지속적으로 발전하고 있으며, 새로운 문자와 특수 기호가 추가될 때마다 업데이트됩니다.
| 이모지 | 유니코드 |
|---|---|
| 😃 | 😃 |
| 🧡 | 🧡 |
코드 부연설명
font-size 속성은 글자(폰트)의 크기를 지정합니다.
😃: 웃는 얼굴 이모지의 유니코드 값을 삽입했습니다.🧡: 하트 이모지의 유니코드 값을 삽입했습니다. CSS의font-size: 2em;으로 이미모지의 크기를 두 배로 스타일했습니다.- 이모지의 유니코드를 HTML에 삽입하면 제한적이기는 하지만 CSS를 적용할 수 있습니다.
알아두세요! 브라우저나 운영체제에 따라 이모지가 표시되는 디자인이 다를 수 있습니다.
이모지 유니코드 리스트 표
이모지의 종류는 매우 다양합니다. 지금도 계속 추가되고 있습니다. 아래는 유용하게 사용할 수 있는 이모지 유니코드 리스트를 표로 구성한 것입니다.
| 이모지 | 유니코드 |
|---|---|
| 😃 | 😃 |
| 😂 | 😂 |
| 😅 | 😅 |
| 🤣 | 🤣 |
| 😥 | 😥 |
| 😆 | 😆 |
| 😍 | 😍 |
| 😱 | 😱 |
| 😴 | 😴 |
| 😵 | 😵 |
| 😷 | 😷 |
| 🤥 | 🤥 |
| 😝 | 😝 |
| 🤫 | 🤫 |
| 🤭 | 🤭 |
| ⌚ | ⌚ |
| ⏰ | ⏰ |
| ⏱ | ⏱ |
| ⚽ | ⚽ |
| ⚾ | ⚾ |
| 🏐 | 🏐 |
| 🏀 | 🏀 |
| 🏈 | 🏈 |
| 🏓 | 🏓 |
| ☝ | ☝ |
| ✌ | ✌ |
| ✋ | ✋ |
| 👆 | 👆 |
| 👇 | 👇 |
| 👈 | 👈 |
| 👉 | 👉 |
| 👍 | 👍 |
| 👎 | 👎 |
| 👌 | 👌 |
| 🤟 | 🤟 |
| 🌭 | 🌭 |
| 🍔 | 🍔 |
| 🌮 | 🌮 |
| 🍕 | 🍕 |
| 🍞 | 🍞 |
| 🍩 | 🍩 |
| 🥞 | 🥞 |
| 🥣 | 🥣 |
| ☕ | ☕ |
| 🥛 | 🥛 |
| 🌷 | 🌷 |
| 🌻 | 🌻 |
| 🌼 | 🌼 |
| 🌽 | 🌽 |
| 🍅 | 🍅 |
| 🍆 | 🍆 |
| 🍇 | 🍇 |
| 🍉 | 🍉 |
| 🍊 | 🍊 |
| 🍍 | 🍍 |
| 🍎 | 🍎 |
| 🍒 | 🍒 |
| 🍓 | 🍓 |
| 🥝 | 🥝 |
| 🌂 | 🌂 |
| 🎉 | 🎉 |
| 🎨 | 🎨 |
| 💊 | 💊 |
| 📗 | 📗 |
| 📘 | 📘 |
| 📕 | 📕 |
| 🔊 | 🔊 |
| 🎸 | 🎸 |
| 🎹 | 🎹 |
| 🎺 | 🎺 |
| 🎻 | 🎻 |
| 🐤 | 🐤 |
| 🦅 | 🦅 |
| 🦉 | 🦉 |
| 🐵 | 🐵 |
| 🐶 | 🐶 |
| 🐹 | 🐹 |
| 🦁 | 🦁 |
| 👀 | 👀 |
| 👂 | 👂 |
| 👃 | 👃 |
| 🙏 | 🙏 |
| 🙅 | 🙅 |
| 🙆 | 🙆 |
| 🤦 | 🤦 |
| 👄 | 👄 |
| 💋 | 💋 |
| 👅 | 👅 |
| 🧡 | 🧡 |
| 💖 | 💖 |
| 💘 | 💘 |
| 💕 | 💕 |
| 💏 | 💏 |
| 💑 | 💑 |
| 🚁 | 🚁 |
| 🚊 | 🚊 |
| 🚑 | 🚑 |
| 🚕 | 🚕 |
| 🚚 | 🚚 |
| 🚛 | 🚛 |
| ✨ | ✨ |
다양한 이모지 리소스 및 라이브러리 소개
지금까지 사용 방법으로 설명한 1. 그냥 복사해서 붙여 넣기와 2. 이모지 아이콘에 해당하는 유니코드를 HTML에 삽입하기 방법은 브라우저에서 기본적으로 지원하는 이모지입니다. 브라우저는 기본적으로 운영 체제에서 제공하는 이모지 폰트를 사용하여 유니코드 이모지를 표시합니다.
하지만, 특정 라이브러리나 리소스를 사용하면 이모지를 이미지나 다른 형식으로 대체하여 표시할 수 있습니다. 이러한 방식은 브라우저나 운영 체제의 이모지 폰트와는 독립적으로 작동하며, 특정 라이브러리나 리소스의 설치 또는 적용이 필요합니다.
이러한 라이브러리나 리소스를 사용하면 다양한 스타일의 이모지를 제공하거나, 특정 플랫폼에서 일관된 이모지 표현을 보장할 수 있습니다. 하지만, 이러한 기술을 사용할 때는 추가적인 리소스 로딩이 필요하고, 이미지나 다른 형식의 이모지를 사용하기 때문에 일부 환경에서는 성능이나 호환성 문제가 발생할 수도 있습니다.
따라서, 웹 페이지 또는 애플리케이션을 개발할 때 이러한 이모지 리소스나 라이브러리를 사용할지 여부는 해당 프로젝트의 요구사항과 성능, 호환성 등을 고려하여 결정해야 합니다. 기본적으로 브라우저에서 지원하는 유니코드 이모지를 사용하는 것이 가장 간단하고 일반적인 방법입니다.
이러한 사항을 유념해서 이모지를 사용하면 됩니다. 이모지 리소스 및 라이브러리를 소개해 드리겠습니다.
| Emoji CSS | Emoji CSS는 이모지 아이콘을 CSS 클래스로 쉽게 사용할 수 있도록 제공하는 라이브러리입니다. 이모지를 HTML 요소에 적용하려면 해당 클래스를 추가하면 됩니다. |
|---|---|
| Twemoji | Twemoji는 Twitter에서 개발한 이모지 라이브러리로, 이모지를 이미지로 제공합니다. CSS나 JavaScript를 사용하여 이모지를 웹 페이지에 추가할 수 있습니다. |
| EmojiOne | EmojiOne은 이모지 아이콘을 제공하는 오픈 소스 프로젝트입니다. 벡터 형식으로 제공되며, PNG, SVG, 이모지 코드 등 다양한 형식으로 사용할 수 있습니다. |
| FontAwesome | FontAwesome은 다양한 아이콘을 제공하는 인기있는 아이콘 라이브러리입니다. 이모지도 포함되어 있어 웹 페이지에서 이모지 아이콘을 쉽게 사용할 수 있습니다. |
| Emojipedia | Emojipedia: Emojipedia는 이모지에 관한 종합적인 정보와 검색 기능을 제공하는 온라인 리소스입니다. 이모지의 의미, 유니코드 값, 다양한 스타일 등을 확인할 수 있습니다. |
이것들은 몇 가지 인기있는 이모지 리소스 및 라이브러리입니다. 각각의 특징과 용도에 따라 선택하여 사용할 수 있습니다. 이외에도 다른 라이브러리나 리소스도 존재할 수 있으므로, 필요에 맞게 조사하고 선택하면 됩니다.
HTML 특수 문자 사용법에 대해 궁금하신가요?
HTML 특수문자는 HTML 문서에서 특수 기호를 표시하기 위해 사용하는 문자입니다.
HTML 특수 문자 사용법과 의의에 대해 살펴 보세요!