ulgerang/web_mindmap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial web mindmap site

Browse Source
This commit is contained in:
user
2026-05-11 14:20:04 +09:00
commit b91c415129
23 changed files with 1205 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
index.html Normal file
View File

@@ -0,0 +1,60 @@
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>웹 개발 용어 마인드맵</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="learning-canvas" id="viewport" aria-labelledby="page-title">
<header class="hud">
<div>
<p class="eyebrow">Web Learning Map</p>
<h1 id="page-title">웹 개발 용어 마인드맵</h1>
</div>
<div class="hud-actions">
<button id="resetView" type="button">중앙으로</button>
<button id="foldAll" type="button">접기</button>
</div>
</header>
<section class="canvas-help" aria-label="사용 상태">
<span id="visibleCount">1개 노드</span>
<span>배경 드래그: 이동</span>
<span>노드 드래그: 위치 변경</span>
</section>
<div class="world" id="world">
<svg class="connector-layer" id="connectorLayer" aria-hidden="true"></svg>
<div class="node-layer" id="nodeLayer" aria-label="접을 수 있는 웹 개발 용어 지도"></div>
</div>
</main>
<div class="lightbox" id="lightbox" hidden>
<button class="lightbox-backdrop" type="button" aria-label="팝업 닫기"></button>
<figure class="lightbox-card">
<div class="lightbox-top">
<div>
<p id="lightboxCategory">용어</p>
<figcaption id="lightboxCaption">이미지</figcaption>
</div>
<div class="zoom-toolbar" aria-label="이미지 확대 축소">
<button class="icon-button" id="zoomOut" type="button" aria-label="축소">−</button>
<span id="zoomLevel">100%</span>
<button class="icon-button" id="zoomIn" type="button" aria-label="확대">+</button>
<button class="text-button" id="zoomReset" type="button">맞춤</button>
<button class="text-button" id="fullscreenToggle" type="button">전체화면</button>
<button class="icon-button" id="closeLightbox" type="button" aria-label="팝업 닫기">×</button>
</div>
</div>
<div class="zoom-stage" id="zoomStage">
<img id="lightboxImage" alt="" />
</div>
<p class="lightbox-focus" id="lightboxFocus"></p>
</figure>
</div>
<script src="./script.js"></script>
</body>
</html>