Amazon Location 애플리케이션HTML용 를 생성합니다. - Amazon Location Service

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

Amazon Location 애플리케이션HTML용 를 생성합니다.

이 자습서에서는 맵을 내장하고 사용자가 맵의 위치에 있는 항목을 찾을 수 있도록 하는 정적 HTML 페이지를 생성합니다. 앱은 웹 페이지의 파일HTML과 CSS 파일, 맵을 생성하고 사용자의 상호 작용 및 맵 이벤트에 응답하는 코드의 JavaScript (.js) 파일 등 세 개의 파일로 구성됩니다.

먼저 애플리케이션에 사용할 HTML 및 CSS 프레임워크를 생성해 보겠습니다. 이 페이지는 맵 컨테이너를 담을 <div> 요소와 쿼리에 대한 JSON 응답을 표시할 <pre> 요소가 있는 간단한 페이지입니다.

빠른 시작 애플리케이션을 HTML 위한 를 생성하려면

  1. quickstart.html라는 파일을 새로 생성합니다.

  2. 원하는 텍스트 편집기 또는 환경에서 파일을 편집합니다. 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>

    다음 단계에서 생성할 CSS 파일에 대한 포인터, 애플리케이션의 일부 자리 표시자 요소 및 설명 텍스트가 HTML 있습니다.

    이 튜토리얼의 후반부에서 사용할 두 개의 자리 표시자 요소가 있습니다. 첫 번째는 맵 컨트롤을 보유하는 <div id="map> 요소입니다. 두 번째는 맵에서의 검색 결과를 보여주는 <pre id="response"> 요소입니다.

  3. 파일을 저장합니다.

이제 웹 페이지의 CSS 를 추가합니다. 그러면 애플리케이션의 텍스트 및 자리 표시자 요소의 스타일이 설정됩니다.

빠른 시작 애플리케이션을 CSS 위한 를 생성하려면

  1. 이전 절차에서 만든 quickstart.html 파일과 동일한 폴더에 main.css라는 새 파일을 생성합니다.

  2. 사용할 편집기에서 파일을 편집합니다. 다음 텍스트를 파일에 추가합니다.

    * {
  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% 를 차지하도록 설정되며, 제목과 설명 텍스트의 색상과 스타일이 설정됩니다.

  3. 파일을 저장합니다.

  4. 이제 브라우저에서 quickstart.html 파일을 보고 애플리케이션의 레이아웃을 볼 수 있습니다.

    Browser window displaying a Quick start tutorial page with JSON Response section.

이제 애플리케이션에 맵 컨트롤을 추가합니다.