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>
This commit is contained in:
@@ -0,0 +1,87 @@
|
||||
---
|
||||
id: css-grid-item-order
|
||||
title: "CSS Grid Item Order"
|
||||
category: "Frontend"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["order property", "grid visual order", "CSS Grid Items Order", "reorder grid items", "grid source order", "DOM order vs visual order"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.88
|
||||
created_at: 2026-06-23
|
||||
updated_at: 2026-06-23
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["css", "web", "frontend", "w3schools", "grid", "accessibility"]
|
||||
raw_sources: ["https://www.w3schools.com/css/css_grid_item_order.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[CSS Grid Item Order]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The CSS `order` property sets the visual order of grid items independently of their HTML source order — but it changes only the visual presentation, not the DOM order, which affects screen-reader users. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`order` property** — can be used to define the visual order of the grid items. [S1]
|
||||
- **Source order is not display order** — the first grid item in the HTML source code does not have to appear as the first item in the grid container. [S1]
|
||||
- **Visual only** — the `order` property provides visual reordering, but it does not change the logical order of elements in the DOM. [S1]
|
||||
- **Accessibility impact** — this affects users navigating with assistive technologies like screen readers, as the content will be read in a different order than it is visually presented. [S1]
|
||||
|
||||
## 🧩 추출된 패턴 (Extracted patterns)
|
||||
- **Numeric reordering** — assign each item a numeric `order` value; items render in ascending order regardless of HTML position. [S1]
|
||||
- **Decoupled layout** — visual sequencing is decoupled from document structure, with a known accessibility trade-off. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
**Set the Visual Order of the Grid Items**
|
||||
The CSS `order` property can be used to define the visual order of the grid items. The first grid item in the HTML source code does not have to appear as the first item in the grid container. [S1]
|
||||
|
||||
```css
|
||||
.item1 {order: 3;}
|
||||
.item2 {order: 6;}
|
||||
.item3 {order: 1;}
|
||||
.item4 {order: 2;}
|
||||
.item5 {order: 4;}
|
||||
.item6 {order: 5;}
|
||||
```
|
||||
This example reorders six grid items to appear in a different sequence than their HTML source order. [S1]
|
||||
|
||||
**Accessibility note**
|
||||
The `order` property provides visual reordering, but it does not change the logical order of elements in the DOM. This will affect users navigating the site with assistive technologies like screen readers, as the content will be read in a different order than it is visually presented. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
The page's applied case is reordering six items so that the visual sequence (item3, item4, item1, item5, item6, item2) differs from their HTML source order. No external project/commit applications found in the source.
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Reorder grid items visually (language: CSS):
|
||||
```css
|
||||
.item1 {order: 3;}
|
||||
.item2 {order: 6;}
|
||||
.item3 {order: 1;}
|
||||
.item4 {order: 2;}
|
||||
.item5 {order: 4;}
|
||||
.item6 {order: 5;}
|
||||
```
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (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 Grid Items]], [[CSS Grid Item Align]], [[CSS Grid Item Named]]
|
||||
- **참조 맥락:** Controlling presentation order of grid items while being mindful of DOM/accessibility order.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — CSS Grid Item Order — https://www.w3schools.com/css/css_grid_item_order.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Grid Item Order" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
Reference in New Issue
Block a user