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
parent a397bc4720
commit 1cfd3bbb56
1495 changed files with 68534 additions and 27 deletions
@@ -0,0 +1,74 @@
+---
+id: howto-css-sidenav-buttons
+title: "How To - Side Navigation Buttons"
+category: "Web_Recipes"
+status: "draft"
+verification_status: "conceptual"
+canonical_id: ""
+aliases: ["hoverable sidenav tabs CSS"]
+duplicate_of: ""
+source_trust_level: "B"
+confidence_score: 0.82
+created_at: 2026-07-04
+updated_at: 2026-07-04
+review_reason: ""
+merge_history: []
+tags: ["howto", "css", "w3schools", "buttons", "navigation", "transition"]
+raw_sources: ["https://www.w3schools.com/howto/howto_css_sidenav_buttons.asp"]
+applied_in: []
+github_commit: ""
+---
+
+# [[HOWTO CSS Sidenav Buttons]]
+
+## 🎯 한 줄 통찰 (One-line insight)
+Each link starts positioned OFF-SCREEN (`left: -80px`, wider than the link's own visible width) rather than hidden via `display: none` or `opacity: 0` — this specific choice is what allows the `transition: 0.3s` combined with `:hover { left: 0; }` to produce a smooth SLIDE-IN motion (the browser animates the `left` property's numeric change) instead of an instant appear/disappear, which opacity or display toggles could never animate the same way. [S1]
+
+## 🧠 핵심 개념 (Core concepts)
+- **Off-screen starting position** — `left: -80px` (each tab's width is `100px`, so `-80px` leaves a 20px sliver visible as a "handle"). [S1]
+- **`transition: 0.3s`** — animates the `left` property change smoothly, rather than snapping instantly. [S1]
+- **`:hover { left: 0; }`** — slides the tab fully into view on hover. [S1]
+- **Stacked `top` offsets + individual colors per tab** — each of the four tabs (`#about`, `#blog`, `#projects`, `#contact`) has its own `top` value (20px, 80px, 140px, 200px) and background color, positioning them as a vertically-stacked column of colored tabs. [S1]
+- **`border-radius: 0 5px 5px 0`** — rounds only the RIGHT corners (top-right, bottom-right), since the left edge is meant to be flush against/hidden by the screen edge. [S1]
+
+## 📖 세부 내용 (Details)
+- `#mySidenav a { position: absolute; left: -80px; transition: 0.3s; width: 100px; border-radius: 0 5px 5px 0; } #mySidenav a:hover { left: 0; } #about { top: 20px; background-color: #04AA6D; }`. [S1]
+
+## ⚖️ 모순 및 업데이트 (Contradictions & updates)
+- **display/opacity 토글이 아니라 위치 애니메이션으로 슬라이드 효과를 냄**: 다른 hover-reveal 레시피(예: `[[HOWTO CSS Button Split]]`)가 `display: none → block`으로 즉시 나타나는 방식이었다면, 이 레시피는 요소를 화면 밖(`left: -80px`)에 미리 배치해두고 `transition`으로 위치를 부드럽게 이동시킨다는 점이 확인됨 — display 토글은 애니메이션이 불가능하지만 위치(left) 값은 transition으로 애니메이션 가능하기 때문. [S1]
+
+## 🛠️ 적용 사례 (Applied in summary)
+About/Blog/Projects/Contact 4개의 색이 다른 탭이 화면 왼쪽에 살짝만 보이다가, 마우스를 올리면 부드럽게 미끄러져 나오는 예제가 원문에서 직접 제시됨. [S1]
+
+## 💻 코드 패턴 (Code patterns)
+Off-screen tabs that slide in smoothly via transition (CSS):
+```css
+#mySidenav a {
+  position: absolute;
+  left: -80px; /* off-screen, 20px sliver visible */
+  transition: 0.3s;
+  width: 100px;
+  border-radius: 0 5px 5px 0;
+}
+#mySidenav a:hover {
+  left: 0; /* slides fully into view */
+}
+```
+
+## ✅ 검증 상태 및 신뢰도
+- **상태:** draft
+- **검증 단계:** conceptual
+- **출처 신뢰도:** B (W3Schools — widely used educational reference)
+- **신뢰 점수:** 0.82
+- **중복 검사 결과:** 신규 생성 (New discovery)
+
+## 🔗 지식 그래프 (Knowledge Graph)
+- **상위/루트:** [[W3Schools HOW TO]]
+- **관련 개념:** [[HOWTO CSS Fixed Sidebar]], [[HOWTO JS Sidenav]], [[HOWTO CSS Transition Hover]]
+- **참조 맥락:** CSS Buttons 섹션의 마지막 챕터 — CSS Navigation & Menus 섹션으로 이어짐.
+
+## 📚 출처 (Sources)
+- [S1] W3Schools — How To - Side Navigation Buttons — https://www.w3schools.com/howto/howto_css_sidenav_buttons.asp
+
+## 📝 변경 이력 (Change history)
+- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Side Navigation Buttons" recipe (Astra wiki-curation, P-Reinforce v3.1 format).