▶ 이모티콘은 UTF-8 문자셋의 문자이다 : 😄 😍 💗
■ 이모티콘은 무엇인가?
▶ 이모티콘은 이미지나 아이콘처럼 보이지만 이미지나 아이콘은 아니다.
※ UTF-8은 세계의 거의 모든 문자와 기호를 다룬다.
■ HTML charset 속성
▶ 올바른 HTML 페이지를 표시하려면 웹 Browser가 페이지에 사용된 문자셋을 알아야 한다.
▶ <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 A B C</p>
</body>
</html>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_emojis_utf8
□ 예시 설명
▶ <meta charset="UTF-8"> 요소는 문자 집합을 정의한다.
▶ 문자 A, B, C는 숫자로 65, 66, 67로 표시된다.
▶ Browser가 문자를 표시하고 있음을 인식하게 하려면 엔티티 번호를 "&#"을 시작하고 " ; "로 끝나야 한다.
■ 이모티콘 문자
▶ 이모티콘은 UTF-8 알파벳의 문자이기도 하다.
▷ 😄 : 128516
▷ 😍 : 128525
▷ 💗 : 128151
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>My First Emoji</h1>
<p>😀</p>
</body>
</html>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_emojis
▶ 이모티콘은 문자이므로 HTML의 다른 문자와 마찬가지로 복사, 표시 및 크기 조정이 가능하다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Sized Emojis</h1>
<p style="font-size:48px">
😀 😄 😍 💗
</p>
</body>
</html>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_emojis_size
■ UTF-8에서 일부 이모티콘 기호
▶ 전체 이모티콘 : https://www.w3schools.com/charsets/ref_emoji.asp
출처 : https://www.w3schools.com/html/html_emojis.asp
HTML Emojis
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'HTML' 카테고리의 다른 글
| HTML / (49) URL (Uniform Resource Locators) (0) | 2023.02.27 |
|---|---|
| HTML / (48) 인코딩 (문자 집합) (0) | 2023.02.27 |
| HTML / (46) 기호 (0) | 2023.02.27 |
| HTML / (45) 엔티티 (0) | 2023.02.27 |
| HTML / (44) 스타일 가이드 (0) | 2023.02.27 |