bluemsi/2nd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
g1nation
2026-06-23 19:21:18 +09:00
parent 8957890d13
commit 9609c04755
379 changed files with 54618 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
10_Wiki/Topic_HTML/HTML_Id.md
+176
View File
@@ -0,0 +1,176 @@
---
id: html-id
title: "HTML Id"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["id attribute", "HTML id", "getElementById", "HTML bookmark", "unique id"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.90
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["html", "web", "frontend", "w3schools", "css"]
raw_sources: ["https://www.w3schools.com/html/html_id.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Id]]
## 🎯 한 줄 통찰 (One-line insight)
The HTML `id` attribute gives an element a unique identifier — used once per page — that CSS, JavaScript, and same-page bookmark links can target precisely. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Unique per page** — the `id` attribute specifies a unique id for an HTML element; you cannot have more than one element with the same id in an HTML document. [S1]
- **CSS selector** — in a stylesheet an id is referenced with a hash (e.g. `#myHeader`). [S1]
- **Naming rules** — the id name is case sensitive, must contain at least one character, cannot start with a number, and must not contain whitespaces. [S1]
- **Class vs. id** — a class name can be used by multiple HTML elements, while an id name must only be used by one element within the page. [S1]
- **Bookmarks** — the `id` attribute can also be used to create HTML bookmarks (jump links). [S1]
- **JavaScript access** — `getElementById()` selects the single element with a given id. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Unique-target pattern** — assign an id to one element and target it with `#id` in CSS or `getElementById` in JS. [S1]
- **Bookmark/anchor pattern** — give a target element an id and link to it with `href="#id"`. [S1]
- **Cross-page bookmark pattern** — link to an id on another page with `href="page.html#id"`. [S1]
## 📖 세부 내용 (Details)
**The id Attribute.** The HTML `id` attribute is used to specify a unique id for an HTML element. You cannot have more than one element with the same id in an HTML document. The `id` attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id. The syntax for id is: write a hash character (`#`), followed by an id name, then define the CSS properties within curly braces. [S1]
Id with CSS styling — a single element styled via `#myHeader`: [S1]
```html
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>
```
> **Note:** The id name is case sensitive! The id name must contain at least one character, cannot start with a number, and must not contain whitespaces (spaces, tabs, etc.). [S1]
**Difference Between Class and ID.** A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page. [S1]
```html
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>
<!-- Multiple elements with same class -->
<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>
```
**HTML Bookmarks with id and Links.** Bookmarks are used to allow readers to jump to specific parts of a webpage. To use a bookmark you must first create it, and then add a link to it. When the link is clicked, the page will scroll down or up to the location with the bookmark. [S1]
Create the bookmark:
```html
<h2 id="C4">Chapter 4</h2>
```
Add a link to the bookmark from within the same page:
```html
<a href="#C4">Jump to Chapter 4</a>
```
Or add a link to the bookmark from another page:
```html
<a href="html_demo.html#C4">Jump to Chapter 4</a>
```
**Using the id Attribute in JavaScript.** The `id` attribute can also be used by JavaScript to perform some tasks for that specific element. JavaScript can access an element with a specific id with the `getElementById()` method. [S1]
```html
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
```
**Chapter Summary.** [S1]
- The `id` attribute is used to specify a unique id for an HTML element.
- The value of the `id` attribute must be unique within the HTML document.
- The `id` attribute is used by CSS and JavaScript to style/select a specific element.
- The value of the `id` attribute is case sensitive.
- The `id` attribute is also used to create HTML bookmarks.
- JavaScript can access an element with a specific id with the `getElementById()` method.
## 🛠️ 적용 사례 (Applied in summary)
The `#myHeader` styled element, the class-vs-id comparison page, the Chapter-4 bookmark, and the `getElementById("myHeader")` content swap are the canonical applied examples. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Define and target an id (HTML + CSS):
```html
<style>
#myHeader { background-color: lightblue; }
</style>
<h1 id="myHeader">My Header</h1>
```
Same-page bookmark (HTML):
```html
<h2 id="C4">Chapter 4</h2>
<a href="#C4">Jump to Chapter 4</a>
```
Select by id in JavaScript:
```javascript
document.getElementById("myHeader").innerHTML = "Have a nice day!";
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **Use `id`** for a single, unique element on the page (targeted with `#id`); must be unique. [S1]
- **Use `class`** when the same styling/selection should apply to multiple elements (targeted with `.class`). [S1]
## ⚖️ 모순 및 업데이트 (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 Classes]], [[HTML Div]], [[HTML JavaScript]], [[HTML Block and Inline]]
- **참조 맥락:** Referenced whenever a single element must be uniquely styled, scripted, or linked as a bookmark.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Id Attribute — https://www.w3schools.com/html/html_id.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Id Attribute" page (Astra wiki-curation, P-Reinforce v3.1 format).