HTML 직접 보기
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>다온시 인구 변화 확인용 자료</title>
<style>
:root { color-scheme: light; --ink:#172033; --muted:#5e687b; --line:#dfe4ec; --accent:#3157d5; --soft:#eef2ff; }
* { box-sizing:border-box; }
body { margin:0; background:#f5f7fb; color:var(--ink); font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif; line-height:1.55; }
main { width:min(940px,calc(100% - 32px)); margin:32px auto; }
header, section { background:#fff; border:1px solid var(--line); border-radius:20px; padding:24px; }
header { margin-bottom:16px; }
h1 { margin:8px 0; font-size:clamp(1.6rem,4vw,2.3rem); }
h2 { margin:0 0 12px; font-size:1.15rem; }
p { margin:8px 0; }
.eyebrow, .badge { color:var(--accent); font-weight:800; }
.notice { padding:14px 16px; border-radius:14px; background:var(--soft); }
.table-wrap { overflow-x:auto; margin:16px 0; }
table { width:100%; min-width:640px; border-collapse:collapse; }
th, td { padding:11px 12px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
th:first-child, td:first-child, th:last-child, td:last-child { text-align:left; }
thead th { background:#f7f8fb; font-size:.92rem; }
button { border:0; border-radius:12px; padding:12px 16px; background:var(--accent); color:#fff; font:inherit; font-weight:800; cursor:pointer; }
button:focus-visible { outline:4px solid #ffca42; outline-offset:3px; }
#verification[hidden] { display:none; }
ul { margin:10px 0 0; padding-left:20px; }
.meta { color:var(--muted); font-size:.92rem; }
@media (max-width:640px) {
.table-wrap { overflow:visible; }
table, tbody, tr, td { display:block; min-width:0; width:100%; }
thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
tr { margin-bottom:12px; padding:10px 14px; border:1px solid var(--line); border-radius:14px; }
td, td:first-child, td:last-child { display:flex; justify-content:space-between; gap:16px; padding:7px 0; border:0; text-align:right; white-space:normal; }
td::before { content:attr(data-label); color:var(--muted); font-weight:700; text-align:left; }
}
</style>
</head>
<body>
<main>
<header>
<p class="eyebrow">Cowork 연습 자료 1 · 가상 자료</p>
<h1>다온시 인구 변화표</h1>
<p>전체 인구와 65세 이상 인구가 어떻게 달라졌는지 살펴보는 연수용 자료입니다.</p>
<p class="notice"><strong>중요:</strong> 다온시는 가상 지역입니다. 아래 수치를 실제 지역 통계로 인용하지 않습니다.</p>
</header>
<section aria-labelledby="table-title">
<h2 id="table-title">2016–2025 연도별 인구</h2>
<div class="table-wrap">
<table>
<thead>
<tr><th scope="col">연도</th><th scope="col">전체 인구(명)</th><th scope="col">65세 이상(명)</th><th scope="col">65세 이상 비중</th><th scope="col">확인 상태</th></tr>
</thead>
<tbody>
<tr><td data-label="연도">2016</td><td data-label="전체 인구">312,400명</td><td data-label="65세 이상">43,700명</td><td data-label="비중">14.0%</td><td data-label="확인"><span class="badge">자료 안에서 확인</span></td></tr>
<tr><td data-label="연도">2017</td><td data-label="전체 인구">311,900명</td><td data-label="65세 이상">45,100명</td><td data-label="비중">14.5%</td><td data-label="확인"><span class="badge">자료 안에서 확인</span></td></tr>
<tr><td data-label="연도">2018</td><td data-label="전체 인구">311,100명</td><td data-label="65세 이상">47,200명</td><td data-label="비중">15.2%</td><td data-label="확인"><span class="badge">자료 안에서 확인</span></td></tr>
<tr><td data-label="연도">2019</td><td data-label="전체 인구">309,800명</td><td data-label="65세 이상">49,600명</td><td data-label="비중">16.0%</td><td data-label="확인"><span class="badge">자료 안에서 확인</span></td></tr>
<tr><td data-label="연도">2020</td><td data-label="전체 인구">307,900명</td><td data-label="65세 이상">52,300명</td><td data-label="비중">17.0%</td><td data-label="확인"><span class="badge">자료 안에서 확인</span></td></tr>
<tr><td data-label="연도">2021</td><td data-label="전체 인구">305,500명</td><td data-label="65세 이상">55,000명</td><td data-label="비중">18.0%</td><td data-label="확인"><span class="badge">자료 안에서 확인</span></td></tr>
<tr><td data-label="연도">2022</td><td data-label="전체 인구">303,000명</td><td data-label="65세 이상">57,900명</td><td data-label="비중">19.1%</td><td data-label="확인"><span class="badge">자료 안에서 확인</span></td></tr>
<tr><td data-label="연도">2023</td><td data-label="전체 인구">300,200명</td><td data-label="65세 이상">60,900명</td><td data-label="비중">20.3%</td><td data-label="확인"><span class="badge">자료 안에서 확인</span></td></tr>
<tr><td data-label="연도">2024</td><td data-label="전체 인구">297,100명</td><td data-label="65세 이상">64,000명</td><td data-label="비중">21.5%</td><td data-label="확인"><span class="badge">자료 안에서 확인</span></td></tr>
<tr><td data-label="연도">2025</td><td data-label="전체 인구">293,800명</td><td data-label="65세 이상">67,300명</td><td data-label="비중">22.9%</td><td data-label="확인"><span class="badge">자료 안에서 확인</span></td></tr>
</tbody>
</table>
</div>
<button id="toggle" type="button" aria-expanded="false" aria-controls="verification">출처·확인 기준 보기</button>
<div id="verification" hidden>
<h2>출처와 확인 기준</h2>
<ul>
<li>파일 안 출처: 「다온시 통계연보 2025」 표 2-1 — 연수용으로 만든 가상 문서</li>
<li>사용 가능: 연도별 전체 인구 감소, 65세 이상 인구 증가, 비중 변화 읽기</li>
<li>사용 금지: 실제 지역 이름으로 바꾸어 사실처럼 인용하기</li>
<li>실제 수업 전 확인: 국가통계포털 또는 행정안전부 주민등록 인구 자료로 교체</li>
</ul>
</div>
<p id="status" class="meta" role="status" aria-live="polite">표와 가상 자료 표시를 먼저 확인하세요.</p>
</section>
</main>
<script>
const button = document.querySelector("#toggle");
const panel = document.querySelector("#verification");
const status = document.querySelector("#status");
button.addEventListener("click", () => {
const willOpen = panel.hidden;
panel.hidden = !willOpen;
button.setAttribute("aria-expanded", String(willOpen));
button.textContent = willOpen ? "출처·확인 기준 닫기" : "출처·확인 기준 보기";
status.textContent = willOpen ? "출처와 확인 기준을 열었습니다." : "출처와 확인 기준을 닫았습니다.";
});
</script>
</body>
</html>