HTML에서 이모티콘 사용

에모지(Emoji)는 UTF-8 문자셋에서 오는 문자입니다:   

에모지는 무엇인가요?

에모지(Emoji)는 이미지나 아이콘과 유사하지만, 그렇지 않습니다.

그들은 UTF-8 (Unicode) 문자셋에서 완한 글자(문자)입니다.

힌트:UTF-8는 전 세계의 모든 문자와 기호를 거의 다 컵니다.

HTML charset 속성

HTML 페이지를 올바르게 표시하기 위해, 웹 브라우저는 페이지에서 사용하는 문자셋을 알아야 합니다.

이것은 <meta> 태그에서 지정된:

<meta charset="UTF-8">

힌트:지정되지 않으면, UTF-8는 HTML의 기본 문자셋입니다.

UTF-8 문자

많은 UTF-8 문자는 키보드에서 입력할 수 없지만, 항상 숫자(고유 번호로 불리우며)로 표시할 수 있습니다:

  • A는 65입니다.
  • B는 66입니다.
  • C는 67입니다.

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>저는 A B C 를 보여줄게요.</p>
<p>저는 A B C 를 보여줄게요.</p>
</body>
</html>

개인적으로 시도해 보세요

예제 설명

<meta charset="UTF-8"> 요소가 문자 집합을 정의합니다.

문자 A, B, C는 숫자 65, 66 및 67으로 표시됩니다.

브라우저가 표시하는 문자를 이해하려면, &로 시작하고 ;(콜론)으로 끝내는 엔티티 번호로 해야 합니다.

이모지 문자

이모지는 UTF-8 문자에서도 비롯됩니다:

  • 🙄은 128516입니다
  • 😘은 128525입니다
  • 👩‍❤️‍👨는 128151입니다

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>제 첫 Emoji</h1>
<p>😀</p>
</body>
</html>

개인적으로 시도해 보세요

이모지는 문자이므로, HTML에서 다른 어떤 문자와도 같이 복사하고 표시하고 크기를 조정할 수 있습니다.

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>확대된 표정 기호</h1>
<p style="font-size:48px">
😉 😆 🔅 🙄
</p>
</body>
</html>

개인적으로 시도해 보세요

UTF-8에서 일부 이모지 기호

이모지 값
😦 😥
😣 😟
😞 😖
😕 😔
😓 😑
😐 😑
😐 😀
😁 😂
😃 😅
🙄 😆
🔅 😉

전체 목록을 확인하려면 우리의 HTML Emoji 참조 매뉴얼에 방문하세요.