docs(10_Wiki): Dev 폴더 누락분 반영 — Topic_Programming으로 통합
이전 재구성 작업에서 Dev/ 폴더가 누락되었던 것을 반영. - Dev/Topic_Programming(중첩 폴더, 78개)은 Dev 자체 최상위 폴더들 (Architecture/Conventions/Engineering_Intelligence 등)과 완전 중복이라 제거. - Dev 최상위 엔지니어링 지식 폴더(Architecture/Conventions/Engineering_Intelligence/ Failure_Library/Generalized_Principles/Language/Pattern_Catalog/Platform_Guides/ Subsystems, 77개)는 이미 Topic_Programming/Topic_Programming에 더 최신 버전이 존재해 중복 제거(고유 콘텐츠 1개는 예외 처리하여 이동 보존). - Dev의 W3Schools 언어 튜토리얼 폴더(Topic_C/CPP/CSS/CSharp/HOWTO/HTML/Java/ JavaScript/PHP/Python/SQL/W3CSS, 1201개)는 전부 Topic_Programming 하위로 이동. - 에이전트 운영 상태(.astra/docs)는 그대로 유지, 콘텐츠 폴더만 정리. - Topic_Programming 최종 문서 수: 2784 → 3985.
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,163 @@
|
||||
---
|
||||
id: css-website-layout
|
||||
title: "CSS Website Layout"
|
||||
category: "Frontend"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["website layout", "page layout", "header nav footer", "site structure", "responsive layout"]
|
||||
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: ["css", "web", "frontend", "w3schools", "layout", "flexbox", "responsive"]
|
||||
raw_sources: ["https://www.w3schools.com/css/css_website_layout.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[CSS Website Layout]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
A typical website is divided into a header, a navigation menu, main content, and a footer — each styled with CSS, and made responsive with flexbox plus media queries. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Standard sections** — a website is often divided into multiple sections: a top header, a navigation menu, main content, and a footer. [S1]
|
||||
- **Header** — a banner area, commonly centered with padding. [S1]
|
||||
- **Navigation bar** — a horizontal menu, built here with a flex list (`ul.topnav`). [S1]
|
||||
- **Content layouts** — three common column counts: 1-column (often for mobile browsers), 2-columns (often for tablets/laptops), and 3-columns (only for desktops). [S1]
|
||||
- **Footer** — a closing area that can sit in normal flow or be fixed to the bottom of the viewport. [S1]
|
||||
|
||||
## 🧩 추출된 패턴 (Extracted patterns)
|
||||
- **Flex navigation pattern** — turn a `<ul>` into a horizontal nav with `display: flex; list-style-type: none;` and block-level links. [S1]
|
||||
- **Responsive flex-direction switch** — lay flex items out in a row, then switch to a column under a `max-width: 600px` media query for small screens. [S1]
|
||||
- **Fixed footer pattern** — pin a footer to the bottom with `position: fixed; bottom: 0; width: 100%;` and a high `z-index`. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
A website is often divided into multiple sections, like a top header, navigation menu, main content, and a footer. [S1]
|
||||
|
||||
**Header.** A header is usually a centered banner with some padding. [S1]
|
||||
```css
|
||||
header {
|
||||
background-color: #f1f1f1;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
**Navigation bar.** The top navigation is built from a list turned into a flex row, with block-level links that change color on hover. [S1]
|
||||
```css
|
||||
/* Style the topnav */
|
||||
ul.topnav {
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
/* Style links in topnav */
|
||||
ul.topnav li a {
|
||||
display: block;
|
||||
color: #f1f1f1;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Change color on hover */
|
||||
ul.topnav li a:hover {
|
||||
background-color: #dddddd;
|
||||
color: black;
|
||||
}
|
||||
```
|
||||
|
||||
**Content layout.** There are three common layouts: a 1-column layout (often used for mobile browsers), a 2-columns layout (often used for tablets and laptops), and a 3-columns layout (only used for desktops). The example below lays flex items in a row, then stacks them into a column when the screen is narrower than 600px. [S1]
|
||||
```css
|
||||
div.flex-container {
|
||||
display: flex;
|
||||
/* Show the flex items horizontally */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
div.flex-container > div {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
/* Use media query and show the flex items vertically if screen width is less than 600px */
|
||||
@media screen and (max-width:600px) {
|
||||
div.flex-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Footer (basic).** A simple footer centered with padding. [S1]
|
||||
```css
|
||||
footer {
|
||||
background-color: #f1f1f1;
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
}
|
||||
```
|
||||
|
||||
**Footer (fixed).** A footer pinned to the bottom of the viewport, spanning the full width and layered above content. [S1]
|
||||
```css
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #f1f1f1;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
```
|
||||
|
||||
**Tips.** The page provides two tips referencing the related chapters on media queries and on flexbox layouts. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
The page's applied demonstrations assemble a full page: a centered header, a flex-based top navigation with hover states, a responsive flex content area that collapses to one column under 600px, and a footer in both static and fixed-to-bottom variants. No external project/commit applications found in the source.
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Flex navigation bar (language: CSS):
|
||||
```css
|
||||
ul.topnav {
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul.topnav li a { display: block; padding: 14px 16px; }
|
||||
```
|
||||
Responsive row-to-column switch (language: CSS):
|
||||
```css
|
||||
div.flex-container { display: flex; flex-direction: row; }
|
||||
@media screen and (max-width:600px) {
|
||||
div.flex-container { flex-direction: column; }
|
||||
}
|
||||
```
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
No contradictions found in the source.
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.89
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[CSS Tutorial]]
|
||||
- **관련 개념:** [[CSS Flexbox]], [[CSS Media Queries]], [[CSS Math Functions]]
|
||||
- **참조 맥락:** Used as a template when structuring a full page into header, navigation, content, and footer regions.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — CSS Website Layout — https://www.w3schools.com/css/css_website_layout.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Website Layout" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
Reference in New Issue
Block a user