본문 바로가기
HTML/HTML 기본문법

HTML 이모지(Emojis)

by flycoding 2023. 6. 1.
반응형

이모지는 UTF-8 문자 집합의 문자입니다. 😄 😍 💗

 

이모지란?

이모티콘은 이미지 또는 아이콘처럼 보이지만 그렇지 않다.

UTF-8(유니코드) 문자 집합의 문자(문자)이다.

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>I will display A B C</p> 
<p>I will display &#65; &#66; &#67;</p> 

</body>
</html>

HTML UTF-8 문자 &#65 예제

<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>이모지</h1>

<p>&#128512;</p>

</body>
</html>

HTML 이모지 emoji &#128512 예제

 

Emojis는 문자이기 때문에 HTML의 다른 문자와 마찬가지로 복사, 표시 및 크기 조정이 가능하다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<h1>이모지 크기</h1>

<p style="font-size:48px">
&#128512; &#128516; &#128525; &#128151;
</p>

</body>
</html>

HTML 이모지 emoji 크기 예제

 

UTF-8 내의 이모지 기호


이모지
🗻 &#128507;
🗼 &#128508;
🗽 &#128509;
🗾 &#128510;
🗿 &#128511;
😀 &#128512;
😁 &#128513;
😂 &#128514;
😃 &#128515;
😄 &#128516;
😅 &#128517;

 

지금까지 HTML 내에서 이모지에 대해 살펴보았다.

모두 화이팅입니다!!!

 

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

반응형

'HTML > HTML 기본문법' 카테고리의 다른 글

HTML URL(Uniform Resource Locators)  (0) 2023.06.03
HTML charset  (0) 2023.06.02
HTML 심볼(Symbols)  (0) 2023.05.31
HTML 엔티티(HTML Entities)  (0) 2023.05.30
HTML 스타일 안내  (0) 2023.05.29

댓글