카카오맵 오픈API 기반 마스크맵 만들기 1단계

카카오맵 오픈API 기반 마스크맵 만들기   

카카오맵 기반으로 https://maskmap.site/ 에 등록된 마스크맵을 비슷하게 만들고자 하였다.

먼저 , bootstrap free 검색해서 사용할 테마를 선택한다.

landing Page 를 선택하였고. landing Page 에서 필요한 부분만 추출해서 사용하도록 함.

1. 검색창을 상단 위로 올리고 나머지는 전부 지운다. (검색창은 주소 검색을 하기 위함.)

2. 검색창, 상단bar 외에는 전부 지우고 kakaoMap 으로 채울 예정.

3. 카카오맵이 화면 비율에 맞춰 축소/확대 하였을때 변경이 제대로 잘 되는지 확인되어야함.

Free DownLoad 버튼을 눌러서 다운로드 받고 압축해제한 폴더 및 파일들을 전부 이클립스 자바 프로젝트에 붙여넣습니다.

java 프로젝트 : 오른쪽 클릭 > New > Project.. > 검색창에 web 쓰면 Dynamic Web Project 를 생성해서 만든 자바 프로젝트 입니다.

- 압축 해제한 파일

전체 드래그 한 파일을 

생성한 다이나믹 자바 프로젝트에 복사한다.

톰캣에 해당 프로젝트 Add 해주고 landing Page 무료템플릿이 제대로 화면에 나오는지 확인한다.

다음 포스팅에서상단바에 텍스트만 어떻게 끼워넣는지 확인해보도록 함.