이 자습서에서는 맵을 포함하는 정적 HTML 페이지를 만들어 사용자가 맵의 특정 위치에 무엇이 있는지 찾을 수 있도록 합니다. 앱은 세 개의 파일로 구성됩니다. 웹페이지용 HTML 파일과 CSS 파일과, 다른 하나는 맵을 생성하고 사용자의 상호작용과 맵 이벤트에 응답하는 코드용 JavaScript(.js) 파일입니다.
먼저 애플리케이션에 사용할 HTML 및 CSS 프레임워크를 만들어 보겠습니다. 이 페이지는 맵 컨테이너를 보관하는 <div> 요소와 쿼리에 대한 JSON 응답을 표시하는 <pre> 요소가 포함된 간단한 페이지입니다.
빠른 시작 애플리케이션을 위한 HTML을 만들려면
-
quickstart.html라는 파일을 새로 생성합니다. -
원하는 텍스트 편집기 또는 환경에서 파일을 편집합니다. 파일에 다음 HTML을 추가합니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Quick start tutorial</title> <!-- Styles --> <link href="main.css" rel="stylesheet" /> </head> <body> <header> <h1>Quick start tutorial</h1> </header> <main> <div id="map"></div> <aside> <h2>JSON Response</h2> <pre id="response"></pre> </aside> </main> <footer>This is a simple Amazon Location Service app. Pan and zoom. Click to see details about entities close to a point.</footer> </body> </html>이 HTML에는 다음 단계에서 만들 CSS 파일에 대한 포인터, 애플리케이션의 일부 자리 표시자 요소, 일부 설명 텍스트가 있습니다.
이 튜토리얼의 후반부에서 사용할 두 개의 자리 표시자 요소가 있습니다. 첫 번째는 맵 컨트롤을 보유하는
<div id="map>요소입니다. 두 번째는 맵에서의 검색 결과를 보여주는<pre id="response">요소입니다. -
파일을 저장합니다.
이제 웹 페이지에 CSS를 추가하세요. 그러면 애플리케이션의 텍스트 및 자리 표시자 요소의 스타일이 설정됩니다.
빠른 시작 애플리케이션용 CSS를 만들려면
-
이전 절차에서 만든 quickstart.html 파일과 동일한 폴더에
main.css라는 새 파일을 생성합니다. -
사용할 편집기에서 파일을 편집합니다. 다음 텍스트를 파일에 추가합니다.
* { box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; } body { margin: 0; } header { background: #000000; padding: 0.5rem; } h1 { margin: 0; text-align: center; font-size: 1.5rem; color: #ffffff; } main { display: flex; min-height: calc(100vh - 94px); } #map { flex: 1; } aside { overflow-y: auto; flex: 0 0 30%; max-height: calc(100vh - 94px); box-shadow: 0 1px 1px 0 #001c244d, 1px 1px 1px 0 #001c2426, -1px 1px 1px 0 #001c2426; background: #f9f9f9; padding: 1rem; } h2 { margin: 0; } pre { white-space: pre-wrap; font-family: monospace; color: #16191f; } footer { background: #000000; padding: 1rem; color: #ffffff; }이렇게 하면 맵이 다른 곳에서 사용하지 않는 공간을 채우도록 설정되고, 응답 영역이 앱 너비의 30% 를 차지하도록 설정되며, 제목과 설명 텍스트의 색상과 스타일이 설정됩니다.
-
파일을 저장합니다.
-
이제 브라우저에서
quickstart.html파일을 보고 애플리케이션의 레이아웃을 볼 수 있습니다.
이제 애플리케이션에 맵 컨트롤을 추가합니다.
