Files

T

koriweb 9609c04755 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>

2026-06-23 19:21:18 +09:00

8.0 KiB

Raw Blame History

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

title

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>
<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]

<!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):

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

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

8.0 KiB Raw Blame History