Antigravity Agent
1cfd3bbb56
Topic_CSS/Topic_HTML/Topic_JavaScript/Topic_Prompt/Topic_Comfyui 등 기존 카테고리 폴더를 정리하고, Topic_Graphic/Dev 등 신규 산출물과 Topics 내부 세션/메모리 기록을 동기화.
13 KiB
13 KiB
id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit
| id | title | category | status | verification_status | canonical_id | aliases | duplicate_of | source_trust_level | confidence_score | created_at | updated_at | review_reason | merge_history | tags | raw_sources | applied_in | github_commit | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| howto-tutorial-index | W3Schools HOW TO | Web_Recipes | draft | conceptual |
|
B | 0.88 | 2026-07-04 | 2026-07-04 |
|
|
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 otherTopic_*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, folderTopic_HOWTO. Source slugs usehowto_prefix,.aspextension (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).