Skip to content

Latest commit

 

History

History
140 lines (117 loc) · 4.02 KB

README.md

File metadata and controls

140 lines (117 loc) · 4.02 KB
Raw

koreamapfont

한국 지도 글꼴을 사용하면 간단한 HTML과 CSS만으로 한국 지도를 그릴 수 있습니다. 주요 행정구역별로 색을 다르게 할 수 있어서 인포그래프에 도움이 됩니다. 미국 주별 지도 Stately를 보고 따라 만들었습니다. 문자와 행정구역은 다음과 같이 대응했습니다.

남한강원도a 경기도b 경상남도c 경상북도d
광주광역시e 대구광역시f 대전광역시g 부산광역시h
서울특별시i 세종특별자치시j 울산관역시k 인천광역시l
전라남도m 전라북도n 제주특별자치도o 충청남도p
충청북도q
북한강원도r 남포특별시s 라선특별시t 량강도u
자강도v 평안남도w 평안북도x 평양직할시y
함경남도z 함경북도{ 황해남도| 황해북도}

사용 방법

글꼴과 CSS 파일을 다운로드받고, 적절한 위치에 압축을 풉니다. HTML header에 CSS 파일을 포함합니다. 글꼴 파일을 다른 위치로 이동했다면, CSS 파일 속 글꼴 경로를 수정합니다.

<link rel="stylesheet" href="assets/css/korea-map-font-v1.css">

지도를 그릴 곳에 아래와 같이 추가합니다. class는 행정구역별로 색을 지정하려고 넣었고, 필요하다면 값을 다르게 변경해도 됩니다.

<ul class="korea-map-font-v1">
  <li class="강원">a</li>
  <li class="경기">b</li>
  <li class="경남">c</li>
  <li class="경북">d</li>
  <li class="광주">e</li>
  <li class="대구">f</li>
  <li class="대전">g</li>
  <li class="부산">h</li>
  <li class="서울">i</li>
  <li class="세종">j</li>
  <li class="울산">k</li>
  <li class="인천">l</li>
  <li class="전남">m</li>
  <li class="전북">n</li>
  <li class="제주">o</li>
  <li class="충남">p</li>
  <li class="충북">q</li>
</ul>
<!-- 북한 지도
<ul class="korea-map-font-v1">
  <li class="북강원">r</li>
  <li class="남포시">s</li>
  <li class="라선시">t</li>
  <li class="량강도">u</li>
  <li class="자강도">v</li>
  <li class="평안남">w</li>
  <li class="평안북">x</li>
  <li class="평양시">y</li>
  <li class="함경남">z</li>
  <li class="함경북">{</li>
  <li class="황해남">|</li>
  <li class="황해북">}</li>
</ul>
-->

지도의 크기와 기본 색을 지시합니다. 여기서 width와 font-size는 동일한 값으로 설정합니다.

.korea-map-font-v1 {
  width: 300px;
  font-size: 300px;
  color: #f0f0f0;
}

행정구역별로 색을 다르게 합니다.

.경기, .경북 {
  color: #FF0000;
}

아래 예제와 같이 한 페이지에 지도가 여러개 나온다면, 지도마다 id를 부여하여 서로 다른 크기와 색을 보여줄 수 있습니다.

예제

http://maczniak.github.com/koreamapfont/

참고

TODO

  • 멀리 떨어진 섬들을 다르게 보여주는 버전
  • 다양한 크기에서 잘 보이도록 행정구역간 경계 다듬기

라이선스

Creative Commons Attribution-Share Alike 3.0 Unported.