파일 리소스를 로드하는 방법(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
다양한 위치에서 파일 리소스를 로드하는 방법을 알아봅니다.
앱 패키지의 일부로 제공하거나 구성 요소 또는 프레임워크 패키지의 일부로 포함하는 앱 파일의 파일 리소스에 액세스할 수 있습니다. 또는 앱 데이터나 웹에서도 액세스할 수 있습니다. 태그(예: HTML 또는 알림 XML)에서 또는 코드(예: Windows.Web.Http 또는 storage file API)를 통해 이러한 파일을 참조할 수 있습니다. 다음 예제는 특정 컨텍스트의 파일 리소스를 보여 주지만 다른 여러 컨텍스트에서도 대부분 사용할 수 있습니다.
웹
웹에서 파일에 액세스하려면 표준 절대 HTTP URI를 사용할 수 있습니다.
<img src="https://www.contoso.com/images/logo.png" alt="Logo" />
앱 패키지
앱 패키지에서 파일에 액세스하려면 리소스를 참조하는 직접 또는 논리 파일 경로를 사용할 수 있습니다. 파일에 여러 언어, 배율, 대비 또는 다른 변형이 파일 이름 속 한정자로 있는 경우에도 마찬가지입니다. 소개 내용은 빠른 시작: 파일 또는 이미지 리소스 사용을 참조하세요.
예를 들어 다음을 참조하여
Images/en-US/homeregion-USA/logo.scale-100_contrast-white.png
을(를) 로드합니다.
Images/logo.png
태그에서 현재 문서를 기준으로 파일에 액세스하려면 상대 URI을 사용할 수 있습니다.
<img src="images/logo.png" />
패키지 루트를 기준으로 파일에 액세스하려면 절대 경로 URI("/"로 시작하는 URI)를 사용할 수 있습니다.
<img src="/images/logo.png" />
동일한 패키지 내에 저장된 파일을 클래스 라이브러리에서 액세스하려면 클래스 라이브러리 이름을 사용합니다.
<img src="/ClassLibraryName/images/logo.png" />
기본 문서에서 유추된 루트가 없는 코드에서 앱 패키지 내에 저장된 파일에 액세스하려면 ms-appx: 구성표를 사용합니다.
var uri = new Windows.Foundation.Uri('ms-appx:///images/logo.png');
Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri).done(function (file) {
...
});
앱과 함께 포함된 프레임워크 또는 라이브러리 패키지에 저장된 파일에 액세스하려면 절대 URI(및 ms-appx: 구성표)를 사용합니다.
<script src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>
웹 구획에 로드될 파일에 액세스하려면 ms-appx-web: 구성표를 사용합니다.
<iframe src="ms-appx-web:///html/webcompartment.html"></iframe>
현재 문서와 동일한 웹 또는 로컬 구획의 파일에 액세스하려면 체계를 지정하지 마세요.
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
앱 데이터
앱 데이터에 저장된 파일에 액세스하려면, ms-appdata: 구성표를 사용합니다. 앱 데이터는 local 폴더, roaming 폴더 또는 temp 폴더에 저장될 수 있습니다.
local 폴더에 저장된 파일에 액세스하려면 다음을 하세요.
<img src="ms-appdata:///local/images/logo.png" />
roaming 폴더에 저장된 파일에 액세스하려면 다음을 하세요.
<img src="ms-appdata:///roaming/images/logo.png" />
temp 폴더에 저장된 파일에 액세스하려면 다음을 하세요.
<img src="ms-appdata:///temp/images/logo.png" />
storage file APIs는 동일한 방식으로 응용 프로그램 패키지 내의 파일에 액세스할 수 있습니다.
var uri = new Windows.Foundation.Uri('ms-appdata:///local/images/logo.png');
Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri).done(function (file) {
...
});
이벤트 및 컨텍스트 변경
앱은 필요한 경우 리소스 표시를 업데이트해야 합니다.
사용자가 고대비를 켜는 경우 등 시스템이 변경될 때 Windows 스토어 앱이 실행 중일 수 있습니다. 이 경우 앱이 다른 한정자 집합을 사용합니다. 시스템이 다양하게 변경되면 ResourceContext 개체에 대한 이벤트가 호출됩니다.
JavaScript에서 이러한 이벤트를 수신 대기하는 가장 간단한 방법은 addEventListener 메서드를 통하는 것입니다.
WinJS.Resources.addEventListener('contextchanged', refresh, false);
컨텍스트가 변경될 때 이미지 요소는 자동으로 업데이트되지 않으며 응용 프로그램이 이미지를 바꾸어야 합니다. CSS 미디어 쿼리는 background-image 등의 CSS 속성을 즉시 업데이트하는 대안입니다.