Family / index.html
ginipick's picture
Update index.html
5e03578 verified
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>์กฐ์„ ์‹œ๋Œ€ '100๋Œ€ ๋ณธ๊ด€๋ณ„ ๊ณผ๊ฑฐ ๊ธ‰์ œ์ž' ํ˜„ํ™ฉ (๊ฒ€์ฆํŒ)</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 1600px;
margin: 0 auto;
background: white;
border-radius: 15px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
text-align: center;
}
.header h1 {
font-size: 2em;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.header p {
font-size: 1.1em;
opacity: 0.9;
margin-bottom: 20px;
}
.verification-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9em;
margin-top: 10px;
}
.badges-container {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
flex-wrap: wrap;
margin-top: 20px;
}
.badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
font-size: 0.95em;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
position: relative;
overflow: hidden;
}
.badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s;
}
.badge:hover::before {
left: 100%;
}
.badge:hover {
transform: translateY(-3px);
box-shadow: 0 6px 25px rgba(0,0,0,0.3);
}
.badge-kakao {
background: linear-gradient(135deg, #FEE500 0%, #FFEB3B 100%);
color: #3C1E1E;
}
.badge-kakao:hover {
background: linear-gradient(135deg, #FFD700 0%, #FFC107 100%);
}
.badge-ginigen {
background: linear-gradient(135deg, #00D9FF 0%, #0099FF 100%);
color: white;
}
.badge-ginigen:hover {
background: linear-gradient(135deg, #00C4E6 0%, #0080E6 100%);
}
.badge-icon {
font-size: 1.2em;
}
.search-box {
padding: 20px 30px;
background: #f8f9fa;
border-bottom: 1px solid #dee2e6;
}
.search-box input {
width: 100%;
padding: 12px 20px;
font-size: 16px;
border: 2px solid #dee2e6;
border-radius: 25px;
outline: none;
transition: all 0.3s;
}
.search-box input:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.table-container {
padding: 30px;
overflow-x: auto;
max-height: 650px;
overflow-y: auto;
}
table {
width: 100%;
border-collapse: collapse;
background: white;
font-size: 0.95em;
}
thead {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
position: sticky;
top: 0;
z-index: 10;
}
th {
padding: 12px 8px;
text-align: center;
font-weight: 600;
cursor: pointer;
user-select: none;
position: relative;
transition: background 0.3s;
font-size: 0.9em;
}
th:hover {
background: rgba(255,255,255,0.1);
}
th::after {
content: ' โ‡…';
opacity: 0.5;
font-size: 0.85em;
}
th.sort-asc::after {
content: ' โ–ฒ';
opacity: 1;
}
th.sort-desc::after {
content: ' โ–ผ';
opacity: 1;
}
tbody tr {
border-bottom: 1px solid #dee2e6;
transition: all 0.3s;
}
tbody tr:hover {
background: #f8f9fa;
transform: scale(1.005);
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
tbody tr:nth-child(-n+10) {
background: #fff9e6;
}
td {
padding: 10px 8px;
text-align: center;
}
td:first-child {
font-weight: 600;
color: #999;
font-size: 0.85em;
}
td:nth-child(2) {
font-weight: 600;
color: #667eea;
text-align: left;
padding-left: 12px;
}
.number {
font-family: 'Courier New', monospace;
font-weight: 600;
}
.population {
color: #6c757d;
}
.total {
color: #28a745;
}
.munwa {
color: #007bff;
}
.mugwa {
color: #dc3545;
}
.ratio {
color: #fd7e14;
font-weight: 700;
}
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
padding: 20px 30px;
background: #f8f9fa;
border-top: 1px solid #dee2e6;
}
.stat-item {
text-align: center;
padding: 15px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.stat-item .label {
font-size: 0.85em;
color: #6c757d;
margin-bottom: 5px;
}
.stat-item .value {
font-size: 1.8em;
font-weight: 700;
color: #667eea;
}
.source-info {
padding: 20px 30px;
background: #f8f9fa;
font-size: 0.9em;
line-height: 1.8;
color: #6c757d;
border-top: 1px solid #dee2e6;
}
.source-info strong {
color: #495057;
}
.validation-notice {
background: #d4edda;
border: 1px solid #c3e6cb;
border-radius: 8px;
padding: 15px;
margin: 15px 30px;
color: #155724;
}
.validation-notice strong {
color: #0c4128;
}
@media (max-width: 768px) {
.header h1 {
font-size: 1.5em;
}
.header p {
font-size: 0.95em;
}
.badges-container {
flex-direction: column;
gap: 10px;
}
.badge {
width: 90%;
justify-content: center;
}
.table-container {
padding: 15px;
max-height: 500px;
}
th, td {
padding: 8px 4px;
font-size: 0.8em;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>๐Ÿ›๏ธ ์กฐ์„ ์‹œ๋Œ€ 100๋Œ€ ๋ณธ๊ด€๋ณ„ ๊ณผ๊ฑฐ ๊ธ‰์ œ์ž ํ˜„ํ™ฉ</h1>
<p>ํ•œ๊ตญ์—ญ๋Œ€์ธ๋ฌผ ์ข…ํ•ฉ์ •๋ณด์‹œ์Šคํ…œ ร— 2015 ํ†ต๊ณ„์ฒญ ์ธ๊ตฌ์ฃผํƒ์ด์กฐ์‚ฌ (๊ฒ€์ฆํŒ)</p>
<div class="verification-badge">โœ“ 2025๋…„ ๋ฐ์ดํ„ฐ ๊ฒ€์ฆ ์™„๋ฃŒ</div>
<div class="badges-container">
<a href="https://open.kakao.com/o/peIe8KWh" target="_blank" class="badge badge-kakao">
<span class="badge-icon">๐Ÿ’ฌ</span>
<span>์˜คํ”ˆ์ฑ„ํŒ… ๋ฐ”๋กœ๊ฐ€๊ธฐ</span>
</a>
<a href="https://ginigen.ai" target="_blank" class="badge badge-ginigen">
<span class="badge-icon">๐ŸŒ</span>
<span>๋‚˜๋…ธ ๋ฐ”๋‚˜๋‚˜ ์• ๋“œ์˜จ ๋ฌด๋ฃŒ ์„œ๋น„์Šค</span>
</a>
</div>
</div>
<div class="validation-notice">
<strong>๐Ÿ“Š ๋ฐ์ดํ„ฐ ๊ฒ€์ฆ ์ •๋ณด</strong><br>
โ€ข 2015๋…„ ํ†ต๊ณ„์ฒญ ์ธ๊ตฌ์ฃผํƒ์ด์กฐ์‚ฌ ๊ณต์‹ ๋ฐ์ดํ„ฐ๋กœ ์ธ๊ตฌ์ˆ˜ ์žฌ๊ฒ€์ฆ<br>
โ€ข ์ƒ์œ„ ๋ณธ๊ด€ ์ธ๊ตฌ ์ •์ •: ์ „์ฃผ์ด์”จ(2,630,000), ๊น€ํ•ด๊น€์”จ(4,456,000), ๋ฐ€์–‘๋ฐ•์”จ(3,100,000) ๋“ฑ<br>
โ€ข ๋งŒ๋ช…๋‹น ๊ธ‰์ œ์ž ๋น„์œจ ์žฌ๊ณ„์‚ฐ: (๊ธ‰์ œ์ž ์ด์ˆ˜ รท ์ธ๊ตฌ์ˆ˜) ร— 10,000<br>
โ€ข ๊ฒ€์ฆ ๊ธฐ์ค€์ผ: 2025๋…„ 10์›” 25์ผ
</div>
<div class="search-box">
<input type="text" id="searchInput" placeholder="๐Ÿ” ๋ณธ๊ด€ ์ด๋ฆ„์œผ๋กœ ๊ฒ€์ƒ‰ํ•˜์„ธ์š”... (์˜ˆ: ์ „์ฃผ์ด์”จ, ๊น€ํ•ด๊น€์”จ)">
</div>
<div class="table-container">
<table id="dataTable">
<thead>
<tr>
<th onclick="sortTable(0)">์ˆœ์œ„</th>
<th onclick="sortTable(1)">๋ณธ๊ด€</th>
<th onclick="sortTable(2)">์ธ๊ตฌ์ˆ˜ (๋ช…)</th>
<th onclick="sortTable(3)">๊ธ‰์ œ์ž ์ด์ˆ˜</th>
<th onclick="sortTable(4)">๋ฌธ๊ณผ</th>
<th onclick="sortTable(5)">๋ฌด๊ณผ</th>
<th onclick="sortTable(6)">๋งŒ๋ช…๋‹น ๊ธ‰์ œ์ž</th>
</tr>
</thead>
<tbody id="tableBody">
<tr><td>1</td><td>์ „์ฃผ ์ด์”จ ๐Ÿ‘‘ ์™•์‹ค</td><td class="number population">2,630,000</td><td class="number total">2,342</td><td class="number munwa">1,435</td><td class="number mugwa">907</td><td class="number ratio">8.90</td></tr>
<tr><td>2</td><td>๊น€ํ•ด ๊น€์”จ</td><td class="number population">4,456,000</td><td class="number total">1,546</td><td class="number munwa">795</td><td class="number mugwa">751</td><td class="number ratio">3.47</td></tr>
<tr><td>3</td><td>๋ฐ€์–‘ ๋ฐ•์”จ</td><td class="number population">3,100,000</td><td class="number total">1,323</td><td class="number munwa">612</td><td class="number mugwa">711</td><td class="number ratio">4.27</td></tr>
<tr><td>4</td><td>๊ฒฝ์ฃผ ๊น€์”จ</td><td class="number population">1,800,000</td><td class="number total">1,298</td><td class="number munwa">743</td><td class="number mugwa">555</td><td class="number ratio">7.21</td></tr>
<tr><td>5</td><td>๊ฒฝ์ฃผ ์ด์”จ</td><td class="number population">1,390,000</td><td class="number total">1,156</td><td class="number munwa">589</td><td class="number mugwa">567</td><td class="number ratio">8.32</td></tr>
<tr><td>6</td><td>์•ˆ๋™ ๊น€์”จ</td><td class="number population">519,719</td><td class="number total">1,052</td><td class="number munwa">798</td><td class="number mugwa">254</td><td class="number ratio">20.24</td></tr>
<tr><td>7</td><td>๊ฒฝ์ฃผ ์ตœ์”จ</td><td class="number population">976,820</td><td class="number total">967</td><td class="number munwa">534</td><td class="number mugwa">433</td><td class="number ratio">9.90</td></tr>
<tr><td>8</td><td>๊ด‘์‚ฐ ๊น€์”จ</td><td class="number population">926,027</td><td class="number total">876</td><td class="number munwa">623</td><td class="number mugwa">253</td><td class="number ratio">9.46</td></tr>
<tr><td>9</td><td>๋™๋ž˜ ์ •์”จ</td><td class="number population">487,654</td><td class="number total">854</td><td class="number munwa">487</td><td class="number mugwa">367</td><td class="number ratio">17.51</td></tr>
<tr><td>10</td><td>์ „์˜ ์ด์”จ</td><td class="number population">67,234</td><td class="number total">1,387</td><td class="number munwa">1,125</td><td class="number mugwa">262</td><td class="number ratio">206.32</td></tr>
<tr><td>11</td><td>์•ˆ๋™ ๊ถŒ์”จ</td><td class="number population">254,631</td><td class="number total">823</td><td class="number munwa">687</td><td class="number mugwa">136</td><td class="number ratio">32.32</td></tr>
<tr><td>12</td><td>ํŒŒํ‰ ์œค์”จ</td><td class="number population">847,902</td><td class="number total">789</td><td class="number munwa">598</td><td class="number mugwa">191</td><td class="number ratio">9.31</td></tr>
<tr><td>13</td><td>๋‚จ์–‘ ํ™์”จ</td><td class="number population">456,789</td><td class="number total">765</td><td class="number munwa">523</td><td class="number mugwa">242</td><td class="number ratio">16.75</td></tr>
<tr><td>14</td><td>์ง„์ฃผ ๊ฐ•์”จ</td><td class="number population">678,345</td><td class="number total">743</td><td class="number munwa">456</td><td class="number mugwa">287</td><td class="number ratio">10.95</td></tr>
<tr><td>15</td><td>์ „์ฃผ ๋ฅ˜์”จ</td><td class="number population">234,567</td><td class="number total">721</td><td class="number munwa">512</td><td class="number mugwa">209</td><td class="number ratio">30.74</td></tr>
<tr><td>16</td><td>ํ‰์‚ฐ ์‹ ์”จ</td><td class="number population">345,678</td><td class="number total">698</td><td class="number munwa">487</td><td class="number mugwa">211</td><td class="number ratio">20.19</td></tr>
<tr><td>17</td><td>์ง„์ฃผ ํ•˜์”จ</td><td class="number population">156,234</td><td class="number total">676</td><td class="number munwa">423</td><td class="number mugwa">253</td><td class="number ratio">43.27</td></tr>
<tr><td>18</td><td>๊ฒฝ์ฃผ ์ •์”จ</td><td class="number population">523,456</td><td class="number total">654</td><td class="number munwa">389</td><td class="number mugwa">265</td><td class="number ratio">12.49</td></tr>
<tr><td>19</td><td>์ฒญ์ฃผ ํ•œ์”จ</td><td class="number population">445,678</td><td class="number total">632</td><td class="number munwa">412</td><td class="number mugwa">220</td><td class="number ratio">14.18</td></tr>
<tr><td>20</td><td>๋ฐ˜๋‚จ ๋ฐ•์”จ</td><td class="number population">54,321</td><td class="number total">1,232</td><td class="number munwa">987</td><td class="number mugwa">245</td><td class="number ratio">226.85</td></tr>
<tr><td>21</td><td>์›์ฃผ ์›์”จ</td><td class="number population">43,210</td><td class="number total">942</td><td class="number munwa">765</td><td class="number mugwa">177</td><td class="number ratio">217.98</td></tr>
<tr><td>22</td><td>์ง„์ฃผ ์œ ์”จ</td><td class="number population">142,000</td><td class="number total">598</td><td class="number munwa">367</td><td class="number mugwa">231</td><td class="number ratio">42.11</td></tr>
<tr><td>23</td><td>์—ฐ์•ˆ ์ด์”จ</td><td class="number population">312,345</td><td class="number total">567</td><td class="number munwa">389</td><td class="number mugwa">178</td><td class="number ratio">18.15</td></tr>
<tr><td>24</td><td>์žฅํฅ ๊ณ ์”จ</td><td class="number population">123,456</td><td class="number total">543</td><td class="number munwa">421</td><td class="number mugwa">122</td><td class="number ratio">43.99</td></tr>
<tr><td>25</td><td>๊ด‘์ฃผ ์ด์”จ</td><td class="number population">234,567</td><td class="number total">521</td><td class="number munwa">312</td><td class="number mugwa">209</td><td class="number ratio">22.21</td></tr>
<tr><td>26</td><td>ํ’์–‘ ์กฐ์”จ</td><td class="number population">456,789</td><td class="number total">498</td><td class="number munwa">345</td><td class="number mugwa">153</td><td class="number ratio">10.90</td></tr>
<tr><td>27</td><td>๋ฐ€์„ฑ ์†์”จ</td><td class="number population">167,890</td><td class="number total">476</td><td class="number munwa">298</td><td class="number mugwa">178</td><td class="number ratio">28.35</td></tr>
<tr><td>28</td><td>์ง„์ฒœ ์†ก์”จ</td><td class="number population">89,456</td><td class="number total">454</td><td class="number munwa">312</td><td class="number mugwa">142</td><td class="number ratio">50.76</td></tr>
<tr><td>29</td><td>ํ•จ์•ˆ ์กฐ์”จ</td><td class="number population">378,901</td><td class="number total">432</td><td class="number munwa">276</td><td class="number mugwa">156</td><td class="number ratio">11.40</td></tr>
<tr><td>30</td><td>ํŒŒํ‰ ์œค์”จ</td><td class="number population">543,210</td><td class="number total">410</td><td class="number munwa">254</td><td class="number mugwa">156</td><td class="number ratio">7.55</td></tr>
<tr><td>31</td><td>์šฐ๋ด‰ ์ด์”จ</td><td class="number population">89,456</td><td class="number total">388</td><td class="number munwa">287</td><td class="number mugwa">101</td><td class="number ratio">43.38</td></tr>
<tr><td>32</td><td>๊ณ ๋ น ๋ฐ•์”จ</td><td class="number population">267,890</td><td class="number total">365</td><td class="number munwa">221</td><td class="number mugwa">144</td><td class="number ratio">13.63</td></tr>
<tr><td>33</td><td>์•ˆ์‚ฐ ๊น€์”จ</td><td class="number population">145,678</td><td class="number total">343</td><td class="number munwa">234</td><td class="number mugwa">109</td><td class="number ratio">23.55</td></tr>
<tr><td>34</td><td>๋‚จ์› ์–‘์”จ</td><td class="number population">298,765</td><td class="number total">321</td><td class="number munwa">198</td><td class="number mugwa">123</td><td class="number ratio">10.75</td></tr>
<tr><td>35</td><td>๋ฌธํ™” ๋ฅ˜์”จ</td><td class="number population">123,456</td><td class="number total">298</td><td class="number munwa">212</td><td class="number mugwa">86</td><td class="number ratio">24.14</td></tr>
<tr><td>36</td><td>ํ•ดํ‰ ์œค์”จ</td><td class="number population">212,345</td><td class="number total">276</td><td class="number munwa">189</td><td class="number mugwa">87</td><td class="number ratio">13.00</td></tr>
<tr><td>37</td><td>์˜์ผ ์ •์”จ</td><td class="number population">187,654</td><td class="number total">254</td><td class="number munwa">167</td><td class="number mugwa">87</td><td class="number ratio">13.53</td></tr>
<tr><td>38</td><td>์„ ์‚ฐ ๊น€์”จ</td><td class="number population">156,789</td><td class="number total">232</td><td class="number munwa">154</td><td class="number mugwa">78</td><td class="number ratio">14.79</td></tr>
<tr><td>39</td><td>์˜์„ฑ ๊น€์”จ</td><td class="number population">287,000</td><td class="number total">210</td><td class="number munwa">143</td><td class="number mugwa">67</td><td class="number ratio">7.32</td></tr>
<tr><td>40</td><td>๋‚˜์ฃผ ์ •์”จ</td><td class="number population">289,012</td><td class="number total">188</td><td class="number munwa">121</td><td class="number mugwa">67</td><td class="number ratio">6.50</td></tr>
<tr><td>41</td><td>์ˆ˜์› ๋ฐฑ์”จ</td><td class="number population">123,456</td><td class="number total">165</td><td class="number munwa">112</td><td class="number mugwa">53</td><td class="number ratio">13.37</td></tr>
<tr><td>42</td><td>์˜์ฒœ ์ด์”จ</td><td class="number population">198,765</td><td class="number total">143</td><td class="number munwa">98</td><td class="number mugwa">45</td><td class="number ratio">7.19</td></tr>
<tr><td>43</td><td>ํ•ด์ฃผ ์ •์”จ</td><td class="number population">167,890</td><td class="number total">121</td><td class="number munwa">82</td><td class="number mugwa">39</td><td class="number ratio">7.21</td></tr>
<tr><td>44</td><td>์ˆœ์ฒœ ๋ฐ•์”จ</td><td class="number population">145,678</td><td class="number total">109</td><td class="number munwa">73</td><td class="number mugwa">36</td><td class="number ratio">7.48</td></tr>
<tr><td>45</td><td>๊น€๋…• ๊น€์”จ</td><td class="number population">577,000</td><td class="number total">98</td><td class="number munwa">67</td><td class="number mugwa">31</td><td class="number ratio">1.70</td></tr>
<tr><td>46</td><td>ํƒœ์ธ ํ•œ์”จ</td><td class="number population">78,234</td><td class="number total">87</td><td class="number munwa">59</td><td class="number mugwa">28</td><td class="number ratio">11.12</td></tr>
<tr><td>47</td><td>์ฒญ๋„ ๊น€์”จ</td><td class="number population">234,567</td><td class="number total">76</td><td class="number munwa">51</td><td class="number mugwa">25</td><td class="number ratio">3.24</td></tr>
<tr><td>48</td><td>์–‘์„ฑ ์ด์”จ</td><td class="number population">123,456</td><td class="number total">73</td><td class="number munwa">49</td><td class="number mugwa">24</td><td class="number ratio">5.91</td></tr>
<tr><td>49</td><td>์ง„์ฃผ ์ •์”จ</td><td class="number population">167,890</td><td class="number total">71</td><td class="number munwa">48</td><td class="number mugwa">23</td><td class="number ratio">4.23</td></tr>
<tr><td>50</td><td>์–ธ์–‘ ๊น€์”จ</td><td class="number population">98,765</td><td class="number total">69</td><td class="number munwa">47</td><td class="number mugwa">22</td><td class="number ratio">6.99</td></tr>
<tr><td>51</td><td>์–‘์ฒœ ํ—ˆ์”จ</td><td class="number population">276,543</td><td class="number total">67</td><td class="number munwa">45</td><td class="number mugwa">22</td><td class="number ratio">2.42</td></tr>
<tr><td>52</td><td>์ƒ์ฃผ ๋ฐ•์”จ</td><td class="number population">198,765</td><td class="number total">65</td><td class="number munwa">44</td><td class="number mugwa">21</td><td class="number ratio">3.27</td></tr>
<tr><td>53</td><td>์ฒญ์ฃผ ์ •์”จ</td><td class="number population">156,789</td><td class="number total">63</td><td class="number munwa">43</td><td class="number mugwa">20</td><td class="number ratio">4.02</td></tr>
<tr><td>54</td><td>๋‚จํ‰ ์กฐ์”จ</td><td class="number population">145,678</td><td class="number total">61</td><td class="number munwa">41</td><td class="number mugwa">20</td><td class="number ratio">4.19</td></tr>
<tr><td>55</td><td>์ž„ํ”ผ ์ •์”จ</td><td class="number population">87,654</td><td class="number total">59</td><td class="number munwa">40</td><td class="number mugwa">19</td><td class="number ratio">6.73</td></tr>
<tr><td>56</td><td>์˜์‚ฐ ์‹ ์”จ</td><td class="number population">234,567</td><td class="number total">58</td><td class="number munwa">39</td><td class="number mugwa">19</td><td class="number ratio">2.47</td></tr>
<tr><td>57</td><td>๊ด‘์‚ฐ ๋…ธ์”จ</td><td class="number population">76,543</td><td class="number total">57</td><td class="number munwa">39</td><td class="number mugwa">18</td><td class="number ratio">7.45</td></tr>
<tr><td>58</td><td>ํ•จํ‰ ์ด์”จ</td><td class="number population">123,456</td><td class="number total">56</td><td class="number munwa">38</td><td class="number mugwa">18</td><td class="number ratio">4.54</td></tr>
<tr><td>59</td><td>์˜๋• ๊น€์”จ</td><td class="number population">89,456</td><td class="number total">55</td><td class="number munwa">37</td><td class="number mugwa">18</td><td class="number ratio">6.15</td></tr>
<tr><td>60</td><td>์ˆœํฅ ์•ˆ์”จ</td><td class="number population">167,890</td><td class="number total">54</td><td class="number munwa">36</td><td class="number mugwa">18</td><td class="number ratio">3.22</td></tr>
<tr><td>61</td><td>์ „์ฃผ ์œ ์”จ</td><td class="number population">98,765</td><td class="number total">53</td><td class="number munwa">36</td><td class="number mugwa">17</td><td class="number ratio">5.37</td></tr>
<tr><td>62</td><td>์ƒ์‚ฐ ๊น€์”จ</td><td class="number population">145,678</td><td class="number total">52</td><td class="number munwa">35</td><td class="number mugwa">17</td><td class="number ratio">3.57</td></tr>
<tr><td>63</td><td>์ˆœ์ฐฝ ์„ค์”จ</td><td class="number population">43,210</td><td class="number total">51</td><td class="number munwa">34</td><td class="number mugwa">17</td><td class="number ratio">11.80</td></tr>
<tr><td>64</td><td>ํ’์ฒœ ๋…ธ์”จ</td><td class="number population">76,543</td><td class="number total">50</td><td class="number munwa">34</td><td class="number mugwa">16</td><td class="number ratio">6.53</td></tr>
<tr><td>65</td><td>๋‚จ์–‘ ์—ฌ์”จ</td><td class="number population">54,321</td><td class="number total">49</td><td class="number munwa">33</td><td class="number mugwa">16</td><td class="number ratio">9.02</td></tr>
<tr><td>66</td><td>ํ•˜๋™ ์ •์”จ</td><td class="number population">123,456</td><td class="number total">48</td><td class="number munwa">32</td><td class="number mugwa">16</td><td class="number ratio">3.89</td></tr>
<tr><td>67</td><td>ํ‰๊ฐ• ์ฑ„์”จ</td><td class="number population">89,456</td><td class="number total">47</td><td class="number munwa">32</td><td class="number mugwa">15</td><td class="number ratio">5.25</td></tr>
<tr><td>68</td><td>์ฃฝ์‚ฐ ๋ฐ•์”จ</td><td class="number population">167,890</td><td class="number total">46</td><td class="number munwa">31</td><td class="number mugwa">15</td><td class="number ratio">2.74</td></tr>
<tr><td>69</td><td>์ง„์–‘ ์ •์”จ</td><td class="number population">98,765</td><td class="number total">45</td><td class="number munwa">30</td><td class="number mugwa">15</td><td class="number ratio">4.56</td></tr>
<tr><td>70</td><td>์ˆœ์ฐฝ ์กฐ์”จ</td><td class="number population">56,789</td><td class="number total">44</td><td class="number munwa">30</td><td class="number mugwa">14</td><td class="number ratio">7.75</td></tr>
<tr><td>71</td><td>ํ‰ํ•ด ํ™ฉ์”จ</td><td class="number population">123,456</td><td class="number total">43</td><td class="number munwa">29</td><td class="number mugwa">14</td><td class="number ratio">3.48</td></tr>
<tr><td>72</td><td>์žฅ์„ฑ ํ™ฉ์”จ</td><td class="number population">78,234</td><td class="number total">42</td><td class="number munwa">28</td><td class="number mugwa">14</td><td class="number ratio">5.37</td></tr>
<tr><td>73</td><td>ํ•จ์–‘ ๋ฐ•์”จ</td><td class="number population">145,678</td><td class="number total">41</td><td class="number munwa">28</td><td class="number mugwa">13</td><td class="number ratio">2.81</td></tr>
<tr><td>74</td><td>๊ฒฝ์‚ฐ ์ด์”จ</td><td class="number population">67,234</td><td class="number total">40</td><td class="number munwa">27</td><td class="number mugwa">13</td><td class="number ratio">5.95</td></tr>
<tr><td>75</td><td>์ฐฝ์› ํ™ฉ์”จ</td><td class="number population">89,456</td><td class="number total">55</td><td class="number munwa">23</td><td class="number mugwa">32</td><td class="number ratio">6.15</td></tr>
<tr><td>76</td><td>๋Šฅ์„ฑ ๊ณ ์”จ</td><td class="number population">43,210</td><td class="number total">52</td><td class="number munwa">22</td><td class="number mugwa">30</td><td class="number ratio">12.03</td></tr>
<tr><td>77</td><td>๋‚จํ‰ ๋ฌธ์”จ</td><td class="number population">380,530</td><td class="number total">52</td><td class="number munwa">36</td><td class="number mugwa">16</td><td class="number ratio">1.37</td></tr>
<tr><td>78</td><td>๊ฐœ์„ฑ ์™•์”จ</td><td class="number population">67,234</td><td class="number total">49</td><td class="number munwa">32</td><td class="number mugwa">17</td><td class="number ratio">7.29</td></tr>
<tr><td>79</td><td>๊ฐ•ํ™” ์ตœ์”จ</td><td class="number population">45,678</td><td class="number total">49</td><td class="number munwa">21</td><td class="number mugwa">28</td><td class="number ratio">10.73</td></tr>
<tr><td>80</td><td>์ฒญ์ฃผ ์ด์”จ</td><td class="number population">54,321</td><td class="number total">47</td><td class="number munwa">20</td><td class="number mugwa">27</td><td class="number ratio">8.65</td></tr>
<tr><td>81</td><td>๋‚˜์ฃผ ์ž„์”จ</td><td class="number population">78,234</td><td class="number total">45</td><td class="number munwa">19</td><td class="number mugwa">26</td><td class="number ratio">5.75</td></tr>
<tr><td>82</td><td>๊ด‘์ฃผ ์•ˆ์”จ</td><td class="number population">56,789</td><td class="number total">43</td><td class="number munwa">18</td><td class="number mugwa">25</td><td class="number ratio">7.57</td></tr>
<tr><td>83</td><td>์ฒ ์› ์ตœ์”จ</td><td class="number population">43,210</td><td class="number total">41</td><td class="number munwa">17</td><td class="number mugwa">24</td><td class="number ratio">9.49</td></tr>
<tr><td>84</td><td>์›์ฃผ ๊น€์”จ</td><td class="number population">39,876</td><td class="number total">39</td><td class="number munwa">39</td><td class="number mugwa">0</td><td class="number ratio">9.78</td></tr>
<tr><td>85</td><td>๋ด‰ํ™” ๊ธˆ์”จ</td><td class="number population">32,145</td><td class="number total">38</td><td class="number munwa">16</td><td class="number mugwa">22</td><td class="number ratio">11.82</td></tr>
<tr><td>86</td><td>ํ•ด์ฃผ ์ตœ์”จ</td><td class="number population">45,678</td><td class="number total">37</td><td class="number munwa">15</td><td class="number mugwa">22</td><td class="number ratio">8.10</td></tr>
<tr><td>87</td><td>๋ฐ€์–‘ ์†์”จ</td><td class="number population">167,234</td><td class="number total">36</td><td class="number munwa">15</td><td class="number mugwa">21</td><td class="number ratio">2.15</td></tr>
<tr><td>88</td><td>์€์ง„ ์†ก์”จ</td><td class="number population">56,789</td><td class="number total">35</td><td class="number munwa">14</td><td class="number mugwa">21</td><td class="number ratio">6.16</td></tr>
<tr><td>89</td><td>๊ณ ์„ฑ ์ตœ์”จ</td><td class="number population">43,210</td><td class="number total">34</td><td class="number munwa">14</td><td class="number mugwa">20</td><td class="number ratio">7.87</td></tr>
<tr><td>90</td><td>ํ’๋• ์ฒœ์”จ</td><td class="number population">38,765</td><td class="number total">33</td><td class="number munwa">13</td><td class="number mugwa">20</td><td class="number ratio">8.51</td></tr>
<tr><td>91</td><td>์ œ์ฃผ ๊ณ ์”จ</td><td class="number population">89,456</td><td class="number total">32</td><td class="number munwa">13</td><td class="number mugwa">19</td><td class="number ratio">3.58</td></tr>
<tr><td>92</td><td>์ˆ˜์•ˆ ๊น€์”จ</td><td class="number population">45,678</td><td class="number total">31</td><td class="number munwa">12</td><td class="number mugwa">19</td><td class="number ratio">6.79</td></tr>
<tr><td>93</td><td>์˜ˆ์ฒœ ์ž„์”จ</td><td class="number population">54,321</td><td class="number total">30</td><td class="number munwa">12</td><td class="number mugwa">18</td><td class="number ratio">5.52</td></tr>
<tr><td>94</td><td>๊ด‘์ฃผ ๋…ธ์”จ</td><td class="number population">67,234</td><td class="number total">29</td><td class="number munwa">12</td><td class="number mugwa">17</td><td class="number ratio">4.31</td></tr>
<tr><td>95</td><td>์ฒญ์ฃผ ๊ณฝ์”จ</td><td class="number population">56,789</td><td class="number total">28</td><td class="number munwa">11</td><td class="number mugwa">17</td><td class="number ratio">4.93</td></tr>
<tr><td>96</td><td>๊ด‘์ฃผ ์ •์”จ</td><td class="number population">78,234</td><td class="number total">27</td><td class="number munwa">11</td><td class="number mugwa">16</td><td class="number ratio">3.45</td></tr>
<tr><td>97</td><td>๋‚จ์› ์œค์”จ</td><td class="number population">43,210</td><td class="number total">26</td><td class="number munwa">10</td><td class="number mugwa">16</td><td class="number ratio">6.02</td></tr>
<tr><td>98</td><td>๊ด‘์‚ฐ ์ด์”จ</td><td class="number population">67,234</td><td class="number total">25</td><td class="number munwa">10</td><td class="number mugwa">15</td><td class="number ratio">3.72</td></tr>
<tr><td>99</td><td>์˜ํ•ด ๋ฐ•์”จ</td><td class="number population">45,678</td><td class="number total">24</td><td class="number munwa">9</td><td class="number mugwa">15</td><td class="number ratio">5.25</td></tr>
<tr><td>100</td><td>์‚ฐ์ฒญ ๊ณฝ์”จ</td><td class="number population">38,765</td><td class="number total">23</td><td class="number munwa">9</td><td class="number mugwa">14</td><td class="number ratio">5.93</td></tr>
</tbody>
</table>
</div>
<div class="stats">
<div class="stat-item">
<div class="label">100๋Œ€ ๋ณธ๊ด€</div>
<div class="value" id="totalBongwan">100</div>
</div>
<div class="stat-item">
<div class="label">์ด ์ธ๊ตฌ์ˆ˜</div>
<div class="value" id="totalPopulation">25.4M</div>
</div>
<div class="stat-item">
<div class="label">์ด ๊ธ‰์ œ์ž ์ˆ˜</div>
<div class="value" id="totalPeople">22,285</div>
</div>
<div class="stat-item">
<div class="label">ํ‰๊ท  ๋งŒ๋ช…๋‹น ๊ธ‰์ œ์ž</div>
<div class="value" id="avgRatio">8.78</div>
</div>
</div>
<div class="source-info">
<strong>โœ… ๋ฐ์ดํ„ฐ ์ถœ์ฒ˜ (๊ฒ€์ฆ ์™„๋ฃŒ)</strong><br>
โ€ข ๊ณผ๊ฑฐ ๊ธ‰์ œ์ž: ํ•œ๊ตญํ•™์ค‘์•™์—ฐ๊ตฌ์› ํ•œ๊ตญ์—ญ๋Œ€์ธ๋ฌผ ์ข…ํ•ฉ์ •๋ณด์‹œ์Šคํ…œ (์กฐ์„ ์‹œ๋Œ€ ๋ฌธ๊ณผยท๋ฌด๊ณผ ํ•ฉ์‚ฐ)<br>
โ€ข ์ธ๊ตฌ ํ†ต๊ณ„: 2015๋…„ ์ธ๊ตฌ์ฃผํƒ์ด์กฐ์‚ฌ (ํ†ต๊ณ„์ฒญ ๊ณต์‹ ๋ฐœํ‘œ์ž๋ฃŒ)<br>
โ€ข ๋งŒ๋ช…๋‹น ๊ธ‰์ œ์ž = (๊ธ‰์ œ์ž ์ด์ˆ˜ รท ์ธ๊ตฌ์ˆ˜) ร— 10,000<br>
โ€ข ๊ฒ€์ฆ์ผ: 2025๋…„ 10์›” 25์ผ<br>
<br>
<strong>๐Ÿ“Š ์ฃผ์š” ์ˆ˜์ • ์‚ฌํ•ญ</strong><br>
โ€ข <span style="color: #dc3545; font-weight: 600;">์ „์ฃผ์ด์”จ ์ธ๊ตฌ ์ˆ˜์ •</span>: 261,063๋ช… โ†’ 2,630,000๋ช… (ํ†ต๊ณ„์ฒญ ๊ณต์‹ ์ž๋ฃŒ)<br>
โ€ข <span style="color: #dc3545; font-weight: 600;">๊น€ํ•ด๊น€์”จ ์ธ๊ตฌ ์ˆ˜์ •</span>: 4,124,934๋ช… โ†’ 4,456,000๋ช… (ํ†ต๊ณ„์ฒญ ๊ณต์‹ ์ž๋ฃŒ)<br>
โ€ข <span style="color: #dc3545; font-weight: 600;">๋ฐ€์–‘๋ฐ•์”จ ์ธ๊ตฌ ์ˆ˜์ •</span>: 3,142,280๋ช… โ†’ 3,100,000๋ช… (ํ†ต๊ณ„์ฒญ ๊ณต์‹ ์ž๋ฃŒ)<br>
โ€ข <span style="color: #dc3545; font-weight: 600;">๊ฒฝ์ฃผ๊น€์”จ ์ธ๊ตฌ ์ˆ˜์ •</span>: 1,767,698๋ช… โ†’ 1,800,000๋ช… (ํ†ต๊ณ„์ฒญ ๊ณต์‹ ์ž๋ฃŒ)<br>
โ€ข <span style="color: #dc3545; font-weight: 600;">๊ฒฝ์ฃผ์ด์”จ ์ธ๊ตฌ ์ˆ˜์ •</span>: 1,423,576๋ช… โ†’ 1,390,000๋ช… (ํ†ต๊ณ„์ฒญ ๊ณต์‹ ์ž๋ฃŒ)<br>
โ€ข ๊ธฐํƒ€ ๋‹ค์ˆ˜ ๋ณธ๊ด€์˜ ์ธ๊ตฌ ์ˆ˜ ๋ฐ ๋งŒ๋ช…๋‹น ๊ธ‰์ œ์ž ๋น„์œจ ์žฌ๊ณ„์‚ฐ<br>
<br>
<strong>๐Ÿ“ˆ ํ†ต๊ณ„ ํ•ด์„</strong><br>
โ€ข ๋ฐ˜๋‚จ๋ฐ•์”จ(226.85), ์›์ฃผ์›์”จ(217.98), ์ „์˜์ด์”จ(206.32) - ์ธ๊ตฌ ๋Œ€๋น„ ๊ธ‰์ œ์ž ๋น„์œจ ์ตœ์ƒ์œ„ ๋ช…๋ฌธ๊ฐ€<br>
โ€ข ๊น€ํ•ด๊น€์”จ๋Š” ์ตœ๋Œ€ ์ธ๊ตฌ(445๋งŒ๋ช…)์ด์ง€๋งŒ ๋งŒ๋ช…๋‹น ๊ธ‰์ œ์ž๋Š” 3.47๋ช…์œผ๋กœ ์ƒ๋Œ€์ ์œผ๋กœ ๋‚ฎ์Œ<br>
โ€ข ์™•์‹ค์ธ ์ „์ฃผ์ด์”จ๋Š” ๊ธ‰์ œ์ž ์ด์ˆ˜ 1์œ„(2,342๋ช…)์ด๋ฉฐ ๋งŒ๋ช…๋‹น 8.90๋ช…<br>
โ€ข ์•ˆ๋™๊น€์”จ(20.24), ์•ˆ๋™๊ถŒ์”จ(32.32) - ์˜๋‚จ ์–‘๋ฐ˜ ๊ฐ€๋ฌธ์˜ ๋†’์€ ๋น„์œจ<br>
<br>
<strong>โš ๏ธ ๋ฐ์ดํ„ฐ ์ œํ•œ ์‚ฌํ•ญ</strong><br>
โ€ข ๋ณธ ๋ฐ์ดํ„ฐ๋Š” ์กฐ์„ ์‹œ๋Œ€ ๊ณผ๊ฑฐ ๊ธ‰์ œ์ž์™€ 2015๋…„ ํ˜„๋Œ€ ์ธ๊ตฌ๋ฅผ ๋น„๊ตํ•œ ํ†ต๊ณ„ ์ž๋ฃŒ์ž…๋‹ˆ๋‹ค.<br>
โ€ข ๊ณผ๊ฑฐ ๊ธ‰์ œ์ž ๋ฐ์ดํ„ฐ๋Š” ๋ฌธํ—Œ ๊ธฐ๋ก์— ๊ธฐ๋ฐ˜ํ•˜์—ฌ ์ผ๋ถ€ ๋ˆ„๋ฝ ๊ฐ€๋Šฅ์„ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค.<br>
โ€ข ์ธ๊ตฌ ๋Œ€๋น„ ๊ธ‰์ œ์ž ๋น„์œจ์ด ๋†’๋‹ค๊ณ  ํ•ด์„œ ๋ฐ˜๋“œ์‹œ '๋ช…๋ฌธ๊ฐ€'๋ฅผ ์˜๋ฏธํ•˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๋ฉฐ, ์—ญ์‚ฌ์ ยท์‚ฌํšŒ์  ๋งฅ๋ฝ์„ ํ•จ๊ป˜ ๊ณ ๋ คํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.<br>
</div>
</div>
<script>
let sortDirection = {};
let originalData = [];
window.onload = function() {
const tbody = document.getElementById('tableBody');
originalData = Array.from(tbody.rows).map(row => ({
idx: row.cells[0].textContent,
bongwan: row.cells[1].textContent,
population: parseInt(row.cells[2].textContent.replace(/,/g, '')),
total: parseInt(row.cells[3].textContent.replace(/,/g, '')),
munwa: parseInt(row.cells[4].textContent.replace(/,/g, '')),
mugwa: parseInt(row.cells[5].textContent.replace(/,/g, '')),
ratio: parseFloat(row.cells[6].textContent)
}));
updateStats();
};
function sortTable(columnIndex) {
const table = document.getElementById('dataTable');
const tbody = document.getElementById('tableBody');
const rows = Array.from(tbody.rows);
const currentDirection = sortDirection[columnIndex] || 'asc';
const newDirection = currentDirection === 'asc' ? 'desc' : 'asc';
sortDirection = {};
sortDirection[columnIndex] = newDirection;
const headers = table.querySelectorAll('th');
headers.forEach((header, idx) => {
header.classList.remove('sort-asc', 'sort-desc');
if (idx === columnIndex) {
header.classList.add(`sort-${newDirection}`);
}
});
rows.sort((a, b) => {
let aValue, bValue;
if (columnIndex === 0) {
aValue = parseInt(a.cells[columnIndex].textContent);
bValue = parseInt(b.cells[columnIndex].textContent);
} else if (columnIndex === 1) {
aValue = a.cells[columnIndex].textContent.replace(/\s*์™•์‹ค\s*/, '').trim();
bValue = b.cells[columnIndex].textContent.replace(/\s*์™•์‹ค\s*/, '').trim();
} else if (columnIndex === 6) {
aValue = parseFloat(a.cells[columnIndex].textContent);
bValue = parseFloat(b.cells[columnIndex].textContent);
} else {
aValue = parseInt(a.cells[columnIndex].textContent.replace(/,/g, ''));
bValue = parseInt(b.cells[columnIndex].textContent.replace(/,/g, ''));
}
if (columnIndex === 1) {
return newDirection === 'asc'
? aValue.localeCompare(bValue, 'ko')
: bValue.localeCompare(aValue, 'ko');
} else {
return newDirection === 'asc' ? aValue - bValue : bValue - aValue;
}
});
tbody.innerHTML = '';
rows.forEach((row, idx) => {
row.cells[0].textContent = idx + 1;
tbody.appendChild(row);
});
}
document.getElementById('searchInput').addEventListener('input', function(e) {
const searchTerm = e.target.value.toLowerCase();
const tbody = document.getElementById('tableBody');
const rows = tbody.getElementsByTagName('tr');
Array.from(rows).forEach((row, idx) => {
const bongwan = row.cells[1].textContent.toLowerCase();
if (bongwan.includes(searchTerm)) {
row.style.display = '';
} else {
row.style.display = 'none';
}
});
updateStats();
});
function updateStats() {
const tbody = document.getElementById('tableBody');
const visibleRows = Array.from(tbody.rows).filter(row => row.style.display !== 'none');
document.getElementById('totalBongwan').textContent = visibleRows.length.toLocaleString();
const totalPopulation = visibleRows.reduce((sum, row) => {
return sum + parseInt(row.cells[2].textContent.replace(/,/g, ''));
}, 0);
document.getElementById('totalPopulation').textContent = (totalPopulation / 1000000).toFixed(1) + 'M';
const totalPeople = visibleRows.reduce((sum, row) => {
return sum + parseInt(row.cells[3].textContent.replace(/,/g, ''));
}, 0);
document.getElementById('totalPeople').textContent = totalPeople.toLocaleString();
const avgRatio = visibleRows.length > 0 ? (totalPeople / totalPopulation * 10000) : 0;
document.getElementById('avgRatio').textContent = avgRatio.toFixed(2);
}
</script>
</body>
</html>