Files

T

Antigravity Agent 1cfd3bbb56 docs(10_Wiki): 위키 구조 정리 — 언어 튜토리얼 카테고리 폴더 제거 + 신규 자산 동기화

Topic_CSS/Topic_HTML/Topic_JavaScript/Topic_Prompt/Topic_Comfyui 등 기존 카테고리 폴더를 정리하고,
Topic_Graphic/Dev 등 신규 산출물과 Topics 내부 세션/메모리 기록을 동기화.

2026-07-05 00:10:59 +09:00

3.8 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

HOWTO CSS Button Split

🎯 한 줄 통찰 (One-line insight)

A "split button" is really just a dropdown menu (.dropdown:hover .dropdown-content { display: block; }) whose TRIGGER happens to be a second small button with a caret icon sitting immediately next to a normal action button — the dropdown-reveal mechanism itself (hidden content shown on :hover, positioned absolute inside a relative/inline-block wrapper) is identical to any other CSS-only dropdown; the only distinguishing feature is the visual split between "primary action" (left button) and "reveal more options" (right arrow button). [S1]

🧠 핵심 개념 (Core concepts)

Font Awesome icon library — loaded via a <link> to a CDN stylesheet, providing the caret-down icon (fa fa-caret-down) used as the dropdown trigger. [S1]
.dropdown { position: absolute; display: inline-block; } — wraps the caret button and the dropdown content together as a positioning anchor. [S1]
.dropdown-content { display: none; position: absolute; } — the hidden menu, absolutely positioned relative to .dropdown. [S1]
.dropdown:hover .dropdown-content { display: block; } — the reveal mechanism: hovering the wrapper (which contains the caret button) shows the menu — a pure CSS :hover toggle, no JavaScript. [S1]
Shared hover state across both buttons — .btn:hover, .dropdown:hover .btn { background-color: #0b7dda; } keeps the main button's color in sync when the dropdown is open, even though the dropdown itself is only hovered via the caret button. [S1]

📖 세부 내용 (Details)

HTML: <button class="btn">Button</button> <div class="dropdown"> <button class="btn" style="border-left:1px solid navy"><i class="fa fa-caret-down"></i></button> <div class="dropdown-content"><a href="#">Link 1</a>...</div></div>. [S1]
CSS reveal: .dropdown:hover .dropdown-content { display: block; }. [S1]

⚖️ 모순 및 업데이트 (Contradictions & updates)

없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.

🛠️ 적용 사례 (Applied in summary)

"Button" 옆에 캐럿 아이콘 버튼을 붙여 마우스를 올리면 Link 1/2/3 드롭다운이 나타나는 예제가 원문에서 직접 제시됨. [S1]

💻 코드 패턴 (Code patterns)

Pure-CSS hover dropdown attached to a caret button (CSS):

.dropdown { position: absolute; display: inline-block; }
.dropdown-content { display: none; position: absolute; }
.dropdown:hover .dropdown-content { display: block; }

✅ 검증 상태 및 신뢰도

상태: draft
검증 단계: conceptual
출처 신뢰도: B (W3Schools — widely used educational reference)
신뢰 점수: 0.82
중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

상위/루트: W3Schools HOW TO
관련 개념: HOWTO CSS Dropdown, HOWTO CSS Dropdown Navbar, HOWTO CSS Button Group
참조 맥락: CSS Buttons 섹션.

📚 출처 (Sources)

[S1] W3Schools — How To - Split Buttons — https://www.w3schools.com/howto/howto_css_button_split.asp

📝 변경 이력 (Change history)

2026-07-04: Initial draft synthesized from the W3Schools "How To - Split Buttons" recipe (Astra wiki-curation, P-Reinforce v3.1 format).

3.8 KiB Raw Blame History