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

6.6 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

HTML Classes

🎯 한 줄 통찰 (One-line insight)

The HTML class attribute assigns one or more class names to elements so CSS and JavaScript can select and act on a whole group of elements at once. [S1]

🧠 핵심 개념 (Core concepts)

Purpose — the class attribute is often used to point to a class name in a style sheet; it can also be used by JavaScript to access and manipulate elements with the specific class name. [S1]
CSS selector — in a stylesheet a class is referenced with a period (e.g. .city). [S1]
Shared by many elements — multiple HTML elements can share the same class. [S1]
Multiple classes per element — separate class names with a space (e.g. class="city main"); the element is styled according to all classes specified. [S1]
Works across element types — different HTML elements can point to the same class name. [S1]
JavaScript access — getElementsByClassName() returns all elements with a given class name. [S1]
Usable anywhere — the class attribute can be used on any HTML element, and the class name is case sensitive. [S1]

🧩 추출된 패턴 (Extracted patterns)

Shared-style pattern — give several elements the same class so one CSS rule styles them all. [S1]
Multi-class pattern — combine general and specific classes on one element (class="city main"). [S1]
Inline-styling pattern — apply a class to a <span> to style a fragment of text. [S1]
JS-grouping pattern — collect and manipulate all elements of a class with getElementsByClassName(). [S1]

📖 세부 내용 (Details)

The class Attribute. The class attribute is often used to point to a class name in a style sheet. It can also be used by JavaScript to access and manipulate elements with the specific class name. [S1]

Basic class with CSS styling — three headings share the city class: [S1]

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>

Using the class attribute on <div> elements. [S1]

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

The class attribute on inline (<span>) elements. [S1]

<!DOCTYPE html>
<html>
<head>
<style>
.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>

Multiple Classes. HTML elements can belong to more than one class. To define multiple classes, separate the class names with a space, e.g. <div class="city main">. The element will be styled according to all the classes specified. [S1]

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

Different Elements Can Share Same Class. Different HTML elements can point to the same class name. [S1]

<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>

Using the class Attribute in JavaScript. JavaScript can access elements with a specific class name by using the getElementsByClassName() method. [S1]

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

Tip: The class attribute can be used on any HTML element. [S1] Note: The class name is case sensitive! [S1]

Chapter Summary. [S1]

The HTML class attribute specifies one or more class names for an element.
Classes are used by CSS and JavaScript to select and access specific elements.
The class attribute can be used on any HTML element.
The class name is case sensitive.
Different HTML elements can point to the same class name.
JavaScript can access elements with a specific class name with the getElementsByClassName() method.

🛠️ 적용 사례 (Applied in summary)

The shared city class (across headings, divs, and paragraphs), the multi-class city main heading, and the getElementsByClassName("city") hide-function are the canonical applied examples. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Define and apply a class (HTML + CSS):

<style>
.city { color: white; }
</style>
<h2 class="city">London</h2>

Multiple classes (HTML):

<div class="city main">...</div>

Select by class in JavaScript:

var x = document.getElementsByClassName("city");

⚖️ 모순 및 업데이트 (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.90
중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

상위/루트: HTML Tutorial
관련 개념: HTML Id, HTML Div, HTML Block and Inline, HTML JavaScript
참조 맥락: Referenced whenever a group of elements must share styling or be selected together by CSS or JavaScript.

📚 출처 (Sources)

[S1] W3Schools — HTML Classes — https://www.w3schools.com/html/html_classes.asp

📝 변경 이력 (Change history)

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

6.6 KiB Raw Blame History