Files

T

koriweb 9609c04755 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

4.0 KiB

Raw Blame History

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

title

CSS Icons Google

🎯 한 줄 통찰 (One-line insight)

Google Material Icons can be added by linking the Material Icons stylesheet in the <head> and placing <i class="material-icons"> elements whose text content is the icon name — no download or installation required. [S1]

🧠 핵심 개념 (Core concepts)

Icon library approach — icons can be added from the Google Material Icons library. [S1]
Stylesheet-based — to use the Google icons, add the Material Icons stylesheet link inside the <head> section. [S1]
No installation — no downloading or installation is required. [S1]

🧩 추출된 패턴 (Extracted patterns)

Stylesheet link in head — reference the Google Material Icons font stylesheet in <head>. [S1]
Name-as-text-content — each icon uses the material-icons class on an <i> element with the icon name placed as the text content (e.g. cloud, favorite). [S1]

📖 세부 내용 (Details)

Google Icons — to use the Google icons, add the following line inside the <head> section of your HTML page: [S1]

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Note: No downloading or installation is required! [S1]

Example — adding Google Material Icons: [S1]

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>

</body>
</html>

Each icon is rendered by an <i> element with the material-icons class, and the icon name (e.g. cloud, favorite, attachment, computer, traffic) is placed as the text content of the tag. For the complete set of icons, the page refers readers to its Icon Tutorial. [S1]

🛠️ 적용 사례 (Applied in summary)

The page's own example renders five Material Icons (cloud, favorite, attachment, computer, traffic) by linking the Google stylesheet and adding inline <i class="material-icons"> elements. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Single Google Material icon (language: HTML):

<i class="material-icons">cloud</i>

Required head reference:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

상태: draft
검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
신뢰 점수: 0.88
중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

상위/루트: CSS Tutorial
관련 개념: CSS Icons Font Awesome, CSS Icons Bootstrap, CSS Fonts
참조 맥락: Referenced when adding Material Design icons to a page via the Google fonts stylesheet.

📚 출처 (Sources)

[S1] W3Schools — CSS Icons Google — https://www.w3schools.com/css/css_icons_google.asp

📝 변경 이력 (Change history)

2026-06-23: Initial draft synthesized from the W3Schools "CSS Icons Google" page (Astra wiki-curation, P-Reinforce v3.1 format).

4.0 KiB Raw Blame History