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,253 @@
|
||||
---
|
||||
id: css-image-gallery
|
||||
title: "CSS Image Gallery"
|
||||
category: "Frontend"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["image gallery", "photo gallery", "responsive gallery", "flexbox gallery", "CSS gallery"]
|
||||
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", "gallery", "flexbox", "responsive"]
|
||||
raw_sources: ["https://www.w3schools.com/css/css_image_gallery.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[CSS Image Gallery]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
A CSS image gallery arranges a collection of images in an organized, often responsive layout using `display: flex` with `flex-wrap: wrap`, then adapts the per-item width with `@media` queries for different screen sizes. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Image gallery** — a collection of images displayed in an organized, and often responsive, way on a web page. [S1]
|
||||
- **Container structure** — a wrapping element (typically `<div class="gallery">`) holds individual item containers (typically `<div class="gallery-item">`), each containing an `<img>` and optionally a description. [S1]
|
||||
- **Flexbox layout** — the gallery container uses `display: flex;` with `flex-wrap: wrap;`, an effective module for arranging images in rows or columns. [S1]
|
||||
- **Responsive sizing** — `@media` queries change the per-item width so the number of images per row adapts to the viewport width. [S1]
|
||||
- **Fluid images** — images are set to `width: 100%; height: auto;` so each scales to fit its item container. [S1]
|
||||
|
||||
## 🧩 추출된 패턴 (Extracted patterns)
|
||||
- **Flex-wrap grid** — `display: flex; flex-wrap: wrap;` on a container lets fixed/percentage-width items flow into rows and wrap automatically. [S1]
|
||||
- **Breakpoint width swap** — keep the markup constant and change only `.gallery-item` width at breakpoints (`calc(25% - 20px)` → `calc(50% - 20px)` → `calc(100% - 20px)`) to get 4 / 2 / 1 columns. [S1]
|
||||
- **Hover affordance** — darken the item border on `:hover` to signal interactivity. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
**What is a CSS image gallery?**
|
||||
A CSS image gallery is a collection of images that is displayed in an organized, and often responsive way, on a web page. The HTML uses a container `<div class="gallery">` wrapping individual `<div class="gallery-item">` elements, each holding an `<img>` and possibly a description. [S1]
|
||||
|
||||
**Example 1 — Basic Image Gallery**
|
||||
The gallery container is a flex row that wraps; each item has a `5px` margin, a `1px` border (darkening on hover), and a fixed `180px` width. Images fill the item width, and the `.desc` caption is padded and centered: [S1]
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div.gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
div.gallery-item {
|
||||
margin: 5px;
|
||||
border: 1px solid #ccc;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
div.gallery-item:hover {
|
||||
border: 1px solid #777;
|
||||
}
|
||||
|
||||
div.gallery-item img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
div.gallery-item div.desc {
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="gallery">
|
||||
|
||||
<div class="gallery-item">
|
||||
<a target="_blank" href="img_5terre.jpg">
|
||||
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
|
||||
</a>
|
||||
<div class="desc">Cinque Terre</div>
|
||||
</div>
|
||||
|
||||
<div class="gallery-item">
|
||||
<a target="_blank" href="img_forest.jpg">
|
||||
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
|
||||
</a>
|
||||
<div class="desc">Green Forest</div>
|
||||
</div>
|
||||
|
||||
<div class="gallery-item">
|
||||
<a target="_blank" href="img_lights.jpg">
|
||||
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
|
||||
</a>
|
||||
<div class="desc">Northern Lights</div>
|
||||
</div>
|
||||
|
||||
<div class="gallery-item">
|
||||
<a target="_blank" href="img_mountains.jpg">
|
||||
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
|
||||
</a>
|
||||
<div class="desc">Mountains</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
**Tip:** `display: flex;` is used for the image gallery above. This layout module is effective for arranging images in rows or columns. [S1]
|
||||
|
||||
**Example 2 — Responsive Image Gallery**
|
||||
Adds `box-sizing: border-box` globally and uses percentage widths via `calc()`. Media queries re-arrange the images per the rule set: larger than 768px shows four side by side, smaller than 768px shows two, and smaller than 480px stacks them vertically (100%): [S1]
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div.gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
div.gallery-item {
|
||||
margin: 5px;
|
||||
border: 1px solid #ccc;
|
||||
width: calc(25% - 20px);
|
||||
}
|
||||
|
||||
div.gallery-item:hover {
|
||||
border: 1px solid #777;
|
||||
}
|
||||
|
||||
div.gallery-item img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
div.gallery-item div.desc {
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
div.gallery-item {
|
||||
width: calc(50% - 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
div.gallery-item {
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h2>Responsive Image Gallery</h2>
|
||||
<h4>Resize the browser window to see the effect!</h4>
|
||||
|
||||
<div class="gallery">
|
||||
<div class="gallery-item">
|
||||
<a target="_blank" href="img_5terre.jpg">
|
||||
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
|
||||
</a>
|
||||
<div class="desc">Cinque Terre</div>
|
||||
</div>
|
||||
|
||||
<div class="gallery-item">
|
||||
<a target="_blank" href="img_forest.jpg">
|
||||
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
|
||||
</a>
|
||||
<div class="desc">Green Forest</div>
|
||||
</div>
|
||||
|
||||
<div class="gallery-item">
|
||||
<a target="_blank" href="img_lights.jpg">
|
||||
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
|
||||
</a>
|
||||
<div class="desc">Northern Lights</div>
|
||||
</div>
|
||||
|
||||
<div class="gallery-item">
|
||||
<a target="_blank" href="img_mountains.jpg">
|
||||
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
|
||||
</a>
|
||||
<div class="desc">Mountains</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
Media-query rules summarized on the page: if the screen is larger than 768px wide, show four images side by side; if smaller than 768px, show two side by side; if smaller than 480px, stack the images vertically (100%). **Tip:** You will learn more about media queries later in the CSS Tutorial. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
The page's two examples — a fixed-width flex gallery and a responsive percentage-width gallery — are the applied demonstrations. No external project/commit applications found in the source.
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Flex-wrap gallery container (language: CSS):
|
||||
```css
|
||||
div.gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
div.gallery-item img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
```
|
||||
Responsive breakpoint width swap (language: CSS):
|
||||
```css
|
||||
div.gallery-item { width: calc(25% - 20px); }
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
div.gallery-item { width: calc(50% - 20px); }
|
||||
}
|
||||
@media only screen and (max-width: 480px) {
|
||||
div.gallery-item { width: calc(100% - 20px); }
|
||||
}
|
||||
```
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (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 Image Sprites]]
|
||||
- **참조 맥락:** Referenced when laying out collections of images responsively, such as portfolios or product grids.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — CSS Image Gallery — https://www.w3schools.com/css/css_image_gallery.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Image Gallery" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
Reference in New Issue
Block a user