koreamapfont

HTML과 CSS만으로 쉽게 한국 지도를 그려보자.

다운로드 프로젝트 문서

글꼴과 CSS 파일을 다운로드하고, HTML에 CSS 파일을 포함한다.

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

지도를 그릴 곳에 다음과 같이 추가한다.

<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>

마지막으로 지도의 크기와 기본 색을 지정하고, 필요하다면 행정구역마다 색을 입힌다.

.korea-map-font-v1 {
  width: 300px;
  font-size: 300px;
  color: #f0f0f0;
}
.경기, .경북 {
  color: #FF0000;
}
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h
  • i
  • j
  • k
  • l
  • m
  • n
  • o
  • p
  • q
  • 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
  • {
  • |
  • }