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.2 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 Advanced Dropdowns

🎯 한 줄 통찰 (One-line insight)

Building on the basic hover dropdown, advanced dropdowns control alignment with right: 0; / left: 0;, embed images in the content box, and drop the menu into a floated navbar <li class="dropdown">. [S1]

🧠 핵심 개념 (Core concepts)

Alignment control — whether the dropdown content opens left-to-right or right-to-left is determined by the left and right properties on .dropdown-content; adding right: 0; makes it go from right to left. [S1]
Inline-block wrapper — for aligned and navbar dropdowns the wrapper uses display: inline-block (and position: relative) so it sits in the flow next to siblings. [S1]
Stacking — advanced dropdowns add z-index: 1; to the content box so it layers above following content. [S1]
Dropdown with image — a dropdown can reveal an image plus a .desc caption instead of plain text/links, triggered by hovering an image trigger. [S1]
Dropdown navbar — a dropdown can live inside a navigation bar as one <li class="dropdown"> among other <li> links, with its menu absolutely positioned beneath the bar. [S1]

🧩 추출된 패턴 (Extracted patterns)

Side anchoring — set right: 0; (or left: 0;) on the absolutely positioned content box to anchor the menu to either edge of its wrapper. [S1]
Image-as-trigger — use an <img> as the hover trigger and reveal a larger image + caption in the content box. [S1]
Navbar integration — float <li> items and treat one as li.dropdown { display: inline-block; }, sharing hover styling with the bar links via grouped selectors. [S1]

📖 세부 내용 (Details)

Overview This page covers three advanced dropdown techniques: a right-aligned dropdown, a dropdown containing an image, and a dropdown inside a navbar. To control direction, the page notes: if you want the dropdown menu to go from right to left instead of left to right, add right: 0;. [S1]

Example 1 — Right-aligned (Aligned Dropdown Content) Two dropdowns are floated left and right; the left one forces left:0; on its content while the right one uses the stylesheet default with right: 0;. The wrapper is display: inline-block; and the content box has z-index: 1;: [S1]

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>Aligned Dropdown Content</h2>
<p>Determine whether the dropdown content should go from left to right or right to left with the left and right properties.</p>

<div class="dropdown" style="float:left;">
  <button class="dropbtn">Left</button>
  <div class="dropdown-content" style="left:0;">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

<div class="dropdown" style="float:right;">
  <button class="dropbtn">Right</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>

Example 2 — Dropdown with Image Hovering a small image reveals a larger image and a .desc caption inside the dropdown content: [S1]

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.desc {
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>

<h2>Dropdown Image</h2>
<p>Move the mouse over the image below to open the dropdown content.</p>

<div class="dropdown">
  <img src="img_5terre.jpg" alt="Cinque Terre" width="100" height="50">
  <div class="dropdown-content">
    <img src="img_5terre.jpg" alt="Cinque Terre" width="300" height="200">
    <div class="desc">Beautiful Cinque Terre</div>
  </div>
</div>

</body>
</html>

Example 3 — Dropdown Navbar A navigation bar (ul with overflow: hidden and a dark background) where one <li class="dropdown"> contains a .dropbtn link and an absolutely positioned .dropdown-content. Bar links and the dropdown button share hover styling via grouped selectors: [S1]

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
  padding: 0;
}
h2, p {
  margin: 10px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #38444d;
}
li {
  float: left;
}
li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<h2>Dropdown Menu in Navbar</h2>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>

🛠️ 적용 사례 (Applied in summary)

The page's three complete examples — right/left aligned dropdowns, an image dropdown, and a navbar dropdown — are the applied demonstrations. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Edge alignment of the content box (language: CSS):

.dropdown-content {
  position: absolute;
  right: 0; /* anchor to right edge; use left: 0; for left edge */
  z-index: 1;
}

Navbar dropdown item (language: CSS):

li.dropdown {
  display: inline-block;
}
.dropdown:hover .dropdown-content {
  display: block;
}

⚖️ 모순 및 업데이트 (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 Dropdowns, CSS Navigation Bar, CSS Position
참조 맥락: Referenced when a basic dropdown needs edge alignment, image content, or integration into a site navigation bar.

📚 출처 (Sources)

[S1] W3Schools — CSS Advanced Dropdowns — https://www.w3schools.com/css/css_dropdowns_advanced.asp

📝 변경 이력 (Change history)

2026-06-23: Initial draft synthesized from the W3Schools "CSS Advanced Dropdowns" page (Astra wiki-curation, P-Reinforce v3.1 format).

8.2 KiB Raw Blame History