다음을 통해 공유


SemanticZoom 컨트롤 추가(HTML)

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

SemanticZoom 컨트롤을 사용하여 동일한 콘텐츠의 두 보기를 확대/축소할 수 있습니다. 여기서는 SemanticZoom 컨트롤을 사용하는 방법을 보여 줍니다.

SemanticZoom 컨트롤의 확대/축소 보기

시맨틱 줌의 개요와 JavaScript 및 HTML을 사용하여 시맨틱 줌을 구현하는 방법을 보려면 이 짧은 동영상을 시청하세요.

시맨틱 줌은 손가락 모으기(손가락을 모아 축소하고 손가락을 벌려 확대)를 통해 또는 Ctrl 키를 누른 상태에서 마우스 스크롤 휠로 스크롤하거나 Ctrl 키를 누른 상태에서 + 또는 - 키를 눌러 수행합니다. SemanticZoom도 확대된 보기가 표시되면 축소 단추를 제공합니다.

콘텐츠 확대/축소

시맨틱 줌은 콘텐츠를 따라 빠르게 이동할 때 유용합니다. 축소 보기에서 콘텐츠를 탭하면 여기에 표시된 것처럼 보기가 확대되고 탭한 지점으로 이동됩니다.

축소된 보기에서는 전체 콘텐츠가 터치 타깃이 될 수 있습니다.

축소된 보기에서는 전체 콘텐츠가 터치 타깃이 될 수 있습니다.

콘텐츠 부분을 탭하기:

 콘텐츠 부분을 탭합니다.

확대 후 탭 영역으로 이동됩니다.

확대 후 탭 영역으로 이동됩니다.

부드러운 크로스 페이드 애니메이션은 시맨틱 줌 간에 전환합니다. 이것은 기본 터치 동작이며 사용자 지정할 수 없습니다.

이 조항의 내용

항목 설명

빠른 시작: SemanticZoom 추가

SemanticZoom 컨트롤을 사용하여 동일한 콘텐츠의 확대 또는 축소 보기로 전환하는 방법을 알아봅니다.

SemanticZoom 템플릿

SemanticZoom 컨트롤에 축소된 보기를 제공하는 ListView와 함께 사용할 수 있는 항목 템플릿입니다.