---
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).