65 lines
2.7 KiB
HTML
65 lines
2.7 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" id="mapEyebrow">Web Learning Map</p>
|
||
<h1 id="page-title">웹 개발 용어 마인드맵</h1>
|
||
</div>
|
||
<div class="hud-actions">
|
||
<div class="map-switcher" aria-label="마인드맵 주제 선택">
|
||
<button class="map-tab is-selected" data-map="web" type="button" aria-pressed="true">웹</button>
|
||
<button class="map-tab" data-map="linux" type="button" aria-pressed="false">리눅스</button>
|
||
</div>
|
||
<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>
|