프로젝트 목표
- 방문한 장소에 마커를 찍고, 작은 코멘트를 달아 나만의 방문 지도 꾸미기
- 친구 혹은 애인과 그룹을 만들어 우리의 지도를 채워보세요
- 타임 라인을 통해 다이어리처럼 이용도 가능해요
이런 느낌의 프로젝트를 진행해볼까 합니다.
사실 학부시절 팀 프로젝트로 했었습니다.
당시에는 구글 API를 사용했고 마커 찍고 게시글 작성하는 1번까지 완성했죠.
추후 프로젝트 방향성이라며 2개를 제시했었는데 발표만 그렇게 하고 아무것도 안함..ㅋㅋㅋ
갑자기 생각나서 처음부터 다시 하면서 복습도 하고~ 끝까지 달려보겠습니다.
카카오 지도 API 이용하기
카카오 API 키를 발급받은 후에 이용할 수 있습니다.
2020/07/13 - [웹 개발] - 카카오 API 키 발급
카카오 API 키 발급
키를 발급받으려면 카카오 계정이 필요합니다. 카카오톡을 사용하는 분이라면 이 점은 신경 안 쓰셔도 괜찮겠죠? 사이트 접속 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 �
coding-nyan.tistory.com
발급에 관해서는 짧지만 이 글에서 다루고 있습니다.
카카오 지도 api에 관해서는 공식 가이드를 활용했습니다.
https://apis.map.kakao.com/web/guide/
되게 좋아요 한국어이고 개발자끼리 질답을 할 수 있습니다.
위 글에서 전체 소스 코드 부분을 가져오겠습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kakao 지도 시작하기</title>
</head>
<body>
<div id="map" style="width:500px;height:400px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>
<script>
var container = document.getElementById('map');
var options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
var map = new kakao.maps.Map(container, options);
</script>
</body>
</html>
|
cs |
appkey = 발급받은 APP KEY 부분에 자바스크립트 APP Key를 넣어주세요.
이후에 바로 html 파일을 열면
500x400 크기의 지도가 제주도에 위치한 카카오를 중심으로 나오네요.
위도 경도 설정은 center: new kakao.maps.LatLng(33.450701, 126.570667126.570667)를 변경해주시면 됩니다.
level은 뭐라고 말하죠..? 줌인 줌아웃의 정도??
각각 세부 설정은 나중에 더 다듬기로 하고 웹을 꾸며봅시다.
대충 틀을 가꿔야 기능을 추가하고 싶은 욕구가 들더라구요.
상단바 메뉴 만들기
HTML 코드
|
1
2
3
4
5
6
|
<nav class="top_menu">
<ul>
<li class="menu"><a href="login.jsp">로그인</a></li>
<li class="menu"><a href="register.jsp">회원가입</a></li>
</ul>
</nav>
|
cs |
div를 사용하셔도 되고 nav를 사용하셔도 괜찮습니다.
또한 알아보니 그냥 a 태그만 넣고 ul li 기능이 없어도 상단바 메뉴로 활용이 가능하더라구요??
아직은 이렇게 작성하는 게 편하니 보존하겠습니다.
어느 정도 구현이 된다면 빼봐야겠어요.(미래의 나야 부탁해!!)
nav친구를 사용한 것도 과거에 비하면 발전이랍니다.
CSS 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
.top_menu a{
color:#f2f2f2;
text-align:center;
padding:14px 10px;
text-decoration: none;
font-size:20px;
}
.top_menu{
text-align:right;;
width:100%;
}
ul {
padding: 0px;
margin-right:20px;
}
li {
display: inline-block;
width: auto;
list-style: outside none none;
}
|
cs |
사실 별게 없어욬ㅋㅋ
그저 li 앞에 붙는 점을 떼고 가로로 정렬하고 패딩이랑 마진을 줘서 간격 설정했습니다.
title도 달아주고 어느 정도 완성한 디자인을 공개합니다.
얼추 메인 페이지를 완성해서 기뻤지만 지도가 너무 텔레토비 같고 애매하더라구요ㅋㅋㅋ
지도 보러 가기 버튼을 만들고 이후에 지도를 화면 가득 띄워줘야 할까요??
아니면 예전에는 흰 바탕에 파란색으로 포인트를 줬는데 반대여서 이렇게 이상한가..
다음에는 로그인 기능을 구현하거나 버튼을 구현해보겠습니다.
'TechTalk' 카테고리의 다른 글
| 로그인 페이지 만들기 디자인편 (0) | 2020.07.20 |
|---|---|
| github(깃허브) 오픈소스 컨트리뷰트하기 (0) | 2020.07.18 |
| 파이썬을 이용해 주식시장 상장된 종목 조회 (0) | 2020.07.15 |
| 카카오 API 키 발급 (0) | 2020.07.13 |
| Radio label 이미지 추가하기 (0) | 2020.07.10 |
