다음을 통해 공유


페이지 간 탐색(HTML)

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

앱에서 페이지와 콘텐츠 간에 탐색을 지원하는 방법을 배웁니다.

대부분의 앱은 사용자가 탐색하고 사용할 수 있는 여러 페이지의 콘텐츠 및 기능으로 구성됩니다. 여기서는 앱이 일반적으로 단일 페이지 탐색 모델을 사용하는 방법을 설명하고 WinJS(JavaScript용 Windows 라이브러리)와 함께 제공된 전용 컨트롤을 사용하여 탐색을 구현하는 방법을 보여줍니다.

여러 페이지 탐색은 앱 컨텍스트를 신경 쓰지 않고 페이지나 화면 간을 탐색하는 데 사용됩니다. 이 페이지는 앱과 달리 웹 사이트 내에서 매우 일반적인 웹 페이지입니다. 각 페이지에는 고유한 JavaScript 함수 및 데이터 집합, 표시할 HTML의 새로운 집합, 스타일 정보 등이 있습니다.

반대로 단일 페이지 탐색 모델은 단일 페이지를 사용하여 앱 컨텍스트를 유지 관리하고 필요에 따라 추가 데이터 및 콘텐츠를 로드합니다. 앱은 여전히 여러 파일로 나누어지지만, 페이지에서 페이지로 이동하는 대신 기본 페이지에 다른 문서를 로드하는 것입니다. 앱의 기본 페이지는 언로드되지 않으므로 스크립트도 언로드되지 않습니다. 따라서 상태, 전환 또는 애니메이션을 더욱 손쉽게 관리할 수 있습니다. 앱에서는 단일 페이지 탐색 모델을 사용하는 것이 좋습니다.

Microsoft Visual Studio 앱용 JavaScript 프로젝트 템플릿에는 단일 페이지 탐색 모델이 사용됩니다. 이 모델에서 HTML 페이지는 페이지의 URI를 통해 앱 수준의 단일 컨텍스트로 로드됩니다. 페이지는 대체로 사용자 작업에 대한 응답으로 필요에 따라 로드됩니다.

앱에 가장 적합한 탐색 패턴을 선택하는 방법을 보려면 탐색 패턴을 참조하세요.

앱 기능 전체 프로세스 시리즈의 일부로 플랫 탐색계층적 탐색 패턴의 작동 방법을 살펴보세요.

이 조항의 내용

항목 설명

빠른 시작: 단일 페이지 탐색 사용

단일 페이지 탐색 모델과 PageControl 개체 및 WinJS.Navigation 기능을 사용해 이를 앱에서 구현하는 방법에 대해 알아봅니다.

빠른 시작: 탐색 모음 추가

JavaScript로 작성한 Windows 스토어 앱에 탐색 모음("탐색 모음" 또는 "맨 위 앱 바"라고도 함)을 추가하는 방법에 대해 알아봅니다.

빠른 시작: 레이아웃 및 탐색에 허브 컨트롤 사용

JavaScript를 사용하는 Windows 스토어 앱에 Hub 컨트롤을 추가하는 방법에 대해 알아봅니다.

빠른 시작: 레이아웃 및 탐색에 피벗 컨트롤 사용

Windows Phone 8.1 앱에서 레이아웃과 탐색에 WinJS.UI.Pivot 컨트롤을 사용하는 방법을 배웁니다.

외부 웹 페이지에 연결하는 방법

외부 웹 페이지에 연결하고 앱에 이를 표시하는 방법을 배웁니다.

 

관련 항목

개발자용

첫 번째 앱 - 3부: PageControl 개체 및 탐색

앱 바 추가

빠른 시작: 단일 페이지 탐색 사용

빠른 시작: 탐색 모음(NavBar) 추가

빠른 시작: 레이아웃 및 탐색에 허브 컨트롤 사용

WinJS.Navigation Namespace

WinJS.UI.Hub object

WinJS.UI.AppBar object

WinJS.UI.NavBar object

WinJS.UI.BackButton object

HTML 허브 컨트롤 샘플

HTML AppBar 컨트롤 샘플

HTML NavBar 컨트롤 샘플

탐색 및 탐색 기록 샘플

디자이너용

탐색 패턴

명령 패턴

레이아웃

뒤로 단추

허브 컨트롤에 대한 지침

앱 바에 대한 지침

앱 바에 접근성 구현