docs(10_Wiki): 위키 구조 정리 — 언어 튜토리얼 카테고리 폴더 제거 + 신규 자산 동기화
Topic_CSS/Topic_HTML/Topic_JavaScript/Topic_Prompt/Topic_Comfyui 등 기존 카테고리 폴더를 정리하고, Topic_Graphic/Dev 등 신규 산출물과 Topics 내부 세션/메모리 기록을 동기화.
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,408 @@
|
||||
---
|
||||
id: howto-tutorial-index
|
||||
title: "W3Schools HOW TO"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["HOW TO", "Topic_HOWTO index", "HOW TO 목차"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.88
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "javascript", "html", "w3schools", "moc", "index", "ui-recipes"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/default.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3Schools HOW TO]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Map of Content (MOC) for the W3Schools "HOW TO" cookbook — unlike every prior category in this series (which taught a PROGRAMMING LANGUAGE chapter by chapter), this category is a flat collection of ~326 independent UI/code RECIPES (a button style, a layout trick, a JS widget), each self-contained and not building on the previous page — so this index groups them by PATTERN FAMILY (Layout, Buttons, Navigation, Forms, Images/Effects, Cards/Components, Misc Widgets, HTML tricks, Google integrations, Website guides, JS DOM, JS UI Components, JS Effects/Scroll, JS Utility/Logic) rather than by pedagogical sequence, since there is no natural "next chapter" ordering to preserve. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- This folder (`Topic_HOWTO`) wikifies the W3Schools HOW TO cookbook, one knowledge page per recipe, in P-Reinforce v3.1 format — same convention as every other `Topic_*` folder in this series. [S1]
|
||||
- **Scope decision** (user-confirmed 2026-07-04): full P-Reinforce docs for ALL ~326 recipe pages, at the same depth as language-tutorial chapters, despite recipes being far more repetitive/lower-insight-density than concept lessons. [S1]
|
||||
- **Excluded**: `howto_blog_*` (3 pages — career-advice blog posts, not code recipes: become_frontenddev, developer_job, hire_developers). Everything else from the sidebar is included (CSS/JS/HTML recipes, Google integrations, "website guide" pages, and utility/logic snippets). [S1]
|
||||
- **File prefix**: `HOWTO_` for all files, folder `Topic_HOWTO`. Source slugs use `howto_` prefix, `.asp` extension (verified). [S1]
|
||||
- **Progress:** **46 of 326 planned docs complete** (CSS Layout & Positioning, CSS Buttons sections done). Next: CSS Navigation & Menus section.
|
||||
- Every page roots its Knowledge Graph back to this `[[W3Schools HOW TO]]` node.
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
|
||||
### CSS Layout & Positioning (26)
|
||||
- [[HOWTO CSS About Page]] ✅
|
||||
- [[HOWTO CSS Aspect Ratio]] ✅
|
||||
- [[HOWTO CSS Browser Window]] ✅ (partial — code not extractable)
|
||||
- [[HOWTO CSS Center List]] ✅
|
||||
- [[HOWTO CSS Center Vertical]] ✅
|
||||
- [[HOWTO CSS Center Button]] ✅
|
||||
- [[HOWTO CSS Center Website]] ✅
|
||||
- [[HOWTO CSS Clearfix]] ✅
|
||||
- [[HOWTO CSS Div Full Height]] ✅
|
||||
- [[HOWTO CSS Equal Height]] ✅
|
||||
- [[HOWTO CSS Fixed Footer]] ✅
|
||||
- [[HOWTO CSS Fixed Menu]] ✅
|
||||
- [[HOWTO CSS Fixed Sidebar]] ✅
|
||||
- [[HOWTO CSS Four Columns]] ✅
|
||||
- [[HOWTO CSS Full Page]] ✅
|
||||
- [[HOWTO CSS Mixed Columns]] ✅
|
||||
- [[HOWTO CSS Responsive Floats]] ✅
|
||||
- [[HOWTO CSS Split Screen]] ✅
|
||||
- [[HOWTO CSS Sticky Element]] ✅
|
||||
- [[HOWTO CSS Three Columns]] ✅
|
||||
- [[HOWTO CSS Two Columns]] ✅
|
||||
- [[HOWTO CSS Vertical Line]] ✅
|
||||
- [[HOWTO CSS Zig Zag Layout]] ✅
|
||||
- [[HOWTO CSS Table Center]] ✅
|
||||
- [[HOWTO CSS Table Full Width]] ✅
|
||||
- [[HOWTO CSS Images Side By Side]] ✅
|
||||
|
||||
### CSS Buttons (20)
|
||||
- [[HOWTO CSS Alert Buttons]] ✅
|
||||
- [[HOWTO CSS Animate Buttons]] ✅ (partial — code not extractable)
|
||||
- [[HOWTO CSS Block Buttons]] ✅
|
||||
- [[HOWTO CSS Button Group]] ✅
|
||||
- [[HOWTO CSS Button Group Vertical]] ✅
|
||||
- [[HOWTO CSS Button On Image]] ✅
|
||||
- [[HOWTO CSS Button Split]] ✅
|
||||
- [[HOWTO CSS Download Button]] ✅
|
||||
- [[HOWTO CSS Fading Buttons]] ✅ (partial — code not extractable)
|
||||
- [[HOWTO CSS Icon Buttons]] ✅
|
||||
- [[HOWTO CSS Loading Buttons]] ✅
|
||||
- [[HOWTO CSS More Button]] ✅
|
||||
- [[HOWTO CSS Notification Button]] ✅
|
||||
- [[HOWTO CSS Outline Buttons]] ✅
|
||||
- [[HOWTO CSS Pill Button]] ✅
|
||||
- [[HOWTO CSS Round Buttons]] ✅
|
||||
- [[HOWTO CSS Search Button]] ✅
|
||||
- [[HOWTO CSS Sidenav Buttons]] ✅
|
||||
- [[HOWTO CSS Social Media Buttons]] ✅
|
||||
- [[HOWTO CSS Text Buttons]] ✅
|
||||
|
||||
### CSS Navigation & Menus (25)
|
||||
- [[HOWTO CSS Bottom Nav]]
|
||||
- [[HOWTO CSS Breadcrumbs]]
|
||||
- [[HOWTO CSS Dropdown]]
|
||||
- [[HOWTO CSS Dropdown Navbar]]
|
||||
- [[HOWTO CSS Dropup]]
|
||||
- [[HOWTO CSS Icon Bar]]
|
||||
- [[HOWTO CSS Input Navbar]]
|
||||
- [[HOWTO CSS Mega Menu]]
|
||||
- [[HOWTO CSS Menu Horizontal Scroll]]
|
||||
- [[HOWTO CSS Menu Icon]]
|
||||
- [[HOWTO CSS Navbar Border]]
|
||||
- [[HOWTO CSS Navbar Icon]]
|
||||
- [[HOWTO CSS Navbar Image]]
|
||||
- [[HOWTO CSS Next Prev]]
|
||||
- [[HOWTO CSS Pagination]]
|
||||
- [[HOWTO CSS Pill Nav]]
|
||||
- [[HOWTO CSS Sidebar Icons]]
|
||||
- [[HOWTO CSS Sidebar Responsive]]
|
||||
- [[HOWTO CSS Subnav]]
|
||||
- [[HOWTO CSS Topnav Centered]]
|
||||
- [[HOWTO CSS Topnav Equal Width]]
|
||||
- [[HOWTO CSS Topnav Right]]
|
||||
- [[HOWTO CSS Topnav Split]]
|
||||
- [[HOWTO CSS Vertical Menu]]
|
||||
- [[HOWTO CSS Login Form Navbar]]
|
||||
|
||||
### CSS Forms & Inputs (18)
|
||||
- [[HOWTO CSS Checkout Form]]
|
||||
- [[HOWTO CSS Contact Form]]
|
||||
- [[HOWTO CSS Custom Checkbox]]
|
||||
- [[HOWTO CSS Form Icon]]
|
||||
- [[HOWTO CSS Form On Image]]
|
||||
- [[HOWTO CSS Inline Form]]
|
||||
- [[HOWTO CSS Labels]]
|
||||
- [[HOWTO CSS Login Form]]
|
||||
- [[HOWTO CSS Placeholder]]
|
||||
- [[HOWTO CSS Register Form]]
|
||||
- [[HOWTO CSS Responsive Form]]
|
||||
- [[HOWTO CSS Signup Form]]
|
||||
- [[HOWTO CSS Stacked Form]]
|
||||
- [[HOWTO CSS Switch]]
|
||||
- [[HOWTO CSS Contenteditable Border]]
|
||||
- [[HOWTO CSS Disable Resize Textarea]]
|
||||
- [[HOWTO CSS Disable Text Selection]]
|
||||
- [[HOWTO CSS Hide Arrow Number]]
|
||||
|
||||
### CSS Images & Visual Effects (33)
|
||||
- [[HOWTO CSS Bg Change Scroll]]
|
||||
- [[HOWTO CSS Bg Gradient Scroll]]
|
||||
- [[HOWTO CSS Blurred Background]]
|
||||
- [[HOWTO CSS Border Image]]
|
||||
- [[HOWTO CSS Circles]]
|
||||
- [[HOWTO CSS Cutout Text]]
|
||||
- [[HOWTO CSS Flip Box]]
|
||||
- [[HOWTO CSS Flip Card]]
|
||||
- [[HOWTO CSS Flip Image]]
|
||||
- [[HOWTO CSS Glowing Text]]
|
||||
- [[HOWTO CSS Hero Image]]
|
||||
- [[HOWTO CSS Image Avatar]]
|
||||
- [[HOWTO CSS Image Bw]]
|
||||
- [[HOWTO CSS Image Center]]
|
||||
- [[HOWTO CSS Image Effects]]
|
||||
- [[HOWTO CSS Image Gallery]]
|
||||
- [[HOWTO CSS Image Gallery Scroll]]
|
||||
- [[HOWTO CSS Image Grid Responsive]]
|
||||
- [[HOWTO CSS Image Overlay]]
|
||||
- [[HOWTO CSS Image Overlay Icon]]
|
||||
- [[HOWTO CSS Image Overlay Slide]]
|
||||
- [[HOWTO CSS Image Overlay Title]]
|
||||
- [[HOWTO CSS Image Overlay Zoom]]
|
||||
- [[HOWTO CSS Image Responsive]]
|
||||
- [[HOWTO CSS Image Sticky]]
|
||||
- [[HOWTO CSS Image Text]]
|
||||
- [[HOWTO CSS Image Text Blocks]]
|
||||
- [[HOWTO CSS Image Transparent]]
|
||||
- [[HOWTO CSS Rounded Images]]
|
||||
- [[HOWTO CSS Shake Image]]
|
||||
- [[HOWTO CSS Thumbnail]]
|
||||
- [[HOWTO CSS Transition Hover]]
|
||||
- [[HOWTO CSS Zoom Hover]]
|
||||
|
||||
### CSS Cards & UI Components (21)
|
||||
- [[HOWTO CSS Badge]]
|
||||
- [[HOWTO CSS Cards]]
|
||||
- [[HOWTO CSS Column Cards]]
|
||||
- [[HOWTO CSS Comparison Table]]
|
||||
- [[HOWTO CSS Coupon]]
|
||||
- [[HOWTO CSS Delete Modal]]
|
||||
- [[HOWTO CSS List Group]]
|
||||
- [[HOWTO CSS List Group Badges]]
|
||||
- [[HOWTO CSS List Without Bullets]]
|
||||
- [[HOWTO CSS Modal Images]]
|
||||
- [[HOWTO CSS Modals]]
|
||||
- [[HOWTO CSS Pricing Table]]
|
||||
- [[HOWTO CSS Product Card]]
|
||||
- [[HOWTO CSS Profile Card]]
|
||||
- [[HOWTO CSS Ribbon]]
|
||||
- [[HOWTO CSS Star Rating]]
|
||||
- [[HOWTO CSS Tag Cloud]]
|
||||
- [[HOWTO CSS Testimonials]]
|
||||
- [[HOWTO CSS Timeline]]
|
||||
- [[HOWTO CSS Tooltip]]
|
||||
- [[HOWTO CSS User Rating]]
|
||||
|
||||
### CSS Misc Widgets & Layout Tricks (34)
|
||||
- [[HOWTO CSS Animated Search]]
|
||||
- [[HOWTO CSS Arrows]]
|
||||
- [[HOWTO CSS Blog Layout]]
|
||||
- [[HOWTO CSS Bullet Color]]
|
||||
- [[HOWTO CSS Calendar]]
|
||||
- [[HOWTO CSS Chat]]
|
||||
- [[HOWTO CSS Coming Soon]]
|
||||
- [[HOWTO CSS Contact Chips]]
|
||||
- [[HOWTO CSS Contact Section]]
|
||||
- [[HOWTO CSS Devices]]
|
||||
- [[HOWTO CSS Display Element Hover]]
|
||||
- [[HOWTO CSS Dividers]]
|
||||
- [[HOWTO CSS Example Website]]
|
||||
- [[HOWTO CSS Force Scrollbars]]
|
||||
- [[HOWTO CSS Fullscreen Search]]
|
||||
- [[HOWTO CSS Fullscreen Video]]
|
||||
- [[HOWTO CSS Hide Scrollbars]]
|
||||
- [[HOWTO CSS Loader]]
|
||||
- [[HOWTO CSS Media Query Breakpoints]]
|
||||
- [[HOWTO CSS Newsletter]]
|
||||
- [[HOWTO CSS Notes]]
|
||||
- [[HOWTO CSS Overlay]]
|
||||
- [[HOWTO CSS Parallax]]
|
||||
- [[HOWTO CSS Portfolio Gallery]]
|
||||
- [[HOWTO CSS Responsive Header]]
|
||||
- [[HOWTO CSS Responsive Iframes]]
|
||||
- [[HOWTO CSS Responsive Text]]
|
||||
- [[HOWTO CSS Searchbar]]
|
||||
- [[HOWTO CSS Section Counter]]
|
||||
- [[HOWTO CSS Shapes]]
|
||||
- [[HOWTO CSS Skill Bar]]
|
||||
- [[HOWTO CSS Smooth Scroll]]
|
||||
- [[HOWTO CSS Social Login]]
|
||||
- [[HOWTO CSS Sticky Social Bar]]
|
||||
- [[HOWTO CSS Style Header]]
|
||||
- [[HOWTO CSS Style Hr]]
|
||||
- [[HOWTO CSS Table Responsive]]
|
||||
- [[HOWTO CSS Table Side By Side]]
|
||||
- [[HOWTO CSS Table Zebra]]
|
||||
- [[HOWTO CSS Team]]
|
||||
- [[HOWTO CSS Text Divider]]
|
||||
- [[HOWTO CSS Text Selection]]
|
||||
|
||||
### HTML Tricks (10)
|
||||
- [[HOWTO HTML Autocomplete Off]]
|
||||
- [[HOWTO HTML Clear Input]]
|
||||
- [[HOWTO HTML Colorpicker]]
|
||||
- [[HOWTO HTML Download Link]]
|
||||
- [[HOWTO HTML Email Field]]
|
||||
- [[HOWTO HTML Favicon]]
|
||||
- [[HOWTO HTML File Upload Button]]
|
||||
- [[HOWTO HTML Include]]
|
||||
- [[HOWTO HTML Spellcheck Disable]]
|
||||
- [[HOWTO HTML Table Nested]]
|
||||
|
||||
### Google Integrations (6)
|
||||
- [[HOWTO Google Analytics]]
|
||||
- [[HOWTO Google Charts]]
|
||||
- [[HOWTO Google Fonts]]
|
||||
- [[HOWTO Google Fonts Pairings]]
|
||||
- [[HOWTO Google Maps]]
|
||||
- [[HOWTO Google Maps Bw]]
|
||||
|
||||
### Website Guides (12)
|
||||
- [[HOWTO Create And View]]
|
||||
- [[HOWTO Custom Select]]
|
||||
- [[HOWTO Make A Webbook]]
|
||||
- [[HOWTO Make A Website]]
|
||||
- [[HOWTO Syntax Highlight]]
|
||||
- [[HOWTO Website]]
|
||||
- [[HOWTO Website Bootstrap]]
|
||||
- [[HOWTO Website Bootstrap4]]
|
||||
- [[HOWTO Website Bootstrap5]]
|
||||
- [[HOWTO Website Business]]
|
||||
- [[HOWTO Website Create Linktree]]
|
||||
- [[HOWTO Website Create Portfolio]]
|
||||
- [[HOWTO Website Create Resume]]
|
||||
- [[HOWTO Website Create Website]]
|
||||
- [[HOWTO Website Host Staticwebsite]]
|
||||
- [[HOWTO Website Restaurant]]
|
||||
- [[HOWTO Website Static]]
|
||||
|
||||
### JS DOM Manipulation (8)
|
||||
- [[HOWTO JS Active Element]]
|
||||
- [[HOWTO JS Add Class]]
|
||||
- [[HOWTO JS Change Class]]
|
||||
- [[HOWTO JS Check Hidden]]
|
||||
- [[HOWTO JS Remove Class]]
|
||||
- [[HOWTO JS Remove Property Object]]
|
||||
- [[HOWTO JS Toggle Class]]
|
||||
- [[HOWTO JS Toggle Hide Show]]
|
||||
|
||||
### JS UI Components (48)
|
||||
- [[HOWTO JS Accordion]]
|
||||
- [[HOWTO JS Callout]]
|
||||
- [[HOWTO JS Cascading Dropdown]]
|
||||
- [[HOWTO JS Close List Items]]
|
||||
- [[HOWTO JS Collapse Sidebar]]
|
||||
- [[HOWTO JS Collapse Sidepanel]]
|
||||
- [[HOWTO JS Collapsible]]
|
||||
- [[HOWTO JS Curtain Menu]]
|
||||
- [[HOWTO JS Dropdown]]
|
||||
- [[HOWTO JS Dropdown Sidenav]]
|
||||
- [[HOWTO JS Expanding Grid]]
|
||||
- [[HOWTO JS Filter Dropdown]]
|
||||
- [[HOWTO JS Filter Elements]]
|
||||
- [[HOWTO JS Filter Lists]]
|
||||
- [[HOWTO JS Filter Table]]
|
||||
- [[HOWTO JS Form Steps]]
|
||||
- [[HOWTO JS Full Page Tabs]]
|
||||
- [[HOWTO JS Hover Tabs]]
|
||||
- [[HOWTO JS List Grid View]]
|
||||
- [[HOWTO JS Mobile Navbar]]
|
||||
- [[HOWTO JS Off Canvas]]
|
||||
- [[HOWTO JS Popup]]
|
||||
- [[HOWTO JS Popup Chat]]
|
||||
- [[HOWTO JS Popup Form]]
|
||||
- [[HOWTO JS Portfolio Filter]]
|
||||
- [[HOWTO JS Progressbar]]
|
||||
- [[HOWTO JS Quotes Slideshow]]
|
||||
- [[HOWTO JS Rangeslider]]
|
||||
- [[HOWTO JS Read More]]
|
||||
- [[HOWTO JS Responsive Navbar Dropdown]]
|
||||
- [[HOWTO JS Search Menu]]
|
||||
- [[HOWTO JS Sidenav]]
|
||||
- [[HOWTO JS Slideshow]]
|
||||
- [[HOWTO JS Slideshow Gallery]]
|
||||
- [[HOWTO JS Snackbar]]
|
||||
- [[HOWTO JS Sort List]]
|
||||
- [[HOWTO JS Sort Table]]
|
||||
- [[HOWTO JS Tab Header]]
|
||||
- [[HOWTO JS Tab Img Gallery]]
|
||||
- [[HOWTO JS Tabs]]
|
||||
- [[HOWTO JS Todolist]]
|
||||
- [[HOWTO JS Toggle Dark Mode]]
|
||||
- [[HOWTO JS Toggle Like]]
|
||||
- [[HOWTO JS Toggle Password]]
|
||||
- [[HOWTO JS Toggle Text]]
|
||||
- [[HOWTO JS Topnav]]
|
||||
- [[HOWTO JS Topnav Responsive]]
|
||||
- [[HOWTO JS Treeview]]
|
||||
- [[HOWTO JS Trigger Button Enter]]
|
||||
- [[HOWTO JS Typewriter]]
|
||||
- [[HOWTO JS Vertical Tabs]]
|
||||
- [[HOWTO JS Bottom Nav Responsive]]
|
||||
- [[HOWTO JS Image Comparison]]
|
||||
- [[HOWTO JS Image Grid]]
|
||||
- [[HOWTO JS Image Magnifier Glass]]
|
||||
- [[HOWTO JS Image Zoom]]
|
||||
- [[HOWTO JS Lightbox]]
|
||||
|
||||
### JS Effects & Scroll (15)
|
||||
- [[HOWTO JS Animate]]
|
||||
- [[HOWTO JS Animate Icons]]
|
||||
- [[HOWTO JS Draggable]]
|
||||
- [[HOWTO JS Fullscreen]]
|
||||
- [[HOWTO JS Fullscreen Overlay]]
|
||||
- [[HOWTO JS Get Current Window]]
|
||||
- [[HOWTO JS Navbar Hide Scroll]]
|
||||
- [[HOWTO JS Navbar Shrink Scroll]]
|
||||
- [[HOWTO JS Navbar Slide]]
|
||||
- [[HOWTO JS Navbar Sticky]]
|
||||
- [[HOWTO JS Scroll Indicator]]
|
||||
- [[HOWTO JS Scroll Into View]]
|
||||
- [[HOWTO JS Scroll To Top]]
|
||||
- [[HOWTO JS Scrolldrawing]]
|
||||
- [[HOWTO JS Shrink Header Scroll]]
|
||||
- [[HOWTO JS Sticky Header]]
|
||||
|
||||
### JS Utility & Logic Snippets (25)
|
||||
- [[HOWTO JS Alert]]
|
||||
- [[HOWTO JS Autocomplete]]
|
||||
- [[HOWTO JS Copy Clipboard]]
|
||||
- [[HOWTO JS Countdown]]
|
||||
- [[HOWTO JS Default Parameters]]
|
||||
- [[HOWTO JS Detect Capslock]]
|
||||
- [[HOWTO JS Display Checkbox Text]]
|
||||
- [[HOWTO JS Element Iframe]]
|
||||
- [[HOWTO JS Exponentiation]]
|
||||
- [[HOWTO JS Format Number Dec]]
|
||||
- [[HOWTO JS Get Date]]
|
||||
- [[HOWTO JS Get Url]]
|
||||
- [[HOWTO JS Length Converter]]
|
||||
- [[HOWTO JS Offline Detection]]
|
||||
- [[HOWTO JS Password Validation]]
|
||||
- [[HOWTO JS Random Number Two Nums]]
|
||||
- [[HOWTO JS Redirect Webpage]]
|
||||
- [[HOWTO JS Remove Decimals]]
|
||||
- [[HOWTO JS Sort Numeric Array]]
|
||||
- [[HOWTO JS Speed Converter]]
|
||||
- [[HOWTO JS Spread Operator]]
|
||||
- [[HOWTO JS String Length]]
|
||||
- [[HOWTO JS Temperature Converter]]
|
||||
- [[HOWTO JS Validation Empty Input]]
|
||||
- [[HOWTO JS Weight Converter]]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
0 knowledge documents generated so far in this batch run.
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.88
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[10_Wiki]]
|
||||
- **관련 개념:** [[HTML Tutorial]], [[CSS Tutorial]], [[JavaScript Tutorial]]
|
||||
- **참조 맥락:** C#에 이어 W3Schools 지식화 시리즈의 다음 카테고리 — 언어 튜토리얼이 아닌 UI/코드 레시피 모음집.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — HOW TO — https://www.w3schools.com/howto/default.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Created HOW TO MOC with scope decisions and full planned page list, organized by pattern family rather than chapter sequence (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: howto-css-about-page
|
||||
title: "How To - CSS About Page"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["about us page CSS", "team card layout"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.8
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "layout", "cards"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_about_page.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS About Page]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The team-card grid uses the OLDER `float: left` + `width: 33.3%` technique (not Flexbox/Grid) combined with the classic `::after { content: ""; clear: both; display: table; }` clearfix on the row container — a reminder that this recipe predates (or intentionally avoids) the Grid & Flexbox recipes covered elsewhere in this cookbook, and that float-based column layouts still require the clearfix hack to prevent the container from collapsing to zero height. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`float: left` columns** — `.column { float: left; width: 33.3%; }` creates a 3-column grid without Flexbox/Grid. [S1]
|
||||
- **Clearfix on the row** — `.container::after, .row::after { content: ""; clear: both; display: table; }` prevents the floated columns from collapsing their parent's height. [S1]
|
||||
- **`box-sizing: border-box` reset** — applied globally via `html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }`, so padding doesn't add to declared widths. [S1]
|
||||
- **Responsive breakpoint** — `@media screen and (max-width: 650px) { .column { width: 100%; display: block; } }` stacks the columns on narrow screens. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Structure: an `.about-section` intro block, followed by a `.row` of three `.column > .card` team-member blocks (image, name, title, bio, email, contact button). [S1]
|
||||
- Card styling: `.card { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); margin: 8px; }` gives each team member a subtle elevation effect. [S1]
|
||||
- Button hover: `.button:hover { background-color: #555; }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
3명의 팀원 카드를 나열하는 "About Us" 페이지 레이아웃 전체가 원문에서 직접 실전 예제로 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Float-based 3-column layout with clearfix and a responsive breakpoint (CSS):
|
||||
```css
|
||||
.column { float: left; width: 33.3%; padding: 0 8px; }
|
||||
.row::after { content: ""; clear: both; display: table; }
|
||||
@media screen and (max-width: 650px) {
|
||||
.column { width: 100%; display: block; }
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.80
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Cards]], [[HOWTO CSS Team]], [[HOWTO CSS Three Columns]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - About Page — https://www.w3schools.com/howto/howto_css_about_page.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - About Page" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
id: howto-css-alert-buttons
|
||||
title: "How To - Alert Buttons"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["success info warning danger buttons"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.83
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "buttons"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_alert_buttons.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Alert Buttons]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
A shared `.btn` base class handles all the STRUCTURAL styling (border removal, padding, cursor) once, while five separate semantic modifier classes (`.success`, `.info`, `.warning`, `.danger`, `.default`) each carry ONLY a background-color pair (normal + `:hover`) — this base+modifier split means adding a sixth alert color later requires just one new 2-line modifier class, not a full button redefinition. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Shared base class `.btn`** — `border: none; color: white; padding: 14px 28px; cursor: pointer;` applied once to every alert button. [S1]
|
||||
- **Color-coded semantic modifiers** — `.success` (green), `.info` (blue), `.warning` (orange), `.danger` (red), `.default` (gray, with black text instead of white). [S1]
|
||||
- **Each modifier defines its own `:hover`** — a slightly darker shade of the same hue, applied consistently across all five variants. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- HTML: `<button class="btn success">Success</button>` (and similarly for info/warning/danger/default). [S1]
|
||||
- CSS colors: success `#04AA6D`→hover `#46a049`; info `#2196F3`→hover `#0b7dda`; warning `#ff9800`→hover `#e68a00`; danger `#f44336`→hover `#da190b`; default `#e7e7e7` (black text)→hover `#ddd`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
Success/Info/Warning/Danger/Default 5가지 색상의 알림 버튼을 하나의 공통 .btn 클래스와 색상별 수식 클래스로 구현하는 예제가 원문에서 직접 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Base class + semantic color modifiers (CSS):
|
||||
```css
|
||||
.btn {
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 14px 28px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.success { background-color: #04AA6D; }
|
||||
.success:hover { background-color: #46a049; }
|
||||
.danger { background-color: #f44336; }
|
||||
.danger:hover { background-color: #da190b; }
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.83
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Block Buttons]], [[HOWTO CSS Outline Buttons]], [[HOWTO CSS Text Buttons]]
|
||||
- **참조 맥락:** CSS Buttons 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Alert Buttons — https://www.w3schools.com/howto/howto_css_alert_buttons.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Alert Buttons" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
id: howto-css-animate-buttons
|
||||
title: "How To - Animate Buttons"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "unverified"
|
||||
canonical_id: ""
|
||||
aliases: ["pressed effect button", "ripple button CSS"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.5
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: "Source page's three interactive demos (press effect, hover arrow, ripple effect) render their CSS in live iframes not captured by the text extractor — only labels ('Click', 'Hover') were retrieved."
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "buttons", "animation"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_animate_buttons.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Animate Buttons]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
This page's actual animation CSS (transitions/transforms/keyframes for the "pressed," "hover arrow," and "ripple" effects) was not retrievable through text extraction — only the three effect NAMES and their trigger labels ("Click", "Hover") were captured, so this entry records the page's scope without fabricating the underlying CSS that couldn't be verified from source. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Three named button animation effects**: a "pressed" effect on click, an arrow that appears on hover, and a "ripple" effect on click. [S1]
|
||||
- Specific implementation (transition timing, transform values, keyframe definitions) could not be confirmed from the extracted text and is NOT included here to avoid fabrication. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Only the effect labels and "Try it Yourself »" markers were extracted; the live CSS lives in embedded iframe examples the extractor does not capture. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 검증 불가로 인해 비교할 세부 내용이 부족함.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 코드 예제가 텍스트로 추출되지 않았습니다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
추출되지 않음 — 원문의 라이브 코드 예제가 iframe에 있어 텍스트로 캡처되지 않았습니다. 재방문 시 브라우저 스크린샷 또는 별도 렌더링 도구로 재확인 필요.
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** unverified
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.50
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery) — 콘텐츠 불완전, 재검증 필요.
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Fading Buttons]], [[HOWTO CSS Transition Hover]], [[HOWTO CSS Zoom Hover]]
|
||||
- **참조 맥락:** CSS Buttons 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Animate Buttons — https://www.w3schools.com/howto/howto_css_animate_buttons.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from partial extraction of the W3Schools "How To - Animate Buttons" page — code examples not captured, flagged for re-verification (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: howto-css-aspect-ratio
|
||||
title: "How To - CSS Aspect Ratio"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["padding-top aspect ratio hack", "aspect-ratio property"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.83
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "layout", "responsive"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_aspect_ratio.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Aspect Ratio]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The classic aspect-ratio hack exploits a CSS quirk that trips up many developers the first time they see it: percentage `padding-top` on a block element is calculated relative to the PARENT'S WIDTH, not its own height — which is precisely why `padding-top: 56.25%` (9÷16) produces a perfect 16:9 box regardless of how wide the container actually is, before the modern `aspect-ratio` property existed to make the intent explicit and readable. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Percentage `padding-top` hack** — `padding-top: X%` on a full-width block is computed against the element's OWN WIDTH (since padding percentages always resolve against the containing block's width), so setting it to a ratio-derived percentage locks the height to a fixed proportion of the width. [S1]
|
||||
- **Ratio-to-percentage formulas**: 1:1 → 100%; 16:9 → 56.25% (9÷16); 4:3 → 75% (3÷4); 3:2 → 66.66% (2÷3); 8:5 → 62.5% (5÷8). [S1]
|
||||
- **`position: relative` + absolutely-positioned child** — needed if text/content must sit inside the ratio-locked box, since the box itself has no "real" height from content. [S1]
|
||||
- **Modern `aspect-ratio` property** — `aspect-ratio: 3 / 2;` directly expresses the same intent in newer browsers (support from roughly Chrome 88 / Firefox 89 / Safari 15 / Edge 88), no padding math required. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- 1:1 box: `.container { width: 100%; padding-top: 100%; position: relative; }`. [S1]
|
||||
- Text inside a ratio-locked box: `.text { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }`. [S1]
|
||||
- Modern equivalent: `.container { aspect-ratio: 3 / 2; }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
16:9, 4:3, 3:2, 8:5 등 여러 비율을 padding-top 백분율로 구현하는 예제들이 원문에서 직접 나란히 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Legacy padding-top hack vs. modern aspect-ratio property (CSS):
|
||||
```css
|
||||
/* Legacy hack -- 16:9 */
|
||||
.container-legacy {
|
||||
width: 100%;
|
||||
padding-top: 56.25%; /* 9 / 16 */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Modern equivalent */
|
||||
.container-modern {
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.83
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Fullscreen Video]], [[HOWTO CSS Image Responsive]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Aspect Ratio — https://www.w3schools.com/howto/howto_css_aspect_ratio.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Aspect Ratio" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
id: howto-css-block-buttons
|
||||
title: "How To - Full Width (Block) Buttons"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["full width button CSS"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.78
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "buttons"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_block_buttons.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Block Buttons]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
A `<button>` is inline-block by default, so `width: 100%` alone does nothing until `display: block` is also set — this is the same "unconstrained-vs-constrained-width" dependency seen in `[[HOWTO CSS Center Website]]`'s `margin: auto`, just from the opposite direction: there, the element needed a WIDTH LIMIT to leave room for centering; here, the button needs its DISPLAY TYPE changed before a width percentage can have any visual effect on an inherently content-sized element. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`display: block` + `width: 100%`** — both required together; a button (default `inline-block`) won't stretch to `100%` width without first becoming a block-level element. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- `.block { display: block; width: 100%; border: none; padding: 14px 28px; text-align: center; }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 컨테이너 전체 폭을 차지하는 버튼 하나의 최소 예제가 원문에서 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Block button — requires both display:block AND width:100% (CSS):
|
||||
```css
|
||||
.block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
padding: 14px 28px;
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.78
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Alert Buttons]], [[HOWTO CSS Button Group]]
|
||||
- **참조 맥락:** CSS Buttons 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Full Width (Block) Buttons — https://www.w3schools.com/howto/howto_css_block_buttons.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Full Width (Block) Buttons" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
id: howto-css-browser-window
|
||||
title: "How To - Browser Window CSS"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "unverified"
|
||||
canonical_id: ""
|
||||
aliases: ["fake browser window mockup CSS"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.55
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: "Source page's code example is rendered in an interactive iframe not captured by the text extractor — only the page title and demo label were retrieved."
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "layout", "mockup"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_browser_window.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Browser Window]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
This recipe's actual HTML/CSS code was not retrievable through text extraction (the page embeds its live example in an interactive iframe rather than printable markup), so this entry records only what the page's title and label confirm — a "Browser Window" CSS mockup — without fabricating specific code that couldn't be verified from the source. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Browser window mockup** — a CSS-only decorative frame styled to resemble a browser chrome (title bar, controls, content area), commonly used to showcase screenshots/demos within a page. [S1]
|
||||
- Specific implementation details (colors, dot styling, bar height) could not be confirmed from the extracted text and are NOT included here to avoid fabrication. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Only "Browser Window" (page title) and a "Try it Yourself »" label were extracted; the actual code block lives in an embedded iframe example the extractor does not capture. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 검증 불가로 인해 비교할 세부 내용이 부족함.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 코드 예제가 텍스트로 추출되지 않았습니다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
추출되지 않음 — 원문의 라이브 코드 예제가 iframe에 있어 텍스트로 캡처되지 않았습니다. 재방문 시 브라우저 스크린샷 또는 별도 렌더링 도구로 재확인 필요.
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** unverified
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.55
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery) — 콘텐츠 불완전, 재검증 필요.
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Example Website]], [[HOWTO CSS Devices]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Browser Window CSS — https://www.w3schools.com/howto/howto_css_browser_window.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from partial extraction of the W3Schools "How To - Browser Window CSS" page — code example not captured, flagged for re-verification (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
id: howto-css-button-group
|
||||
title: "How To - Button Group"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["btn-group horizontal 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"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_button_group.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Button Group]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
`:not(:last-child) { border-right: none; }` solves a problem unique to adjacent bordered buttons — floating buttons side by side with individual borders would double up the border between each pair (right edge of one touching the left edge of the next), so this `:not()` selector strips the right border from every button EXCEPT the last, leaving a single shared-looking seam between buttons instead of a visibly doubled line. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`float: left` buttons + clearfix** — the same clearfix pattern from the layout recipes, needed here because the button group container would otherwise collapse. [S1]
|
||||
- **`:not(:last-child) { border-right: none; }`** — prevents double borders between adjacent buttons by removing the right border from all but the final button. [S1]
|
||||
- **Justified/full-width variant** — set the container to `width: 100%` and give each button an explicit percentage width (`33.3%` for 3 buttons, `25%` for 4) so the group spans the full container width evenly. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Horizontal group: `.btn-group button { float: left; border: 1px solid green; } .btn-group button:not(:last-child) { border-right: none; } .btn-group:after { content: ""; clear: both; display: table; }`. [S1]
|
||||
- Justified variant: inline `style="width:33.3%"` on each of 3 buttons inside a `width:100%` container. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
Apple/Samsung/Sony 버튼 3개를 이중 테두리 없이 나란히 배치하고, 컨테이너 전체 폭에 맞춰 균등 분할하는 justified 버전도 함께 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Button group without doubled borders between buttons (CSS):
|
||||
```css
|
||||
.btn-group button {
|
||||
float: left;
|
||||
border: 1px solid green;
|
||||
}
|
||||
.btn-group button:not(:last-child) {
|
||||
border-right: none;
|
||||
}
|
||||
.btn-group:after {
|
||||
content: ""; clear: both; display: table;
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.82
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Button Group Vertical]], [[HOWTO CSS Block Buttons]]
|
||||
- **참조 맥락:** CSS Buttons 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Button Group — https://www.w3schools.com/howto/howto_css_button_group.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Button Group" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: howto-css-button-group-vertical
|
||||
title: "How To - Vertical Button Group"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["btn-group vertical CSS"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.81
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "buttons"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_button_group_vertical.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Button Group Vertical]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Converting `[[HOWTO CSS Button Group]]`'s horizontal layout to vertical requires exactly TWO changes: swap `float: left` for `display: block` (stacking instead of side-by-side), and swap the border-collision fix from `border-right: none` to `border-bottom: none` (since adjacent edges are now top/bottom instead of left/right) — everything else (the `:not(:last-child)` selector, the hover color) carries over unchanged. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`display: block` instead of `float: left`** — makes each button occupy its own full line, stacking vertically. [S1]
|
||||
- **`:not(:last-child) { border-bottom: none; }`** — the vertical analog of the horizontal group's `border-right: none`, preventing doubled borders between STACKED buttons instead of side-by-side ones. [S1]
|
||||
- **No clearfix needed** — since `display: block` never removes elements from flow the way `float` does, there's no container-collapse risk to fix. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- `.btn-group button { display: block; width: 50%; border: 1px solid green; } .btn-group button:not(:last-child) { border-bottom: none; }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **가로형 버튼 그룹과 정확히 두 부분만 다름**: `[[HOWTO CSS Button Group]]`의 float+clearfix+border-right 조합이 이번 레시피에서는 display:block+border-bottom(clearfix 불필요)으로 바뀐다는 점이 확인됨 — 나머지 로직(:not(:last-child) 패턴, hover 색상)은 그대로 재사용. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
Apple/Samsung/Sony 버튼을 세로로 쌓아 이중 테두리 없이 배치하는 예제가 원문에서 직접 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Vertical button group — display:block + border-bottom fix (CSS):
|
||||
```css
|
||||
.btn-group button {
|
||||
display: block;
|
||||
width: 50%;
|
||||
border: 1px solid green;
|
||||
}
|
||||
.btn-group button:not(:last-child) {
|
||||
border-bottom: none;
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.81
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Button Group]], [[HOWTO CSS Vertical Menu]]
|
||||
- **참조 맥락:** CSS Buttons 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Vertical Button Group — https://www.w3schools.com/howto/howto_css_button_group_vertical.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Vertical Button Group" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: howto-css-button-on-image
|
||||
title: "How To - Button on Image"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["overlay button on image 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", "images"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_button_on_image.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Button On Image]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
This recipe combines two previously-seen techniques into a compound pattern: a `.container { position: relative; }` wrapper establishes the positioning context (same role as the `.container` in `[[HOWTO CSS Split Screen]]`), and the button itself uses the exact `position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);` centering formula from `[[HOWTO CSS Center Button]]` — the only new element is that the "container" here holds a responsive image (`width: 100%; height: auto;`) instead of arbitrary content, so the button ends up perfectly centered ON TOP of whatever size the image happens to render at. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`position: relative` container** — establishes the positioning context so the button's `position: absolute` is relative to the image container, not the whole page. [S1]
|
||||
- **Responsive image** — `img { width: 100%; height: auto; }` scales the image to its container's width while preserving aspect ratio. [S1]
|
||||
- **Absolute + transform centering** — the exact same `top: 50%; left: 50%; transform: translate(-50%, -50%);` formula from the general centering recipes, applied to overlay a button on the image regardless of the image's actual rendered size. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- `.container { position: relative; width: 50%; } .container img { width: 100%; height: auto; } .container .btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 5px; }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **기존 두 레시피의 조합**: `[[HOWTO CSS Split Screen]]`의 relative 컨테이너 패턴과 `[[HOWTO CSS Center Button]]`의 absolute+transform 중앙 정렬 공식이 그대로 결합되어 사용된다는 점이 확인됨 — 새로운 기법이 아니라 두 기존 패턴의 합성. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
눈 덮인 풍경 이미지 위에 "Button"이라는 버튼을 정중앙에 오버레이하는 예제가 원문에서 직접 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
A button centered on top of a responsive image (CSS):
|
||||
```css
|
||||
.container { position: relative; width: 50%; }
|
||||
.container img { width: 100%; height: auto; }
|
||||
.container .btn {
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.82
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Center Button]], [[HOWTO CSS Split Screen]], [[HOWTO CSS Form On Image]]
|
||||
- **참조 맥락:** CSS Buttons 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Button on Image — https://www.w3schools.com/howto/howto_css_button_on_image.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Button on Image" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: howto-css-button-split
|
||||
title: "How To - Split Buttons"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["split button dropdown 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", "dropdown"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_button_split.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[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):
|
||||
```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).
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: howto-css-center-button
|
||||
title: "How To - Center a Button in DIV"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["center button CSS"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.8
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "layout", "centering", "buttons"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_center_button.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Center Button]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
This recipe is the EXACT SAME three techniques as `[[HOWTO CSS Center Vertical]]` (absolute+translateY, absolute+translate both axes, flexbox), just applied to a `<button>` element instead of generic text — confirming that these centering methods are element-agnostic: they operate purely on the CONTAINER's positioning/layout, completely indifferent to what kind of child element (text, button, image, or anything else) is being centered. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Element-agnostic centering** — the same `position: absolute` + `transform` or `display: flex` techniques from the general vertical-centering recipe apply unchanged to a button. [S1]
|
||||
- **Vertical-only**: `.vertical-center { position: absolute; top: 50%; transform: translateY(-50%); }`. [S1]
|
||||
- **Both axes (absolute)**: `.center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }`. [S1]
|
||||
- **Both axes (flexbox)**: `.center { display: flex; justify-content: center; align-items: center; }`. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Same container/technique structure as the general centering recipe, with `<button>Centered Button</button>` as the child instead of a `<p>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **일반 중앙 정렬 레시피와 완전히 동일한 기법**: `[[HOWTO CSS Center Vertical]]`에서 사용된 세 가지 기법(absolute+translateY, absolute+translate 양축, flexbox)이 대상 요소만 텍스트에서 버튼으로 바뀐 채 그대로 재사용된다는 점이 확인됨 — 중앙 정렬 기법이 자식 요소의 종류와 무관하게 동작함을 보여줌. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
"Centered Button"이라는 버튼을 컨테이너 안에서 세로만, 또는 세로+가로 모두 중앙 정렬하는 예제가 원문에서 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Centering a button — identical technique to centering any element (CSS):
|
||||
```css
|
||||
.container { height: 200px; position: relative; }
|
||||
.center {
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
```
|
||||
```html
|
||||
<div class="container">
|
||||
<div class="center"><button>Centered Button</button></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.80
|
||||
- **중복 검사 결과:** [[HOWTO CSS Center Vertical]]과 기법 중복 확인 — 별도 문서로 유지(대상 요소가 다른 별개 레시피 페이지).
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Center Vertical]], [[HOWTO CSS Center Website]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Center a Button in DIV — https://www.w3schools.com/howto/howto_css_center_button.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Center a Button in DIV" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: howto-css-center-list
|
||||
title: "How To - Center a List"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["center ul li 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", "layout", "lists"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_center-list.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Center List]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Centering a `<ul>` requires TWO separate `text-align` decisions working together — `text-align: center` on the wrapping `<div>` centers the list AS A BLOCK (which only works because the list is switched from its default `display: block` to `display: inline-block`, making it text-align-able like a word), while a second, opposite `text-align: left` on the `<ul>` itself keeps the individual list items left-aligned within that now-centered block — without the inner override, the list items themselves would ALSO center, producing a ragged, hard-to-read stack instead of a tidy centered block of left-aligned lines. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Wrapper `<div>`** — `<ul>` must be wrapped in a container element to have something block-level to center. [S1]
|
||||
- **`display: inline-block` on the list** — switches the `<ul>` from block to inline-block so the parent's `text-align: center` can act on it as if it were inline content. [S1]
|
||||
- **Two-level text-align** — outer `text-align: center` (on the wrapper) centers the whole list block; inner `text-align: left` (on the `<ul>`) keeps list items left-aligned within that block. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- HTML: `<div class="container"><ul class="myUL"><li>Coffee</li><li>Tea</li><li>Coca Cola</li></ul></div>`. [S1]
|
||||
- CSS: `div.container { text-align: center; } ul.myUL { display: inline-block; text-align: left; }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
Coffee/Tea/Coca Cola 세 항목의 리스트를 감싼 div를 중앙 정렬하고, 리스트 자체는 왼쪽 정렬을 유지하는 예제가 원문에서 직접 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Centering a list block while keeping its items left-aligned (CSS):
|
||||
```css
|
||||
div.container {
|
||||
text-align: center;
|
||||
}
|
||||
ul.myUL {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.82
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Center Vertical]], [[HOWTO CSS List Without Bullets]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Center a List — https://www.w3schools.com/howto/howto_css_center-list.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Center a List" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: howto-css-center-vertical
|
||||
title: "How To - Center Elements Vertically"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["vertical centering CSS", "transform translateY center"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.84
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "layout", "centering", "flexbox"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_center-vertical.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Center Vertical]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
This page teaches THREE distinct centering techniques and, notably, does NOT declare one universally superior — the `position: absolute` + `transform: translate(-50%, -50%)` method centers an element whose OWN size is unknown at author time (the negative-percentage transform shifts it back by exactly half of ITS OWN rendered width/height, computed at runtime), while the third technique (`display: flex; justify-content: center; align-items: center;`) achieves the identical visual result with far less code but requires flex layout on the PARENT rather than absolute positioning on the child — two fundamentally different mechanisms (offset math vs. layout algorithm) converging on the same output. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Vertical-only centering** — `position: absolute; top: 50%; transform: translateY(-50%);` on a container with `position: relative`. [S1]
|
||||
- **Vertical + horizontal centering (absolute method)** — `position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);` — the transform shifts the element back by half its OWN width/height, which is why it works regardless of the element's actual size. [S1]
|
||||
- **Flexbox method** — `display: flex; justify-content: center; align-items: center;` on the PARENT centers ANY child, both axes, with no transform math at all. [S1]
|
||||
- **`-ms-transform` prefix** — included alongside the standard `transform` property for older IE/Edge compatibility. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Vertical-only: `.container { height: 200px; position: relative; } .vertical-center { margin: 0; position: absolute; top: 50%; transform: translateY(-50%); }`. [S1]
|
||||
- Both axes (absolute method): `.center { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }`. [S1]
|
||||
- Both axes (flexbox method): `.center { display: flex; justify-content: center; align-items: center; height: 200px; }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
같은 텍스트를 세로만 중앙 정렬, 세로+가로 중앙 정렬(absolute), 그리고 flexbox로 중앙 정렬하는 3가지 방식이 원문에서 나란히 비교 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Three centering techniques compared — absolute+transform vs. flexbox (CSS):
|
||||
```css
|
||||
/* Absolute + transform -- works for unknown element size */
|
||||
.center-absolute {
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/* Flexbox -- simplest, centers any child on both axes */
|
||||
.center-flex {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 200px;
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.84
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Center Button]], [[HOWTO CSS Center List]], [[HOWTO CSS Split Screen]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Center Elements Vertically — https://www.w3schools.com/howto/howto_css_center-vertical.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Center Elements Vertically" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
id: howto-css-center-website
|
||||
title: "How To - Center Website"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["margin auto center page", "center page horizontally 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", "layout", "centering"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_center_website.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Center Website]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
`margin: auto` only centers a block horizontally if the element has an EXPLICIT width (here via `max-width`) — an unconstrained block always stretches to fill its parent, leaving no leftover space for the browser to distribute as equal left/right margins, which is the entire reason this recipe pairs `max-width: 500px` with `margin: auto` rather than using either alone; this is the simplest of all the centering recipes in this cookbook because it needs neither `position`, `transform`, nor Flexbox — just a width constraint plus auto margins. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`margin: auto` requires a constrained width** — auto margins only distribute leftover horizontal space; a full-width block has none to distribute. [S1]
|
||||
- **`max-width` instead of `width`** — allows the content wrapper to shrink on narrow viewports (spanning the full page below the breakpoint) while capping its width on wide screens. [S1]
|
||||
- **No positioning/transform/flexbox needed** — the simplest technique in this cookbook's centering family, applicable to whole-page content wrappers rather than individual elements. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- `.content { max-width: 500px; margin: auto; }` applied to a wrapper `<div>` directly inside `<body>`. [S1]
|
||||
- Below 500px viewport width, the content spans the full page (since `max-width` stops constraining once the viewport is narrower than it). [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
페이지 콘텐츠를 500px 폭으로 제한하고 margin:auto로 가로 중앙 정렬해, 500px보다 좁은 화면에서는 전체 폭을 차지하게 만드는 예제가 원문에서 직접 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Centering a whole page's content with max-width + margin:auto (CSS):
|
||||
```css
|
||||
.content {
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.82
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Center Button]], [[HOWTO CSS Full Page]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Center Website — https://www.w3schools.com/howto/howto_css_center_website.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Center Website" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: howto-css-clearfix
|
||||
title: "How To - Clear Floats (Clearfix)"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["clearfix hack", "overflow auto clear floats"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.85
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "layout", "float", "clearfix"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_clearfix.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Clearfix]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The root problem this recipe fixes is that a floated element is deliberately removed from the normal document flow, which means its PARENT container has no way to "see" the float's height and collapses as if the float weren't there at all — the page offers two competing fixes with an explicit trade-off verdict: `overflow: auto` is a one-line fix but risks stray scrollbars if margins/padding aren't carefully controlled, while the "modern" `::after { content: ""; clear: both; display: table; }` pseudo-element trick is called out as the SAFER, more widely-used option precisely because it avoids that scrollbar risk. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Why containers collapse** — a floated child is removed from normal flow, so a parent with no other content collapses to zero height, as if the float weren't there. [S1]
|
||||
- **`overflow: auto` fix** — the simplest fix, forces the parent to establish a new block formatting context that accounts for floated children's height; risk of stray scrollbars if margin/padding isn't carefully managed. [S1]
|
||||
- **Modern `::after` clearfix (recommended)** — `.clearfix::after { content: ""; clear: both; display: table; }` — inserts an invisible block-level pseudo-element after the floated children that clears both sides, safely restoring the container's height without scrollbar risk. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Simple fix: `.clearfix { overflow: auto; }`. [S1]
|
||||
- Recommended modern fix: `.clearfix::after { content: ""; clear: both; display: table; }` — explicitly stated as "used for most webpages" today. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
"Without Clearfix" 상태(컨테이너가 무너짐)와 "With Clearfix" 상태(정상 높이 유지)를 나란히 비교하는 예제가 원문에서 직접 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Two clearfix techniques — overflow:auto (simple) vs. ::after pseudo-element (recommended) (CSS):
|
||||
```css
|
||||
/* Simple -- risk of stray scrollbars */
|
||||
.clearfix-simple { overflow: auto; }
|
||||
|
||||
/* Modern, recommended -- safer */
|
||||
.clearfix::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.85
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS About Page]], [[HOWTO CSS Equal Height]], [[HOWTO CSS Four Columns]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Clear Floats (Clearfix) — https://www.w3schools.com/howto/howto_css_clearfix.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Clear Floats (Clearfix)" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: howto-css-div-full-height
|
||||
title: "How To - Full Height Element"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["height 100% div"]
|
||||
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", "layout", "height"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_div_full_height.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Div Full Height]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
`height: 100%` on a lone `<div>` does nothing unless EVERY ancestor up to the root also has an explicit height — percentage heights resolve against the parent's height, and `<html>`/`<body>` have no height by default (they simply wrap their content), so the fix requires setting `height: 100%` on `html, body` FIRST to give the chain something concrete to inherit from before the target div's own `height: 100%` can mean anything. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Percentage height requires an ancestor chain of explicit heights** — a `%` height is meaningless unless every ancestor, up to `<html>`, has a defined height. [S1]
|
||||
- **`html, body { height: 100%; }`** — the required starting point, since neither element has an intrinsic height by default. [S1]
|
||||
- **`.full-height { height: 100%; }`** — only works once the ancestor chain above it is satisfied. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Full example: `html, body { height: 100%; } .full-height { height: 100%; } <div class="full-height">..</div>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — html/body/div 세 단계 모두에 height:100%를 적용하는 최소 예제가 원문에서 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Full-height div requires the entire ancestor chain to have explicit height (CSS):
|
||||
```css
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
.full-height {
|
||||
height: 100%;
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.82
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Full Page]], [[HOWTO CSS Equal Height]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Full Height Element — https://www.w3schools.com/howto/howto_css_div_full_height.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Full Height Element" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
id: howto-css-download-button
|
||||
title: "How To - Download Button"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["download button with icon CSS"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.78
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "buttons", "icons"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_download_button.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Download Button]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
This recipe pairs Font Awesome's icon-font approach (`<i class="fa fa-download"></i>` placed directly inside the button, before the text) with the SAME inline `style="width:100%"` technique already used in `[[HOWTO CSS Button Group]]`'s justified variant to make a full-width option — icons-in-buttons and full-width buttons are treated as orthogonal, independently-combinable choices rather than separate recipes. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Icon-in-button pattern** — `<button class="btn"><i class="fa fa-download"></i> Download</button>` places the icon element directly before the button's text content, both inheriting the button's own font size/color. [S1]
|
||||
- **Auto vs. full width** — the same `.btn` class works for both; full width is achieved with an inline `style="width:100%"` rather than a separate CSS class. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- `.btn { background-color: DodgerBlue; border: none; color: white; padding: 12px 30px; font-size: 20px; } .btn:hover { background-color: RoyalBlue; }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
Font Awesome 다운로드 아이콘이 포함된 버튼을 auto width와 full width 두 가지로 각각 제시하는 예제가 원문에서 직접 제공됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Icon + text button, auto or full width (HTML + CSS):
|
||||
```html
|
||||
<button class="btn"><i class="fa fa-download"></i> Download</button>
|
||||
<button class="btn" style="width:100%"><i class="fa fa-download"></i> Download</button>
|
||||
```
|
||||
```css
|
||||
.btn { background-color: DodgerBlue; border: none; color: white; padding: 12px 30px; font-size: 20px; }
|
||||
.btn:hover { background-color: RoyalBlue; }
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.78
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Icon Buttons]], [[HOWTO CSS Block Buttons]]
|
||||
- **참조 맥락:** CSS Buttons 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Download Button — https://www.w3schools.com/howto/howto_css_download_button.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Download Button" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: howto-css-equal-height
|
||||
title: "How To - Equal Height"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["equal height columns CSS", "display table-cell columns"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.85
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "layout", "flexbox"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_equal_height.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Equal Height]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The `display: table` / `display: table-cell` trick repurposes HTML TABLE layout behavior (where cells in the same row always match the row's tallest cell) onto plain `<div>`s WITHOUT using an actual `<table>` element — an old technique that pre-dates Flexbox, and the recipe explicitly shows Flexbox (`display: flex; flex: 1;`) as the modern equivalent with an explicit caveat: Flexbox isn't supported in IE10 and earlier, which is presumably why the table-display trick is taught FIRST despite being the more obscure approach. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`display: table` / `display: table-cell`** — makes a `<div>` container and its `<div>` children behave like a `<table>` and `<td>`s, inheriting the automatic row-height-matching behavior of real tables, without any table markup. [S1]
|
||||
- **Responsive stacking via media query** — `@media (max-width: 600px) { .col { display: block; width: 100%; } }` switches the table-cell columns to stacked blocks on narrow screens. [S1]
|
||||
- **Flexbox alternative** — `.col-container { display: flex; } .col { flex: 1; }` achieves the same equal-height effect with less code, but is unsupported in IE10 and earlier. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Table-display method: `.col-container { display: table; width: 100%; } .col { display: table-cell; }`. [S1]
|
||||
- Flexbox method: `.col-container { display: flex; width: 100%; } .col { flex: 1; padding: 16px; }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
서로 다른 텍스트 길이를 가진 3개 컬럼이 항상 가장 높은 컬럼에 맞춰 동일한 높이로 렌더링되는 예제가 원문에서 직접 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Table-display trick vs. Flexbox for equal-height columns (CSS):
|
||||
```css
|
||||
/* Table-display trick -- works in older browsers */
|
||||
.col-container { display: table; width: 100%; }
|
||||
.col { display: table-cell; }
|
||||
|
||||
/* Flexbox -- modern, not supported in IE10 and earlier */
|
||||
.col-container-flex { display: flex; width: 100%; }
|
||||
.col-flex { flex: 1; padding: 16px; }
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.85
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Four Columns]], [[HOWTO CSS Clearfix]], [[HOWTO CSS Mixed Columns]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Equal Height — https://www.w3schools.com/howto/howto_css_equal_height.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Equal Height" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
id: howto-css-fading-buttons
|
||||
title: "How To - Fading Buttons"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "unverified"
|
||||
canonical_id: ""
|
||||
aliases: ["fade in out button hover CSS"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.5
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: "Source page's three interactive demos (fade in, fade out, fade background) render their CSS in live iframes not captured by the text extractor — only the effect labels were retrieved."
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "buttons", "animation"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_fading_buttons.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Fading Buttons]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Like `[[HOWTO CSS Animate Buttons]]`, this page's actual `transition`/`opacity` CSS for its three named effects (fade in, fade out, fade background) was not retrievable through text extraction — only the effect labels were captured, so this entry records the page's scope honestly rather than fabricating plausible-but-unverified `transition: opacity` values. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Three named fade effects**: fade in on hover, fade out on hover, fade background on hover. [S1]
|
||||
- Specific implementation (which property transitions, duration, easing) could not be confirmed from the extracted text and is NOT included here to avoid fabrication. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Only the three effect labels and "Try it Yourself »" markers were extracted; the live CSS lives in embedded iframe examples the extractor does not capture. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 검증 불가로 인해 비교할 세부 내용이 부족함.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 코드 예제가 텍스트로 추출되지 않았습니다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
추출되지 않음 — 원문의 라이브 코드 예제가 iframe에 있어 텍스트로 캡처되지 않았습니다. 재방문 시 브라우저 스크린샷 또는 별도 렌더링 도구로 재확인 필요.
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** unverified
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.50
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery) — 콘텐츠 불완전, 재검증 필요.
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Animate Buttons]], [[HOWTO CSS Transition Hover]]
|
||||
- **참조 맥락:** CSS Buttons 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Fading Buttons — https://www.w3schools.com/howto/howto_css_fading_buttons.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from partial extraction of the W3Schools "How To - Fading Buttons" page — code examples not captured, flagged for re-verification (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: howto-css-fixed-footer
|
||||
title: "How To - Fixed Footer"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["position fixed bottom footer"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.83
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "layout", "position", "footer"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_fixed_footer.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Fixed Footer]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
`position: fixed; bottom: 0; left: 0; width: 100%;` pins the footer to the VIEWPORT, not the document — meaning it stays visible on screen even while the page scrolls, which is exactly what makes a "fixed footer" behaviorally different from a normal footer that simply sits at the end of page content and scrolls away with everything else. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`position: fixed`** — removes the element from normal flow and anchors it relative to the VIEWPORT (browser window), not the document, so it never scrolls out of view. [S1]
|
||||
- **`bottom: 0; left: 0; width: 100%;`** — pins the fixed element to the bottom edge and stretches it the full viewport width. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Full example: `.footer { position: fixed; left: 0; bottom: 0; width: 100%; background-color: red; color: white; text-align: center; } <div class="footer"><p>Footer</p></div>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
빨간 배경의 "Footer" 텍스트 바를 화면 하단에 고정하는 최소 예제가 원문에서 직접 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Fixed footer pinned to the viewport bottom (CSS):
|
||||
```css
|
||||
.footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: red;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.83
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Fixed Menu]], [[HOWTO CSS Fixed Sidebar]], [[HOWTO CSS Sticky Element]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Fixed Footer — https://www.w3schools.com/howto/howto_css_fixed_footer.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Fixed Footer" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
id: howto-css-fixed-menu
|
||||
title: "How To - Fixed Menu"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["fixed navbar CSS", "sticky top menu"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.84
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "layout", "position", "navigation"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_fixed_menu.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Fixed Menu]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The recipe explicitly warns that a fixed navbar OVERLAYS page content underneath it (since `position: fixed` removes the element from flow, other content doesn't "know" to leave room for it) — the fix is a manual `margin-top` on the main content equal to or greater than the navbar's height, meaning every fixed-menu layout requires the developer to keep two separate numbers (navbar height, content margin) in sync by hand, with no built-in mechanism linking them. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`position: fixed; top: 0;`** — pins the menu to the top of the VIEWPORT, staying visible during scroll. [S1]
|
||||
- **Overlay problem** — a fixed element doesn't push other content down; without compensation, the fixed menu covers the top of the page content. [S1]
|
||||
- **Manual `margin-top` fix** — the main content block needs `margin-top` at least equal to the navbar's rendered height to avoid being hidden underneath it. [S1]
|
||||
- **Bottom variant** — swapping `top: 0` for `bottom: 0` creates a fixed BOTTOM menu instead, with the equivalent fix being `margin-bottom` on the main content. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Fixed top menu: `.navbar { position: fixed; top: 0; width: 100%; overflow: hidden; background-color: #333; } .navbar a { float: left; padding: 14px 16px; color: #f2f2f2; } .main { margin-top: 30px; }`. [S1]
|
||||
- Fixed bottom menu: `.navbar { position: fixed; bottom: 0; width: 100%; } .main { margin-bottom: 30px; }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
Home/News/Contact 링크가 담긴 상단 고정 메뉴를 만들고, 콘텐츠가 가려지지 않도록 margin-top을 추가하는 예제가 원문에서 직접 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Fixed top navbar requiring a manual content offset (CSS):
|
||||
```css
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background-color: #333;
|
||||
}
|
||||
.main {
|
||||
margin-top: 30px; /* must match or exceed navbar height */
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.84
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Fixed Footer]], [[HOWTO CSS Fixed Sidebar]], [[HOWTO JS Navbar Sticky]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Fixed Menu — https://www.w3schools.com/howto/howto_css_fixed_menu.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Fixed Menu" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: howto-css-fixed-sidebar
|
||||
title: "How To - Fixed Sidebar"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["sidenav CSS", "fixed side navigation"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.83
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "layout", "position", "navigation", "sidebar"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_fixed_sidebar.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Fixed Sidebar]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Just like the fixed-top-menu recipe, this pattern requires the SAME manual "keep two numbers in sync" discipline — the sidebar's `width` and the main content's `margin-left` must match exactly, or the content either overlaps the sidebar (margin too small) or leaves an awkward gap (margin too large); `z-index: 1` is also added here specifically because the sidebar sits alongside scrollable content rather than above/below it, making stacking order collisions more likely than in the top/bottom fixed-menu case. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`position: fixed; top: 0; left: 0;`** — pins the sidebar to the left edge of the viewport. [S1]
|
||||
- **`z-index: 1`** — ensures the sidebar stays above other page content in stacking order. [S1]
|
||||
- **`overflow-x: hidden`** — prevents horizontal scrollbars from appearing inside the fixed sidebar. [S1]
|
||||
- **Matching `margin-left` on `.main`** — must equal the sidebar's declared `width` (e.g. both `160px`) to avoid overlap. [S1]
|
||||
- **Full-height vs. auto-height variants** — `height: 100%` makes the sidebar span the entire viewport height; omitting it lets the sidebar size to its own content instead. [S1]
|
||||
- **Small-screen responsiveness** — `@media screen and (max-height: 450px)` reduces padding/font-size on short viewports (not a width breakpoint — a HEIGHT breakpoint, unusual compared to most responsive recipes in this cookbook). [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Full example: `.sidenav { height: 100%; width: 160px; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; padding-top: 20px; } .sidenav a { padding: 6px 8px 6px 16px; color: #818181; display: block; } .main { margin-left: 160px; padding: 0px 10px; }`. [S1]
|
||||
- Short-viewport adjustment: `@media screen and (max-height: 450px) { .sidenav { padding-top: 15px; } .sidenav a { font-size: 18px; } }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
About/Services/Clients/Contact 링크가 담긴 좌측 고정 사이드바를 만들고, 본문에 동일한 margin-left를 줘 겹치지 않게 하는 예제가 원문에서 직접 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Fixed sidebar with matching content margin (CSS):
|
||||
```css
|
||||
.sidenav {
|
||||
height: 100%;
|
||||
width: 160px;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 0; left: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.main {
|
||||
margin-left: 160px; /* must match sidenav width */
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.83
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Fixed Menu]], [[HOWTO JS Sidenav]], [[HOWTO CSS Sidebar Responsive]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Fixed Sidebar — https://www.w3schools.com/howto/howto_css_fixed_sidebar.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Fixed Sidebar" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: howto-css-four-columns
|
||||
title: "How To - Four Column Layout"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["4 column grid CSS float"]
|
||||
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", "layout", "float", "responsive"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_four_columns.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Four Columns]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Four equal columns is just `width: 25%` (100% ÷ 4 columns) applied to `float: left` children — the SAME clearfix-plus-float pattern already seen in the About Page and Equal Height recipes, confirming that "N equal float columns" always reduces to `width: (100/N)%` plus a `::after` clearfix on the row, regardless of whether N is 2, 3, or 4. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`width: 25%` for 4 equal columns** — the float-width formula generalizes as `100% / N` for N equal columns. [S1]
|
||||
- **`.row:after` clearfix** — required whenever floated columns are used, to prevent the row container from collapsing. [S1]
|
||||
- **Single-breakpoint responsive collapse** — `@media (max-width: 600px) { .column { width: 100%; } }` stacks all four columns vertically below 600px, with no intermediate 2-column step (contrast with Mixed Column Layout, which adds an intermediate breakpoint). [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Base layout: `.column { float: left; width: 25%; } .row:after { content: ""; display: table; clear: both; }`. [S1]
|
||||
- Responsive collapse: `@media screen and (max-width: 600px) { .column { width: 100%; } }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
4개의 동일한 폭 컬럼을 만들고, 600px 미만 화면에서 전부 세로로 쌓이게 하는 예제가 원문에서 직접 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Four equal float columns with a single responsive breakpoint (CSS):
|
||||
```css
|
||||
.column { float: left; width: 25%; }
|
||||
.row:after { content: ""; display: table; clear: both; }
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.column { width: 100%; }
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.82
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Mixed Columns]], [[HOWTO CSS Three Columns]], [[HOWTO CSS Two Columns]], [[HOWTO CSS Equal Height]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Four Column Layout — https://www.w3schools.com/howto/howto_css_four_columns.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Four Column Layout" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
id: howto-css-full-page
|
||||
title: "How To - Full Page Image"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["fullscreen background image CSS", "background-size cover"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.83
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "layout", "background-image"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_full_page.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Full Page]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
This recipe needs the SAME `html, body { height: 100% }` foundation already established in `[[HOWTO CSS Div Full Height]]` — a full-page background image is really just "full-height div" plus three background properties (`background-position: center; background-repeat: no-repeat; background-size: cover;`) that together crop and scale the image to fill the box without distortion or tiling, and switching to a "half page" image is a ONE-LINE change (`height: 50%` instead of `100%`) since the height percentage is what defines "how much of the page" the image covers, not the background properties themselves. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`html, body { height: 100%; }` prerequisite** — same requirement as the full-height div recipe: percentage heights need a defined ancestor chain. [S1]
|
||||
- **`background-size: cover`** — scales the image to completely cover the element's box, cropping overflow, never leaving gaps or distorting aspect ratio. [S1]
|
||||
- **`background-position: center`** — centers the visible crop of the image within the box. [S1]
|
||||
- **`background-repeat: no-repeat`** — prevents the image from tiling. [S1]
|
||||
- **Height percentage controls page coverage** — `height: 100%` = full page, `height: 50%` = half page; the background properties stay identical either way. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Full-page: `body, html { height: 100%; } .bg { background-image: url("img_girl.jpg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; }`. [S1]
|
||||
- Half-page: same `.bg` rules, just `height: 50%;`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
전체 화면과 절반 화면 두 가지 배경 이미지 데모가 원문에서 나란히 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Full-screen background image, cropped and centered without distortion (CSS):
|
||||
```css
|
||||
body, html { height: 100%; }
|
||||
.bg {
|
||||
background-image: url("img_girl.jpg");
|
||||
height: 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.83
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Div Full Height]], [[HOWTO CSS Hero Image]], [[HOWTO CSS Fullscreen Video]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Full Page Image — https://www.w3schools.com/howto/howto_css_full_page.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Full Page Image" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: howto-css-icon-buttons
|
||||
title: "How To - Icon Buttons"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["font awesome button icons"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.78
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "buttons", "icons"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_icon_buttons.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Icon Buttons]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
This is the general form of the "icon + optional text" pattern already seen specifically applied to downloads in `[[HOWTO CSS Download Button]]` — the same `<i class="fa fa-*"></i>` icon element works standalone inside a button (icon-only) OR immediately followed by a text label (icon+text), using the IDENTICAL `.btn` styling either way, confirming that "icon button" isn't a distinct component type but simply "any button whose content happens to include a Font Awesome `<i>` tag." [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Icon-only buttons** — `<button class="btn"><i class="fa fa-home"></i></button>` — just the icon, no text. [S1]
|
||||
- **Icon + text buttons** — `<button class="btn"><i class="fa fa-home"></i> Home</button>` — icon followed by a space and label. [S1]
|
||||
- **Same `.btn` class serves both** — no separate CSS needed to distinguish icon-only from icon+text buttons. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- `.btn { background-color: DodgerBlue; border: none; color: white; padding: 12px 16px; font-size: 16px; } .btn:hover { background-color: RoyalBlue; }`. [S1]
|
||||
- Icons shown: home, bars (menu), trash, close, folder. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **Download Button 레시피의 일반화된 버전**: `[[HOWTO CSS Download Button]]`에서 이미 다운로드 아이콘 하나에 적용된 "아이콘+텍스트" 패턴이, 이 레시피에서는 아이콘 단독 버전까지 포함해 여러 아이콘(home/menu/trash/close/folder)에 걸쳐 동일한 .btn 클래스로 일반화된다는 점이 확인됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
Home/Menu/Trash/Close/Folder 5개 아이콘을 아이콘 단독, 아이콘+텍스트 두 가지 스타일로 각각 제시하는 예제가 원문에서 직접 제공됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Icon-only vs. icon+text buttons using the same class (HTML + CSS):
|
||||
```html
|
||||
<button class="btn"><i class="fa fa-home"></i></button>
|
||||
<button class="btn"><i class="fa fa-home"></i> Home</button>
|
||||
```
|
||||
```css
|
||||
.btn { background-color: DodgerBlue; border: none; color: white; padding: 12px 16px; font-size: 16px; }
|
||||
.btn:hover { background-color: RoyalBlue; }
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.78
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Download Button]], [[HOWTO CSS Notification Button]]
|
||||
- **참조 맥락:** CSS Buttons 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Icon Buttons — https://www.w3schools.com/howto/howto_css_icon_buttons.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Icon Buttons" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: howto-css-images-side-by-side
|
||||
title: "How To - Align Images Side By Side"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["image row CSS float flex"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.81
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "layout", "images", "float", "flexbox"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_images_side_by_side.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Images Side By Side]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
This is the N-column layout formula from `[[HOWTO CSS Three Columns]]` applied specifically to images wrapped in their own containers (`<div class="column"><img></div>`) rather than raw text blocks — the note "(use 25% for four, and 50% for two, etc)" embedded directly in the CSS comment makes explicit what earlier column recipes only implied: the `width` percentage is always `100 / N`, a single formula that generalizes across every "N images/columns side by side" recipe in this cookbook. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Image wrapped in its own column div** — each `<img>` sits inside a `.column` div, not floated directly, so padding/spacing can be controlled on the wrapper. [S1]
|
||||
- **Float method** — `.column { float: left; width: 33.33%; padding: 5px; }` + `.row::after` clearfix — the general N-column formula (100/N%) applied to a 3-image gallery. [S1]
|
||||
- **Flexbox method** — `.row { display: flex; } .column { flex: 33.33%; padding: 5px; }`, with the same IE10-support caveat repeated from the Two Column recipe. [S1]
|
||||
- **Responsive breakpoint at 500px** — narrower than the 600px used in most other column recipes, since images (unlike text columns) may need to shrink further before stacking makes sense. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Float: `.column { float: left; width: 33.33%; padding: 5px; } .row::after { content: ""; clear: both; display: table; }`. [S1]
|
||||
- Flex: `.row { display: flex; } .column { flex: 33.33%; padding: 5px; }`. [S1]
|
||||
- Responsive: `@media screen and (max-width: 500px) { .column { width: 100%; } }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **N-column 공식(100/N%)이 이미지 갤러리에도 그대로 적용됨**: 텍스트 블록 대신 이미지가 들어간다는 점만 다를 뿐, `[[HOWTO CSS Three Columns]]`에서 확인된 float/flex 두 방식과 공식이 동일하다는 점이 확인됨 — 원문 CSS 주석이 직접 "(use 25% for four, and 50% for two, etc)"라고 명시해 이 공식의 일반화를 확인시켜줌. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
눈, 숲, 산 사진 3장을 나란히 배치하고 500px 미만 화면에서 세로로 쌓는 예제가 원문에서 직접 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Side-by-side images using the general N-column formula (100/N%) (CSS):
|
||||
```css
|
||||
.column {
|
||||
float: left;
|
||||
width: 33.33%; /* use 25% for four, 50% for two, etc. */
|
||||
padding: 5px;
|
||||
}
|
||||
.row::after { content: ""; clear: both; display: table; }
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.81
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Three Columns]], [[HOWTO CSS Image Gallery]], [[HOWTO CSS Image Grid Responsive]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션의 마지막 챕터 — CSS Buttons 섹션으로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Align Images Side By Side — https://www.w3schools.com/howto/howto_css_images_side_by_side.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Align Images Side By Side" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: howto-css-loading-buttons
|
||||
title: "How To - Loading Buttons"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["fa-spin spinner button"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.8
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "buttons", "icons", "loading"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_loading_buttons.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Loading Buttons]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The entire "spinning" effect comes from Font Awesome's OWN `fa-spin` utility class, not any custom CSS animation authored in this recipe — `.buttonload` only handles the button's static look (background, padding, color), while the rotation itself is entirely delegated to whichever icon library is loaded, meaning this recipe demonstrates HOW to compose a third-party icon library's built-in animation utility with a custom button style, rather than teach `@keyframes` rotation from scratch. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`fa-spin`** — a Font Awesome utility class that rotates any icon continuously; combined with a spinner-shaped icon (`fa-spinner`, `fa-circle-o-notch`, `fa-refresh`) to create a loading indicator. [S1]
|
||||
- **`.buttonload`** — only styles the button's static appearance (background/padding/color/font-size); contributes NOTHING to the spin animation itself. [S1]
|
||||
- **Interchangeable spinner icons** — three different icon glyphs (`fa-spinner`, `fa-circle-o-notch`, `fa-refresh`) all combine with the SAME `fa-spin` class to produce visually different but functionally identical spinning loaders. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- `<button class="buttonload"><i class="fa fa-spinner fa-spin"></i>Loading</button>`. [S1]
|
||||
- `.buttonload { background-color: #04AA6D; border: none; color: white; padding: 12px 16px; font-size: 16px; }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
서로 다른 스피너 아이콘 3개(spinner/circle-o-notch/refresh)를 fa-spin과 결합해 "Loading" 버튼 3종을 만드는 예제가 원문에서 직접 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Loading button — animation comes entirely from the icon library's fa-spin utility (HTML + CSS):
|
||||
```html
|
||||
<button class="buttonload">
|
||||
<i class="fa fa-spinner fa-spin"></i>Loading
|
||||
</button>
|
||||
```
|
||||
```css
|
||||
.buttonload { background-color: #04AA6D; border: none; color: white; padding: 12px 16px; }
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.80
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Loader]], [[HOWTO CSS Icon Buttons]]
|
||||
- **참조 맥락:** CSS Buttons 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Loading Buttons — https://www.w3schools.com/howto/howto_css_loading_buttons.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Loading Buttons" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: howto-css-mixed-columns
|
||||
title: "How To - Mixed Column Layout"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["responsive 4-2-1 column layout"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.83
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "layout", "float", "responsive", "media-queries"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_mixed_columns.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Mixed Columns]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Where `[[HOWTO CSS Four Columns]]` collapsed directly from 4 columns to 1 stacked column at a single breakpoint, this recipe adds an INTERMEDIATE step — two STACKED media queries (900px, then 600px) progressively widen each column's percentage (25% → 50% → 100%) as the screen narrows, demonstrating that responsive breakpoints aren't limited to one "desktop vs. mobile" cutoff; they can chain to create a 4-column → 2-column → 1-column cascade, with each `@media` rule simply overriding the previous width at a narrower threshold. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Base layout: 4 equal float columns** — `.column { float: left; width: 25%; }` plus the standard `.row:after` clearfix. [S1]
|
||||
- **First breakpoint (900px): 4 → 2 columns** — `@media (max-width: 900px) { .column { width: 50%; } }`. [S1]
|
||||
- **Second breakpoint (600px): 2 → 1 column** — `@media (max-width: 600px) { .column { width: 100%; } }`. [S1]
|
||||
- **Cascading override order matters** — later (narrower) media queries must come after earlier (wider) ones in the stylesheet so they correctly override at smaller widths, per normal CSS cascade rules. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Full progressive layout: `.column { float: left; width: 25%; } .row:after { content: ""; display: table; clear: both; } @media screen and (max-width: 900px) { .column { width: 50%; } } @media screen and (max-width: 600px) { .column { width: 100%; } }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **단일 브레이크포인트가 아니라 다단계 캐스케이드**: `[[HOWTO CSS Four Columns]]`는 600px 하나의 브레이크포인트로 4열→1열로 바로 붕괴시켰지만, 이 레시피는 900px(4→2열)과 600px(2→1열) 두 단계를 거치는 점진적 붕괴를 사용한다는 점이 확인됨 — 반응형 브레이크포인트가 여러 단계로 연쇄될 수 있음을 보여줌. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
화면 폭에 따라 4열→2열→1열로 점진적으로 바뀌는 컬럼 레이아웃 예제가 원문에서 직접 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Progressive breakpoint cascade — 4 columns → 2 → 1 (CSS):
|
||||
```css
|
||||
.column { float: left; width: 25%; }
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.column { width: 50%; }
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
.column { width: 100%; }
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.83
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Four Columns]], [[HOWTO CSS Responsive Floats]], [[HOWTO CSS Two Columns]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Mixed Column Layout — https://www.w3schools.com/howto/howto_css_mixed_columns.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Mixed Column Layout" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
id: howto-css-more-button
|
||||
title: "How To - More Button in Navbar"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["dropdown navbar more button"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.83
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "buttons", "navigation", "dropdown"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_more_button.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS More Button]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
This recipe explains WHY the dropdown wrapper must be floated even though it's a `<div>` sitting among `<a>` navbar links: `.navbar a` is already `float: left` by default in navbar CSS, but a `<div>` never floats automatically — without explicitly floating `.dropdown`, the "More" button-plus-menu block would drop to its own line below the Home/News links instead of sitting inline with them, which is the exact reasoning given for why the `.dropdown` container itself needs `float: left` even though the same hover-reveal mechanism already appeared, unfloated, in `[[HOWTO CSS Button Split]]`. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Why `.dropdown` needs `float: left`** — sibling `<a>` navbar links are floated by their own rule, but a `<div>` wrapper isn't floated by anything unless explicitly told to, so it must be floated to stay inline with the other nav links rather than dropping to a new line. [S1]
|
||||
- **`box-shadow` instead of `border`** — the dropdown menu uses `box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);` to look like a "card" floating above the page, rather than a bordered box. [S1]
|
||||
- **`font-family: inherit; margin: 0;` on the dropdown button** — explicitly called out as important for correct vertical alignment specifically on mobile phones. [S1]
|
||||
- **Same hover-reveal mechanism as Split Buttons** — `.dropdown:hover .dropdown-content { display: block; }`, reused unchanged from `[[HOWTO CSS Button Split]]`. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- `.navbar a { float: left; padding: 14px 16px; } .dropdown { float: left; overflow: hidden; } .dropdown-content { display: none; position: absolute; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown:hover .dropdown-content { display: block; }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **왜 dropdown div도 float가 필요한지 명시적으로 설명됨**: `[[HOWTO CSS Button Split]]`은 드롭다운 트리거가 이미 인라인 요소들 사이에 위치했지만, 이 레시피는 navbar 안에서 `<div>`가 형제 `<a>` 링크들과 나란히 있으려면 float를 명시적으로 지정해야 한다고 직접 설명한다는 점이 확인됨 — div는 a 태그와 달리 자동으로 float되지 않음. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
Home/News 링크 옆에 "More" 드롭다운 버튼을 추가해 마우스를 올리면 Link 1/2/3 메뉴가 나타나는 예제가 원문에서 직접 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Dropdown div explicitly floated to stay inline with navbar links (CSS):
|
||||
```css
|
||||
.navbar a { float: left; padding: 14px 16px; }
|
||||
.dropdown { float: left; overflow: hidden; } /* div doesn't float automatically */
|
||||
.dropdown-content { display: none; position: absolute; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }
|
||||
.dropdown:hover .dropdown-content { display: block; }
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.83
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Button Split]], [[HOWTO CSS Dropdown Navbar]], [[HOWTO CSS Mega Menu]]
|
||||
- **참조 맥락:** CSS Buttons 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - More Button in Navbar — https://www.w3schools.com/howto/howto_css_more_button.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - More Button in Navbar" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: howto-css-notification-button
|
||||
title: "How To - Notification Buttons"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["badge count button 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", "badge"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_notification_button.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Notification Button]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The count badge is positioned with NEGATIVE offsets (`top: -10px; right: -10px;`) rather than the usual `0`/positive values seen in other absolute-positioning recipes — this deliberately pushes the badge PARTLY OUTSIDE the parent button's boundary box, creating the familiar "peeking over the corner" notification-count look, which only works because `.notification { position: relative; }` gives the badge a positioning anchor to escape from in the first place. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`position: relative` on the button** — establishes the anchor for the badge's absolute positioning, same relative/absolute pairing seen throughout this cookbook. [S1]
|
||||
- **Negative `top`/`right` offsets** — `top: -10px; right: -10px;` deliberately pushes the badge outside the button's own box, rather than flush against an inner edge. [S1]
|
||||
- **`border-radius: 50%` badge** — combined with roughly-equal padding to render as a circle around the count number. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- `.notification { background-color: #555; position: relative; display: inline-block; } .notification .badge { position: absolute; top: -10px; right: -10px; border-radius: 50%; background: red; color: white; }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
"Inbox" 버튼 오른쪽 상단 모서리에 빨간 원형 배지로 "3"을 표시하는 예제가 원문에서 직접 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Notification badge escaping the button's own box via negative offsets (CSS):
|
||||
```css
|
||||
.notification { position: relative; display: inline-block; }
|
||||
.notification .badge {
|
||||
position: absolute;
|
||||
top: -10px; right: -10px; /* negative -- pushes outside the button */
|
||||
border-radius: 50%;
|
||||
background: red;
|
||||
color: white;
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.82
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Icon Buttons]], [[HOWTO CSS Ribbon]]
|
||||
- **참조 맥락:** CSS Buttons 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Notification Buttons — https://www.w3schools.com/howto/howto_css_notification_button.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Notification Buttons" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,66 @@
|
||||
---
|
||||
id: howto-css-outline-buttons
|
||||
title: "How To - Outline Buttons"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["ghost button CSS"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.83
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "buttons"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_outline_buttons.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Outline Buttons]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Outline buttons INVERT `[[HOWTO CSS Alert Buttons]]`'s color model exactly: instead of a solid background color that stays constant while text stays white, each variant here starts with a WHITE background and COLORED border+text, then on `:hover` SWAPS to the solid colored background with white text — meaning the outline button's hover state is literally the alert button's resting state, and vice versa. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Resting state: colored border + colored text, white background** — `.success { border-color: #04AA6D; color: green; }`. [S1]
|
||||
- **Hover state: swap to solid fill** — `.success:hover { background-color: #04AA6D; color: white; }` — the exact inverse of the resting state's color assignment. [S1]
|
||||
- **`border-radius` as an optional add-on** — a single extra rule (`.btn { border-radius: 5px; }`) converts the same outline buttons to rounded outline buttons, without touching any other rule. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Base: `.btn { border: 2px solid black; background-color: white; color: black; padding: 14px 28px; }`. [S1]
|
||||
- Success example: `.success { border-color: #04AA6D; color: green; } .success:hover { background-color: #04AA6D; color: white; }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **Alert Buttons의 색상 모델을 정확히 반전시킴**: `[[HOWTO CSS Alert Buttons]]`는 배경색이 항상 칠해져 있고 hover 시 살짝 어두워지는 방식이었지만, 이 레시피는 기본 상태가 흰 배경+색 테두리이고 hover 시 완전히 반전되어 배경이 채워진다는 점이 정반대 설계로 확인됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
Success/Info/Warning/Danger/Default 5가지 아웃라인 버튼을 hover 시 색이 채워지도록 만들고, border-radius로 둥근 버전도 추가하는 예제가 원문에서 직접 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Outline button — colors invert on hover (CSS):
|
||||
```css
|
||||
.btn { border: 2px solid black; background-color: white; color: black; }
|
||||
.success { border-color: #04AA6D; color: green; }
|
||||
.success:hover { background-color: #04AA6D; color: white; } /* inverted */
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.83
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Alert Buttons]], [[HOWTO CSS Text Buttons]], [[HOWTO CSS Round Buttons]]
|
||||
- **참조 맥락:** CSS Buttons 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Outline Buttons — https://www.w3schools.com/howto/howto_css_outline_buttons.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Outline Buttons" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,66 @@
|
||||
---
|
||||
id: howto-css-pill-button
|
||||
title: "How To - Pill Buttons"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["rounded button CSS"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.77
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "buttons"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_pill_button.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Pill Button]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
A "pill" shape is simply `border-radius` set LARGER than half the button's own height — at `16px` against a button whose padding produces roughly that height, the corners round out so far that they meet, turning the rectangle's short ends into full semicircles, which is the exact same property (`border-radius`) that `[[HOWTO CSS Round Buttons]]` uses at `50%` to make a full circle — pill and circle buttons are two points on the SAME radius-value spectrum, not different techniques. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`border-radius: 16px`** — large enough relative to the button's height that the short ends become fully rounded semicircles, producing the "pill" look. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- `.button { background-color: #ddd; border: none; padding: 10px 20px; border-radius: 16px; }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **Round Buttons와 동일한 속성의 다른 값**: `[[HOWTO CSS Round Buttons]]`가 `border-radius: 50%`로 완전한 원을 만드는 것과 달리, 이 레시피는 `16px`이라는 절댓값으로 버튼 높이의 절반 이상을 채워 알약 모양을 만든다는 점이 확인됨 — 같은 속성의 스펙트럼 상 다른 지점일 뿐, 별개 기법이 아님. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
사각형 버튼과 알약 모양 버튼을 나란히 비교하는 예제가 원문에서 직접 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Pill-shaped button via a large border-radius (CSS):
|
||||
```css
|
||||
.button {
|
||||
background-color: #ddd;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.77
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Round Buttons]], [[HOWTO CSS Pill Nav]]
|
||||
- **참조 맥락:** CSS Buttons 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Pill Buttons — https://www.w3schools.com/howto/howto_css_pill_button.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Pill Buttons" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
id: howto-css-responsive-floats
|
||||
title: "How To - Responsive Floats"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["media query float direction"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.8
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "layout", "float", "media-queries"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_responsive_floats.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Responsive Floats]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
This recipe applies media queries not to WIDTH (the usual target in this cookbook's other layout recipes) but to the `float` DIRECTION itself — two complementary classes (`.float-right-sm` for small screens, `.float-right-lg` for large) each activate at opposite ends of a 768/769px split, showing that media queries can toggle ANY CSS property conditionally, not just sizing. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Conditional `float` via media query** — `@media (max-width: 768px) { .float-right-sm { float: right; } }` and `@media (min-width: 769px) { .float-right-lg { float: right; } }` each apply float only within their respective breakpoint range. [S1]
|
||||
- **Complementary breakpoints** — `max-width: 768px` and `min-width: 769px` are deliberately adjacent (no gap, no overlap) so exactly one rule is ever active at a given viewport width. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Full example: two separate classes, each with its own media query scoping float:right to a specific screen-width range. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 화면 폭에 따라 float 방향을 다르게 적용하는 최소 예제가 원문에서 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Screen-width-conditional float direction (CSS):
|
||||
```css
|
||||
@media (max-width: 768px) {
|
||||
.float-right-sm { float: right; }
|
||||
}
|
||||
@media (min-width: 769px) {
|
||||
.float-right-lg { float: right; }
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.80
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Mixed Columns]], [[HOWTO CSS Media Query Breakpoints]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Responsive Floats — https://www.w3schools.com/howto/howto_css_responsive_floats.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Responsive Floats" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
id: howto-css-round-buttons
|
||||
title: "How To - Round Buttons"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["circle button CSS", "border-radius spectrum"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.8
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "buttons"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_round_buttons.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Round Buttons]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
This recipe demonstrates the FULL `border-radius` spectrum in one place — five buttons with identical base styling but five different radius values (2px, 4px, 8px, 12px, 50%) — making explicit what `[[HOWTO CSS Pill Button]]` only implied: `border-radius` is a continuous dial from "barely rounded corners" to "fully circular," and pill/round buttons are just two named stops along that same dial rather than distinct techniques. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Shared base class + radius-only modifiers** — `.button` sets background/padding/color once; five `.buttonN` classes each differ ONLY in `border-radius` value. [S1]
|
||||
- **`border-radius: 50%`** — the endpoint of the spectrum, producing a full circle (requires roughly equal width/height, which square padding here approximates). [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- `.button { background-color: #04AA6D; border: none; color: white; padding: 20px; } .button1 {border-radius: 2px;} .button2 {border-radius: 4px;} .button3 {border-radius: 8px;} .button4 {border-radius: 12px;} .button5 {border-radius: 50%;}`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **Pill Button과 동일한 속성 스펙트럼의 시각적 증명**: `[[HOWTO CSS Pill Button]]`이 16px 하나의 값만 보여줬다면, 이 레시피는 2px부터 50%까지 다섯 단계를 나란히 배치해 border-radius가 연속적인 값의 스펙트럼임을 명시적으로 보여준다는 점이 확인됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
동일한 버튼에 border-radius 값만 2px/4px/8px/12px/50%로 바꿔가며 다섯 가지 결과를 나란히 비교하는 예제가 원문에서 직접 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Border-radius spectrum from barely-rounded to fully circular (CSS):
|
||||
```css
|
||||
.button { background-color: #04AA6D; border: none; color: white; padding: 20px; }
|
||||
.button1 { border-radius: 2px; }
|
||||
.button5 { border-radius: 50%; } /* fully circular */
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.80
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Pill Button]], [[HOWTO CSS Notification Button]], [[HOWTO CSS Social Media Buttons]]
|
||||
- **참조 맥락:** CSS Buttons 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Round Buttons — https://www.w3schools.com/howto/howto_css_round_buttons.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Round Buttons" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,65 @@
|
||||
---
|
||||
id: howto-css-search-button
|
||||
title: "How To - Search Button"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["search bar with icon button CSS"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.81
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "buttons", "forms"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_search_button.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Search Button]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
`border-left: none;` on the button reuses the EXACT double-border fix already established for adjacent buttons in `[[HOWTO CSS Button Group]]`'s `:not(:last-child)` pattern — here applied to just TWO elements (a text input and a button, both floated and both bordered) sitting flush against each other, where an 80%/20% width split ensures the input dominates visually while the icon button stays compact. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`float: left` on both input and button** — `width: 80%` for the search input, `width: 20%` for the button, summing to 100% — same N-column formula pattern as the layout recipes. [S1]
|
||||
- **`border-left: none` on the button** — prevents a doubled border where the input's right edge meets the button's left edge, the same principle as the button group's `:not(:last-child)` fix, just applied between two DIFFERENT element types rather than a repeated list of buttons. [S1]
|
||||
- **`form::after` clearfix** — the standard clearfix, needed because both children are floated. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- `form.example input[type=text] { float: left; width: 80%; } form.example button { float: left; width: 20%; border-left: none; } form.example::after { content: ""; clear: both; display: table; }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **버튼 그룹의 이중 테두리 제거 원리가 다른 요소 조합에도 적용됨**: `[[HOWTO CSS Button Group]]`의 `:not(:last-child) { border-right: none; }`이 반복되는 버튼들 사이의 이중 테두리를 막았다면, 이 레시피는 input과 button이라는 서로 다른 두 요소 사이의 접합부에 동일한 원리(`border-left: none`)를 적용한다는 점이 확인됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
검색어 입력창(80%)과 돋보기 아이콘 버튼(20%)을 이중 테두리 없이 하나로 이어붙인 검색 폼 예제가 원문에서 직접 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Search input + button joined without a doubled border (CSS):
|
||||
```css
|
||||
form.example input[type=text] { float: left; width: 80%; border: 1px solid grey; }
|
||||
form.example button { float: left; width: 20%; border: 1px solid grey; border-left: none; }
|
||||
form.example::after { content: ""; clear: both; display: table; }
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.81
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Button Group]], [[HOWTO CSS Searchbar]], [[HOWTO JS Search Menu]]
|
||||
- **참조 맥락:** CSS Buttons 섹션의 마지막 두 챕터 중 하나 — Sidenav Buttons로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Search Button — https://www.w3schools.com/howto/howto_css_search_button.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Search Button" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -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).
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
id: howto-css-social-media-buttons
|
||||
title: "How To - Social Media Buttons"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["facebook twitter icon button CSS"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.79
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "buttons", "icons", "social"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_social_media_buttons.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Social Media Buttons]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
This recipe applies the shared-base-plus-modifier pattern from `[[HOWTO CSS Alert Buttons]]` to icon LINKS instead of buttons — `.fa` handles all shared sizing/padding, while brand-specific classes (`.fa-facebook`, `.fa-twitter`) that Font Awesome ALREADY DEFINES as icon-selector classes are reused here as STYLING hooks too, meaning the same class serves double duty: selecting which glyph renders (Font Awesome's job) AND which background color applies (this recipe's own rule) — no extra custom class is introduced for branding. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`.fa` shared base** — padding, font-size, width, text-align applied once to every social icon link. [S1]
|
||||
- **Reusing Font Awesome's own icon classes as color hooks** — `.fa-facebook { background: #3B5998; }` piggybacks on the SAME class Font Awesome uses to select the Facebook glyph, rather than introducing a separate custom class. [S1]
|
||||
- **Square vs. round variant** — identical `.fa` rules plus `border-radius: 50%` (and a reduced `width`) converts the square icon buttons to round ones — same `border-radius` spectrum concept already seen in `[[HOWTO CSS Round Buttons]]`. [S1]
|
||||
- **`opacity: 0.7` hover** — a lightweight hover effect distinct from the background-color-swap hovers used elsewhere in this cookbook. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- `.fa { padding: 20px; font-size: 30px; width: 50px; text-align: center; } .fa:hover { opacity: 0.7; } .fa-facebook { background: #3B5998; color: white; }`. [S1]
|
||||
- Round variant: same `.fa` rules, `width: 30px;` and `border-radius: 50%;` added. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
Facebook/Twitter 아이콘 링크를 사각형과 원형 두 가지 스타일로 브랜드 색상과 함께 제시하는 예제가 원문에서 직접 제공됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Font Awesome's own icon-selector classes reused as color hooks (CSS):
|
||||
```css
|
||||
.fa {
|
||||
padding: 20px;
|
||||
font-size: 30px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
.fa:hover { opacity: 0.7; }
|
||||
.fa-facebook { background: #3B5998; color: white; }
|
||||
.fa-twitter { background: #55ACEE; color: white; }
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.79
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Round Buttons]], [[HOWTO CSS Icon Buttons]], [[HOWTO CSS Sticky Social Bar]]
|
||||
- **참조 맥락:** CSS Buttons 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Social Media Buttons — https://www.w3schools.com/howto/howto_css_social_media_buttons.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Social Media Buttons" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: howto-css-split-screen
|
||||
title: "How To - Split Screen 1/2"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["50/50 split layout CSS"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.83
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "layout", "position"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_split_screen.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Split Screen]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Instead of floating two 50%-width columns (the technique used in `[[HOWTO CSS Two Columns]]`), this recipe fixes BOTH halves to the viewport independently — `.split { position: fixed; height: 100%; width: 50%; }` combined with `.left { left: 0; }` / `.right { right: 0; }` pins each half to an opposite screen edge, meaning the two halves never scroll and always occupy exactly half the viewport regardless of page content length, which float-based columns cannot guarantee (floated columns follow document flow and CAN scroll). [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`position: fixed; width: 50%; height: 100%;`** — anchors each half to the viewport, not the document flow, so both halves are always visible and exactly half-width. [S1]
|
||||
- **`left: 0` / `right: 0`** — pins one half to the left edge, the other to the right edge, with no gap or overlap. [S1]
|
||||
- **Centered content inside each half** — reuses the absolute+transform centering technique (`position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);`) already seen in `[[HOWTO CSS Center Vertical]]`, applied per-half. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Split halves: `.split { height: 100%; width: 50%; position: fixed; z-index: 1; top: 0; overflow-x: hidden; } .left { left: 0; background-color: #111; } .right { right: 0; background-color: red; }`. [S1]
|
||||
- Centered content: `.centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .centered img { width: 150px; border-radius: 50%; }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **fixed 포지셔닝이 float 기반 2단 컬럼과 근본적으로 다름**: `[[HOWTO CSS Two Columns]]`의 float 기반 2단 레이아웃은 문서 흐름을 따라 스크롤되지만, 이 레시피는 두 절반을 각각 position:fixed로 뷰포트에 고정해 항상 화면 절반씩을 차지하고 스크롤되지 않는다는 점이 핵심 차이로 확인됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
왼쪽에 여성 아바타, 오른쪽에 남성 아바타를 각각 배치해 화면을 정확히 반으로 나누는 예제가 원문에서 직접 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Two viewport-fixed halves, each pinned to an opposite edge (CSS):
|
||||
```css
|
||||
.split {
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
.left { left: 0; background-color: #111; }
|
||||
.right { right: 0; background-color: red; }
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.83
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Two Columns]], [[HOWTO CSS Center Vertical]], [[HOWTO CSS Fixed Sidebar]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Split Screen 1/2 — https://www.w3schools.com/howto/howto_css_split_screen.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Split Screen 1/2" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,66 @@
|
||||
---
|
||||
id: howto-css-sticky-element
|
||||
title: "How To - Sticky Element"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["position sticky CSS"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.84
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "layout", "position", "sticky"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_sticky_element.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Sticky Element]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
`position: sticky` is a HYBRID of the two positioning models this cookbook has already covered separately — it behaves like `position: relative` (occupying its normal place in the document flow) until the scroll position reaches the specified offset (`top: 0`), at which point it switches to behave like `position: fixed` (pinned to the viewport) — meaning it's not a third independent positioning scheme but a scroll-triggered TOGGLE between the two schemes already used in `[[HOWTO CSS Fixed Menu]]` and ordinary flow layout. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`position: sticky`** — toggles between `relative` and `fixed` behavior depending on scroll position. [S1]
|
||||
- **Requires an offset property** — at least one of `top`, `right`, `bottom`, or `left` MUST be specified, or sticky positioning does nothing. [S1]
|
||||
- **Browser support caveat** — explicitly noted to NOT work in Internet Explorer or Edge 15 and earlier. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Minimal example: `div.sticky { position: sticky; top: 0; }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **relative와 fixed 사이를 스크롤에 따라 토글하는 하이브리드**: `[[HOWTO CSS Fixed Menu]]`에서 확인된 순수 `position: fixed`와 달리, sticky는 스크롤 위치가 지정된 오프셋에 도달하기 전에는 일반 흐름(relative)을 따르다가 그 지점부터 fixed처럼 고정된다는 점이 두 방식의 결합으로 확인됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — top:0 오프셋을 지정한 최소 sticky 예제가 원문에서 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Sticky positioning — toggles between relative and fixed on scroll (CSS):
|
||||
```css
|
||||
div.sticky {
|
||||
position: sticky;
|
||||
top: 0; /* at least one offset is required */
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.84
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Fixed Menu]], [[HOWTO CSS Sticky Social Bar]], [[HOWTO JS Navbar Sticky]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Sticky Element — https://www.w3schools.com/howto/howto_css_sticky_element.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Sticky Element" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,65 @@
|
||||
---
|
||||
id: howto-css-table-center
|
||||
title: "How To - Center Tables"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["center table CSS"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.8
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "tables", "centering"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_table_center.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Table Center]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
This is the exact same `margin-left: auto; margin-right: auto;` mechanism used to center a page's content wrapper in `[[HOWTO CSS Center Website]]`, applied to a `<table>` instead — and the page explicitly flags the same underlying constraint that recipe relied on: a `<table>` set to `width: 100%` CANNOT be centered, because auto margins only distribute space the element ISN'T already using, and a full-width table leaves none. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`margin-left: auto; margin-right: auto;`** — centers a table horizontally, the SAME mechanism as centering any block-level element with a constrained width. [S1]
|
||||
- **Width constraint required** — like the website-centering recipe, this only works if the table does NOT span `width: 100%`. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- `.center { margin-left: auto; margin-right: auto; }` applied to `<table class="center">`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **웹사이트 중앙 정렬과 동일한 원리**: `[[HOWTO CSS Center Website]]`에서 확인된 "margin:auto는 명시적 폭 제약이 있어야 동작한다"는 규칙이 테이블에도 동일하게 적용된다는 점이 확인됨 — width:100% 테이블은 중앙 정렬할 여백 자체가 없어 불가능. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
Firstname/Lastname/Age 컬럼을 가진 테이블을 margin:auto로 페이지 중앙에 배치하는 예제가 원문에서 직접 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Centering a table — only works without width:100% (CSS):
|
||||
```css
|
||||
.center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.80
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Center Website]], [[HOWTO CSS Table Full Width]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Center Tables — https://www.w3schools.com/howto/howto_css_table_center.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Center Tables" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
id: howto-css-table-full-width
|
||||
title: "How To - Full-width Table"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["table width 100%"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.78
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "tables"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_table_full_width.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Table Full Width]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
This one-line recipe (`table { width: 100%; }`) is the DIRECT INVERSE of `[[HOWTO CSS Table Center]]`'s constraint — the two recipes describe mutually exclusive states of the exact same property (a table's width): either it's constrained (leaving room for `margin: auto` to center it) or it's `100%` (filling its container, impossible to center further), and choosing between them is a design decision the cookbook splits into two separate pages rather than presenting as one page's trade-off note. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`table { width: 100%; }`** — the table stretches to fill its container's full width, rather than sizing to its content's natural width (the browser default). [S1]
|
||||
- **Mutually exclusive with centering** — a full-width table and a centered (via `margin: auto`) table are opposite configurations of the same width property. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Default (no set width) vs. `width: 100%` comparison demo shown side by side. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **Center Tables 레시피와 상호 배타적인 설정**: `[[HOWTO CSS Table Center]]`가 명시한 "width:100% 테이블은 중앙 정렬 불가"라는 제약의 반대편 상태가 바로 이 레시피(width:100%)라는 점이 확인됨 — 두 레시피는 같은 속성의 서로 다른 선택지를 각각 별도 페이지로 다룸. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
너비를 지정하지 않은 기본 테이블과 width:100%를 적용한 전체 폭 테이블을 나란히 비교하는 예제가 원문에서 직접 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Full-width table (CSS):
|
||||
```css
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.78
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Table Center]], [[HOWTO CSS Table Responsive]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Full-width Table — https://www.w3schools.com/howto/howto_css_table_full_width.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Full-width Table" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: howto-css-text-buttons
|
||||
title: "How To - Text Buttons"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["ghost text button CSS", "background-color inherit"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.81
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "buttons"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_text_buttons.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Text Buttons]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
`background-color: inherit;` is the key trick that makes a "text button" invisible-as-a-button in its resting state — rather than setting an explicit background (even `white` or `transparent`, which would still create a visible box against certain page backgrounds), inheriting the PARENT's background color guarantees the button visually blends into whatever surface it sits on, making it look like plain colored text until hovered; this is the THIRD distinct button color-scheme this cookbook has shown for the same five semantic names (success/info/warning/danger/default), after Alert Buttons (solid fill) and Outline Buttons (bordered, inverts on hover) — text buttons are the "no fill, no border" endpoint of that same progression. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`background-color: inherit`** — takes on whatever background color the button's PARENT has, making the button invisible as a distinct shape until interacted with. [S1]
|
||||
- **`border: none`** — removes the outline entirely, unlike the Outline Buttons variant. [S1]
|
||||
- **Two hover variants** — a shared neutral hover (`background: #eee;` for ALL variants) OR per-variant colored hover (each semantic class gets its OWN hover background, matching its Alert Buttons counterpart color). [S1]
|
||||
- **Third point in the fill/border/text progression** — Alert Buttons (solid fill always) → Outline Buttons (border, fills on hover) → Text Buttons (no fill, no border, colored text only). [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Shared neutral hover: `.btn { border: none; background-color: inherit; } .btn:hover { background: #eee; } .success { color: green; }`. [S1]
|
||||
- Per-variant colored hover: `.success:hover { background-color: #04AA6D; color: white; }` (matches Alert Buttons' success color exactly). [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **fill/border/text 3단계 진행의 마지막 지점**: `[[HOWTO CSS Alert Buttons]]`(항상 배경 채움) → `[[HOWTO CSS Outline Buttons]]`(테두리만, hover 시 채워짐) → 이 레시피(배경 없음, hover 시에만 색상 등장)로 이어지는 3단계 색상 스킴 진행의 마지막 단계라는 점이 확인됨 — 동일한 5개 시맨틱 이름(success/info/warning/danger/default)에 세 가지 다른 시각적 무게를 적용하는 셈. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
배경이 없어 평범한 텍스트처럼 보이다가 hover 시 색이 채워지는 5가지 시맨틱 버튼 예제가 원문에서 직접 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Text button — invisible fill via background-color:inherit (CSS):
|
||||
```css
|
||||
.btn {
|
||||
border: none;
|
||||
background-color: inherit; /* blends into parent background */
|
||||
padding: 14px 28px;
|
||||
}
|
||||
.success { color: green; }
|
||||
.success:hover { background-color: #04AA6D; color: white; }
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.81
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Alert Buttons]], [[HOWTO CSS Outline Buttons]]
|
||||
- **참조 맥락:** CSS Buttons 섹션의 마지막 챕터.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Text Buttons — https://www.w3schools.com/howto/howto_css_text_buttons.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Text Buttons" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: howto-css-three-columns
|
||||
title: "How To - Three Column Layout"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["3 column grid CSS float"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.81
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "layout", "float", "responsive"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_three_columns.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Three Columns]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Beyond the standard equal-column formula (`width: 33.33%` for 3 equal float columns, same pattern as `[[HOWTO CSS Four Columns]]`), this recipe also shows UNEQUAL columns achieved by simply giving each column class its OWN explicit width (`.left, .right { width: 25%; } .middle { width: 50%; }`) instead of a shared class — proving that "N-column layout" isn't really about a fixed formula at all, just floats whose widths happen to sum to 100%, whether or not they're equal. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Equal 3-column** — `.column { float: left; width: 33.33%; }` + `.row:after` clearfix. [S1]
|
||||
- **Unequal 3-column** — separate classes with independently-set widths that still sum to 100%: `.left, .right { width: 25%; } .middle { width: 50%; }`. [S1]
|
||||
- **Same responsive collapse pattern** — `@media (max-width: 600px) { .column { width: 100%; } }`, identical breakpoint value to the Two/Four column recipes. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Equal columns: `.column { float: left; width: 33.33%; } .row:after { content: ""; display: table; clear: both; }`. [S1]
|
||||
- Unequal columns: `.column { float: left; } .left, .right { width: 25%; } .middle { width: 50%; }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
동일 폭 3열과, 25%/50%/25%로 나뉜 비대칭 3열 두 가지 예제가 원문에서 나란히 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Equal vs. unequal 3-column float layout (CSS):
|
||||
```css
|
||||
/* Equal */
|
||||
.column { float: left; width: 33.33%; }
|
||||
|
||||
/* Unequal -- widths just need to sum to 100% */
|
||||
.left, .right { float: left; width: 25%; }
|
||||
.middle { float: left; width: 50%; }
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.81
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Four Columns]], [[HOWTO CSS Two Columns]], [[HOWTO CSS Zig Zag Layout]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Three Column Layout — https://www.w3schools.com/howto/howto_css_three_columns.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Three Column Layout" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: howto-css-two-columns
|
||||
title: "How To - Two Column Layout"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["2 column grid CSS float flexbox"]
|
||||
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", "layout", "float", "flexbox", "responsive"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_two_columns.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Two Columns]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
This is the only column-layout recipe in this cookbook batch to state an explicit DECISION RULE rather than just presenting Flexbox as strictly "the modern way" — it says "it is up to you if you want to use floats or flex... however, if you need support for IE10 and down, you should use float," turning what could be a simple old-vs-new dichotomy into a practical browser-support checklist for choosing between the two. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Float method (equal)** — `.column { float: left; width: 50%; }` + clearfix, same pattern as 3/4-column recipes. [S1]
|
||||
- **Flexbox method (equal)** — `.row { display: flex; } .column { flex: 50%; }` — no clearfix needed since Flexbox doesn't remove children from flow the way floats do. [S1]
|
||||
- **Explicit decision rule** — use float if IE10-or-earlier support is required; otherwise either method works. [S1]
|
||||
- **Unequal columns (float only shown)** — `.left { width: 25%; } .right { width: 75%; }`. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Float: `.column { float: left; width: 50%; } .row:after { content: ""; display: table; clear: both; }`. [S1]
|
||||
- Flex: `.row { display: flex; } .column { flex: 50%; }`. [S1]
|
||||
- Responsive collapse: `@media (max-width: 600px) { .column { width: 100%; } }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **명시적 선택 기준이 제시됨**: 다른 컬럼 레이아웃 레시피들과 달리, 이 챕터는 "IE10 이하 지원이 필요하면 float를 쓰라"는 구체적 선택 기준을 직접 명시한다는 점이 확인됨 — 단순히 "flex가 더 현대적"이라는 서술에 그치지 않음. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
동일한 2단 레이아웃을 float와 flexbox 두 가지 방식으로 각각 구현하고, 각 방식의 브라우저 지원 여부에 따른 선택 기준을 함께 제시하는 예제가 원문에서 직접 제공됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Float vs. Flexbox for two equal columns — pick based on IE10 support needs (CSS):
|
||||
```css
|
||||
/* Float -- use if IE10 and earlier must be supported */
|
||||
.column-float { float: left; width: 50%; }
|
||||
.row:after { content: ""; display: table; clear: both; }
|
||||
|
||||
/* Flexbox -- modern, no IE10 and earlier support */
|
||||
.row-flex { display: flex; }
|
||||
.column-flex { flex: 50%; }
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.82
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Three Columns]], [[HOWTO CSS Split Screen]], [[HOWTO CSS Equal Height]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Two Column Layout — https://www.w3schools.com/howto/howto_css_two_columns.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Two Column Layout" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: howto-css-vertical-line
|
||||
title: "How To - Vertical Line"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["border-left divider CSS"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.8
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "layout", "border"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_vertical_line.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Vertical Line]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
A "vertical line" isn't a special CSS shape primitive at all — it's an empty `<div>` with `height` set and ONLY a `border-left` declared (no other sides), and centering it uses a variant of the absolute-positioning trick already seen elsewhere: `left: 50%; margin-left: -3px;` (half of the 6px border width, negated) achieves the same "shift back by half my own size" effect that `transform: translateX(-50%)` would, just computed manually instead of automatically. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`border-left` only, on an empty div** — `.vl { border-left: 6px solid green; height: 500px; }` — no width, no content; the border alone forms the visible line. [S1]
|
||||
- **Manual half-width offset for centering** — `left: 50%; margin-left: -3px;` (half of the 6px border, negated) recenters the line, since `left: 50%` alone would place its LEFT EDGE at the midpoint rather than centering the line itself. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Basic vertical line: `.vl { border-left: 6px solid green; height: 500px; }` applied to an empty `<div class="vl"></div>`. [S1]
|
||||
- Centered version: `.vl { border-left: 6px solid green; height: 500px; position: absolute; left: 50%; margin-left: -3px; top: 0; }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **transform 대신 수동 margin 계산으로 중앙 정렬**: `[[HOWTO CSS Center Vertical]]`의 `transform: translate(-50%, -50%)`가 자동으로 자기 자신의 절반만큼 되돌리는 것과 달리, 이 레시피는 테두리 두께(6px)의 절반인 -3px를 margin-left로 수동 계산해 동일한 효과를 낸다는 점이 확인됨 — 같은 목적을 자동 vs 수동 방식으로 각각 구현. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 초록색 6px 세로선을 만들고 화면 중앙에 배치하는 최소 예제가 원문에서 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
An empty div with only border-left, centered via manual margin offset (CSS):
|
||||
```css
|
||||
.vl {
|
||||
border-left: 6px solid green;
|
||||
height: 500px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -3px; /* half of border-left width, negated */
|
||||
top: 0;
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.80
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Center Vertical]], [[HOWTO CSS Dividers]], [[HOWTO CSS Text Divider]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Vertical Line — https://www.w3schools.com/howto/howto_css_vertical_line.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Vertical Line" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: howto-css-zig-zag-layout
|
||||
title: "How To - Responsive Zig Zag Layout"
|
||||
category: "Web_Recipes"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["alternating column layout CSS"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.81
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["howto", "css", "w3schools", "layout", "float", "responsive"]
|
||||
raw_sources: ["https://www.w3schools.com/howto/howto_css_zig_zag_layout.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HOWTO CSS Zig Zag Layout]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The "zig zag" effect requires no special CSS at all — it's just two SEPARATE `.row` containers, each holding the SAME two column-width classes (`column-66`, `column-33`) but in REVERSED HTML ORDER (66/33 in row one, 33/66 in row two) — the alternating visual pattern is purely a consequence of swapping which class comes first in the markup, not any CSS trickery. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **2/3 + 1/3 float columns** — `.column-66 { width: 66.66666%; }` and `.column-33 { width: 33.33333%; }`, both floated left, summing to 100%. [S1]
|
||||
- **Alternation via markup order, not CSS** — row 1 places `column-66` then `column-33`; row 2 SWAPS the order (`column-33` then `column-66`) — the zig-zag look emerges purely from which HTML block comes first, using the exact same two CSS classes both times. [S1]
|
||||
- **Single breakpoint at 1000px** — wider than the typical 600px seen in other column recipes, since a 2/3+1/3 split needs more room before it becomes cramped. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Two separate `.container > .row` blocks: first with `column-66` then `column-33`; second with `column-33` then `column-66`. [S1]
|
||||
- CSS: `.column-66 { float: left; width: 66.66666%; padding: 20px; } .column-33 { float: left; width: 33.33333%; padding: 20px; }`. [S1]
|
||||
- Responsive: `@media screen and (max-width: 1000px) { .column-66, .column-33 { width: 100%; text-align: center; } }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
동일한 두 CSS 클래스(column-66/column-33)를 각 row마다 순서만 바꿔 배치해 지그재그 효과를 만드는 예제가 원문에서 직접 제시됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Zig-zag effect from reordering the same two classes across rows (HTML + CSS):
|
||||
```html
|
||||
<div class="row"><div class="column-66">...</div><div class="column-33">...</div></div>
|
||||
<div class="row"><div class="column-33">...</div><div class="column-66">...</div></div>
|
||||
```
|
||||
```css
|
||||
.column-66 { float: left; width: 66.66666%; padding: 20px; }
|
||||
.column-33 { float: left; width: 33.33333%; padding: 20px; }
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.81
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3Schools HOW TO]]
|
||||
- **관련 개념:** [[HOWTO CSS Three Columns]], [[HOWTO CSS Mixed Columns]]
|
||||
- **참조 맥락:** CSS Layout & Positioning 섹션의 마지막 챕터.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — How To - Responsive Zig Zag Layout — https://www.w3schools.com/howto/howto_css_zig_zag_layout.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Responsive Zig Zag Layout" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
Reference in New Issue
Block a user