2021.04.13 오시는 길 페이지 만들기

2021.04.11 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.11 한라열쇠 홍보용 웹페이지

2021.04.12 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.12 메인 페이지 만들기

2021.04.12 메인 페이지 만들기

 

 

 

오시는 길 페이지에는 가장 중요한 지도와 주소가 들어가야 됩니다.

지도는 예전에 사용해봤던 카카오 지도 API를 사용할 것입니다.

 

 

 

우선 오시는 길 페이지의 화면을 구상해봅니다.

메인 페이지에서 사용했던 navigation bar와 footer를 그대로 사용할 것입니다.

그리고 밑의 템플릿에서 로고가 없는 부분을 사용했습니다.

Full Width Pics - Free Bootstrap Template

물론 사진은 열쇠가게와 관련된 사진으로 바꿨습니다.

오시는 길 페이지의 navigation bar와 상단 부분

 

 

 

 

 

 

 

카카오 지도 API를 사용하기 위해서는 개발자 등록과 앱을 등록해야 합니다.

저는 이전에 다른 프로젝트를 할 때 등록해본 적이 있기 때문에 한라열쇠 앱만 추가 등록해서 appkey를 받았습니다.

지도가 로드되면 지도 중심에 한라열쇠 위치가 오게 만들고 거기에 마커를 따로 넣었습니다.

지도 컨트롤(지도, 스카이뷰, 확대/축소 조절)도 넣었고, 지도는 고정시켜서 움직이지 않게 했습니다.

그리고 지도의 오른쪽에는 도로명 주소와 지번 주소를 넣었습니다.

오시는 길 페이지의 지도와 주소 부분

 

 

 

오시는 길 맨 밑에는 메인 페이지에 있었던 연락처와 footer를 그대로 똑같이 넣어서 오시는 길 페이지를 완성했습니다.

오시는 길 페이지의 연락처와 footer

 

 

 

※ 궁금한 부분, 이상한 점 및 오타는 댓글에 부탁드립니다.

 

 

 

다음 글:

2021.04.14 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.14 서비스 페이지 만들기

2021.04.14 서비스 페이지 만들기