61 lines
2.4 KiB
HTML
61 lines
2.4 KiB
HTML
|
<!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>
|