docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)

W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더). - Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외) - Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체) - Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속) 각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-23 19:21:18 +09:00
parent 8957890d13
commit 9609c04755
379 changed files with 54618 additions and 6 deletions
@@ -0,0 +1,146 @@
+---
+id: html-emojis
+title: "HTML Emojis"
+category: "Frontend"
+status: "draft"
+verification_status: "conceptual"
+canonical_id: ""
+aliases: ["HTML emoji", "emojis in HTML", "Unicode emojis", "UTF-8 emojis", "emoji characters", "emoji entity numbers"]
+duplicate_of: ""
+source_trust_level: "B"
+confidence_score: 0.89
+created_at: 2026-06-23
+updated_at: 2026-06-23
+review_reason: ""
+merge_history: []
+tags: ["html", "web", "frontend", "emojis", "unicode", "utf-8", "w3schools"]
+raw_sources: ["https://www.w3schools.com/html/html_emojis.asp"]
+applied_in: []
+github_commit: ""
+---
+
+# [[HTML Emojis]]
+
+## 🎯 한 줄 통찰 (One-line insight)
+Emojis look like images but are actually **letters (characters) from the UTF-8 (Unicode) character set**, so they can be copied, displayed, and sized just like any other HTML character. [S1]
+
+## 🧠 핵심 개념 (Core concepts)
+- **Emojis are characters, not images** — they are letters from the UTF-8 (Unicode) character set, which is why they behave like ordinary text. [S1]
+- **Charset must be declared** — to display a page correctly the browser must know its character set, declared with `<meta charset="UTF-8">`. If not specified, UTF-8 is the default in HTML. [S1]
+- **Entity numbers** — each emoji has a numeric reference (e.g. `&#128512;` for 😀), exactly like other character entities. [S1]
+- **Styleable like text** — because emojis are characters, they can be copied, displayed, and sized (e.g. via `font-size`) just like any other character. [S1]
+
+## 🧩 추출된 패턴 (Extracted patterns)
+- **Charset declaration pattern** — `<meta charset="UTF-8">` in the document head. [S1]
+- **Numeric character pattern** — `&#NNN;` renders a Unicode character; e.g. `&#65;` → A, `&#128512;` → 😀. [S1]
+- **Sizing pattern** — wrap emojis in a styled element, e.g. `<p style="font-size:48px">😀</p>`. [S1]
+
+## 📖 세부 내용 (Details)
+**What are Emojis?**
+Emojis look like images, but they are not. Emojis are letters (characters) from the UTF-8 (Unicode) character set. Examples shown include 😄 😍 💗. [S1]
+
+**The HTML charset Attribute**
+To display an HTML page correctly, a web browser must know the character set used in the page. This is specified in the `<meta>` tag: `<meta charset="UTF-8">`. If not specified, UTF-8 is the default character set in HTML. [S1]
+
+**UTF-8 Characters**
+Because letters are UTF-8 characters, they can be displayed by their entity numbers. The characters A, B, and C are displayed by the numbers 65, 66, and 67: [S1]
+```html
+<!DOCTYPE html>
+<html>
+<meta charset="UTF-8">
+<body>
+
+<p>I will display A B C</p>
+<p>I will display &#65; &#66; &#67;</p>
+
+</body>
+</html>
+```
+The `<meta charset="UTF-8">` element defines the character set. [S1]
+
+**Emoji Characters**
+Emojis are also characters from the UTF-8 alphabet and can be referenced by their entity number. A basic emoji display: [S1]
+```html
+<!DOCTYPE html>
+<html>
+<meta charset="UTF-8">
+<body>
+
+<h1>My First Emoji</h1>
+
+<p>&#128512;</p>
+
+</body>
+</html>
+```
+
+Since emojis are characters, they can be copied, displayed, and sized just like any other character in HTML — here using `font-size`: [S1]
+```html
+<!DOCTYPE html>
+<html>
+<meta charset="UTF-8">
+<body>
+
+<h1>Sized Emojis</h1>
+
+<p style="font-size:48px">
+&#128512; &#128516; &#128525; &#128151;
+</p>
+
+</body>
+</html>
+```
+
+**Emoji reference values (sample)** [S1]
+
+| Emoji | Value |
+|---|---|
+| 🗻 | `&#128507;` |
+| 🗼 | `&#128508;` |
+| 🗽 | `&#128509;` |
+| 🗾 | `&#128510;` |
+| 🗿 | `&#128511;` |
+| 😀 | `&#128512;` |
+| 😁 | `&#128513;` |
+| 😂 | `&#128514;` |
+| 😃 | `&#128515;` |
+| 😄 | `&#128516;` |
+| 😅 | `&#128517;` |
+
+**HTML Emoji Examples**
+The page lists emoji categories with sample characters, including Smileys (😀 😂 😊 😎 😜), Hands (✌ ✊ ☝ ✋ 👌), and further categories: People, Office, Places, Transport, Animals, Food, Plants, Fruits, Sports, Earth & Sky, Weather, Clothing, Audio/Video, Celebration, Entertainment, and Symbols. [S1]
+
+## 🛠️ 적용 사례 (Applied in summary)
+The "My First Emoji" and "Sized Emojis" examples above are the canonical applied cases: rendering an emoji by entity number and scaling it with CSS `font-size`. No external project/commit applications found in the source.
+
+## 💻 코드 패턴 (Code patterns)
+Display an emoji by entity number (HTML):
+```html
+<meta charset="UTF-8">
+<p>&#128512;</p>
+```
+Size emojis like text (HTML):
+```html
+<p style="font-size:48px">&#128512; &#128516; &#128525; &#128151;</p>
+```
+
+## ⚖️ 모순 및 업데이트 (Contradictions & updates)
+No contradictions found in the source. [S1]
+
+## ✅ 검증 상태 및 신뢰도
+- **상태:** draft
+- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
+- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
+- **신뢰 점수:** 0.89
+- **중복 검사 결과:** 신규 생성 (New discovery)
+
+## 🔗 지식 그래프 (Knowledge Graph)
+- **상위/루트:** [[HTML Tutorial]]
+- **관련 개념:** [[HTML Symbols]], [[HTML Charsets]], [[HTML Entities]], [[HTML URL Encode]]
+- **참조 맥락:** Referenced when adding emoji or Unicode characters to a page, which depends on declaring the UTF-8 character set.
+
+## 📚 출처 (Sources)
+- [S1] W3Schools — HTML Emojis — https://www.w3schools.com/html/html_emojis.asp
+
+## 📝 변경 이력 (Change history)
+- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Emojis" page (Astra wiki-curation, P-Reinforce v3.1 format).