HTML, CSS 및 JavaScript 기능 및 차이점

HTML, CSS 및 JavaScript 기능 및 차이점(HTML)

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

JavaScript 플랫폼을 사용하는 Windows 런타임 앱을 통해 HTML, CSS 및 JavaScript를 사용하여 앱을 빌드할 수 있습니다. JavaScript를 사용하는 Windows 런타임 앱 프로그래밍의 많은 부분은 웹 사이트의 태그 및 코드를 작성하는 것과 동일하지만 JavaScript를 사용하는 Windows 런타임 앱은 추가 기능을 제공하며 기존 HTML 기능을 사용하는 방법과 약간의 차이가 있습니다. 여기서는 이러한 차이점에 대해 살펴봅니다.

사전 요구 사항

HTML 지원

JavaScript를 사용하는 Windows 런타임 앱에서는 canvas, SVG, video, audio 요소와 같은 HTML5 기능을 대부분 지원합니다. 또한 2D 변형, 3D 변형, 전환 및 애니메이션과 같은 Cascading Style Sheets, Level 3 (CSS3) 기능도 대부분 지원합니다.

일반적으로 JavaScript를 사용하는 Windows 런타임 앱용 HTML을 작성하는 작업은 표준 모드로 실행되는 Internet Explorer 11용 HTML을 작성하는 것과 많이 유사하지만, 몇 가지 차이점이 있습니다. 다음 섹션에서는 JavaScript를 사용하는 Windows 런타임 앱에서 제공하는 몇 가지 강력한 기능과 일부의 기존 HTML 및 DOM API가 다르게 작동하는 방식에 대해 설명합니다.

추가 기능

JavaScript를 사용하는 Windows 런타임 앱에서는 다음과 같은 여러 새로운 기능을 사용하여 앱을 개선할 수 있습니다.

  • 향상된 터치 지원
  • UI의 모양과 느낌에 대한 제어 강화

    JavaScript를 사용하는 Windows 런타임 앱에서는 기존 HTML 컨트롤 및 새로운 모든 JavaScript용 Windows 라이브러리 컨트롤에 파트라는 스타일 지정 가능한 추가 구성 요소를 제공합니다. 이러한 파트를 통해 컨트롤의 모양과 느낌을 보다 유연하게 제어할 수 있습니다. 컨트롤의 스타일 지정에 대한 자세한 내용은 빠른 시작: 컨트롤의 스타일 지정을 참조하세요.

  • Windows 런타임 액세스.

    Windows 런타임은 Windows 런타임 앱용으로 개발된 API 집합으로 네트워킹 기능, 향상된 XML 구문 분석, 시스템 및 장치 액세스 등을 제공합니다. Windows 런타임에서 제공하는 전체 기능 목록은 Windows 런타임 참조를 참조하세요.

    Windows 런타임을 사용하여 C#, Visual Basic 또는 C++로 고유한 사용자 지정 라이브러리를 작성할 수도 있습니다. 그런 다음 JavaScript를 사용하는 Windows 런타임 앱에서 JavaScript를 통해 이러한 라이브러리에 액세스할 수 있습니다.

  • DatePicker, TimePicker, ListView 등의 컨트롤 및 고도로 사용자 지정 가능하고 XML 및 웹 서비스를 비롯한 여러 데이터 유형에 바인딩할 수 있는 데이터 컨트롤. 이러한 컨트롤은 WinJS의 일부입니다.

    전체 목록은 컨트롤 목록을 참조하세요.

  • WinJS 액세스

    WinJS는 JavaScript로 작성된 Windows 런타임 앱을 더 쉽게 만들 수 있게 해 주는 JavaScript와 CSS 파일의 집합입니다. HTML, CSS, Windows 런타임을 함께 사용하여 앱을 만들 수 있습니다.

Windows 런타임 개체

Windows 런타임은 시스템에 보다 상세히 액세스할 수 있는 API를 제공합니다. 프로젝트용 사용자 지정 개체를 C#, VB 및 C++로 만들어 프로젝트에 코드 라이브러리로 포함할 수 있습니다.

차이점

일반적으로 HTML 및 DOM API는 표준 모드의 Windows Internet Explorer 내에서 실행할 때와 기능이 같지만, 몇 가지 차이점이 있습니다. 이러한 차이점 중 일부는 열 수 있는 창 유형을 제어하는 Windows 셸 내에서 실행할 때 나타나고, 일부는 JavaScript를 사용하는 Windows 스토어 앱의 보안 모델 때문입니다.

창 만들기 및 조작

Windows: 창 만들기 및 조작:  

Windows 셸에서 활성 앱은 대부분의 화면을 채우는 단일 창을 차지합니다. 새 창을 만들거나 기존 창의 크기를 조정하거나 위치를 이동할 수 없습니다.

window 개체 작업

alert, prompt, open, moveBy, moveTo, resizeByresizeTo와 같은 window 개체의 일부 메서드는 JavaScript로 작성한 Windows 런타임 앱에서 작동하지 않습니다. 로컬 컨텍스트에서 실행 중인 페이지는 window.close를 사용하여 앱을 종료할 수 있지만 복구할 수 없는 오류가 발생한 경우에만 사용해야 합니다. 웹 컨텍스트에서 실행 중인 페이지는 window.close를 사용할 수 없습니다.

기본 탐색

가장 단순하며 가장 일반적으로 사용되는 탐색 양식 중 하나는 하이퍼링크입니다. 다음 코드는 page2.html로 이동하는 하이퍼링크를 만듭니다.


<p><a href="page2.html">Go to page 2</a></p>

이것은 상대적 링크이므로 page2.html이 앱의 일부인 로컬 페이지라고 가정합니다. 링크를 클릭하면 page2.html로 이동합니다. page2.html과 같은 로컬 페이지는 로컬 컨텍스트에서 실행됩니다.

다음 예제에서는 외부 웹 사이트 www.bing.com에 대한 링크를 추가합니다.


<p><a href="ms-appx:///page2.html">Go to page 2</a></p>
<p><a href="http://www.bing.com">Search the web</a></p>


두 번째 링크를 클릭하면 흥미로운 일—이 일어납니다. 첫 번째 링크가 응용 프로그램 내에서 열린 것과 달리 두 번째 링크는 응용 프로그램 내가 아닌 웹 브라우저에서 열립니다.

JavaScript를 사용하는 Windows 런타임 앱에서는 외부 페이지에 대한 최상위 탐색을 수행하지 않기 때문입니다. 외부 웹 페이지는 WebView 컨트롤 또는 iframe에서만 표시할 수 있습니다. 자세한 내용은 외부 웹 페이지에 연결하는 방법을 참조하세요. 연결에 사용할 수 있는 여러 프로토콜(ms-appx:///, ms-appx-web:/// 등)에 대한 자세한 내용은 콘텐츠를 참조하는 방법을 참조하세요.

로컬 및 웹 컨텍스트 페이지

태그 및 코드가 브라우저에서 동작하는 방식과 JavaScript를 사용하는 Windows 런타임 앱에서 작동하는 방식 간의 몇 가지 차이점을 이해하려면 먼저 로컬 컨텍스트와 웹 컨텍스트 간의 차이점을 이해해야 합니다.

JavaScript를 사용하는 Windows 런타임 앱에는 HTML 페이지가 하나 이상 포함되어 있습니다. 이 페이지 및 앱 자체에 포함하는 다른 모든 페이지는 앱의 로컬 컨텍스트에서 실행됩니다. iframe을 사용하여 원격 페이지로 이동할 때 해당 페이지는 웹 컨텍스트에서 실행되며 시스템에 대한 액세스가 제한되어 있습니다.

앱 패키지 매니페스트의 ApplicationContentUriRules 섹션을 사용하여 웹 컨텍스트의 페이지에 시스템의 지리적 위치에 대한 액세스(앱에 이 기능에 대한 액세스 권한이 있는 경우)와 클립보드에 대한 액세스를 제공할 수 있습니다.

웹 컨텍스트 페이지는 다른 외부 페이지보다 시스템의 더 많은 부분에 액세스할 수 있지만 로컬 컨텍스트 페이지만큼의 액세스 권한을 갖지 못합니다. 예를 들어 웹 컨텍스트의 페이지는 Windows 런타임에 액세스할 수 없지만 로컬 컨텍스트의 페이지는 할 수 있습니다. 로컬 및 웹 컨텍스트 간의 차이점에 대한 자세한 내용은 컨텍스트별 기능 및 제한 사항을 참조하세요.

탐색 모델

거의 모든 웹 사이트는 일정한 탐색 형식을 제공하는데, 대개 다른 페이지로 클릭하여 이동하는 하이퍼링크 형식입니다. 각 페이지에는 고유한 JavaScript 함수 및 데이터 집합, 표시할 새 HTML 집합, 스타일 정보 등이 있습니다. 이러한 탐색 모델을 다중 페이지 탐색이라고 합니다.

또 다른 탐색 모델은 단일 페이지 탐색인데, 여기서는 앱에 단일 페이지를 사용하여 필요에 따라 이곳에 추가 데이터를 로드합니다. 여전히 앱을 여러 파일로 분할할 수 있지만 페이지를 이동하는 대신 앱은 기본 페이지에 다른 문서를 로드합니다(Page 또는 HtmlControl 개체 사용). 앱의 기본 페이지는 언로드되지 않으므로 스크립트도 언로드되지 않아 활성화, 상태 및 애니메이션을 보다 쉽게 관리할 수 있습니다. 사용자가 앱을 실행할 때 응용 프로그램과 같은 원활한 환경이 제공되어 새 페이지를 로드하기 위해 일시 중지할 필요가 없고 빈 화면도 표시되지 않습니다. JavaScript를 사용하는 Windows 스토어 앱에서는 단일 페이지 탐색 모델을 사용할 것을 권장합니다.

비동기 함수

응답이 빠른 사용자 환경을 제공하기 위해 WinJS 및 Windows 런타임 함수는 대부분 비동기적으로 실행됩니다. 이렇게 하면 백그라운드에서 작업을 수행하는 동안 앱이 계속해서 사용자 조작에 응답할 수 있습니다. 비동기 함수는 직접 값을 반환하는 대신 Promise를 값으로 반환합니다. 비동기 프로그래밍에 대한 자세한 내용은 JavaScript의 비동기 프로그래밍을 참조하세요.

동적으로 HTML 추가

앱의 로컬 컨텍스트 페이지는 시스템에 대한 액세스 권한이 다른 웹 페이지(또는 "웹 컨텍스트 페이지")보다 많습니다. Windows 런타임에 액세스할 수 있을 뿐 아니라 앱의 권한에 따라서는 파일 시스템 및 장치에도 액세스할 수 있습니다. 이 때문에 악성 코드가 실행되지 않도록 예방하는 일이 중요합니다.

스크립트 삽입을 방지하고 시스템이 악성 코드로 인해 손상되지 않도록 보호하기 위해 로컬 컨텍스트의 페이지에 삽입하는 HTML은 toStaticHTML 메서드에서 처리되는 것처럼 필터링됩니다. 알 수 없는 요소, 이벤트 처리기, 스크립트 또는 스크립트 참조, 알 수 없는 CSS 의사 요소 및 의사 클래스가 포함된 HTML을 삽입하면 페이지 DOM에 HTML을 추가할 때 예외가 발생합니다.

이 보안 제한은 다음 속성과 메서드에 영향을 줍니다.

이러한 보안 제한 사항을 무시할 수도 있지만 제어할 수 없는 원격 웹 콘텐츠를 포함하지 않는 신뢰할 수 있는 콘텐츠에서만 무시하는 것이 좋습니다. 안전한 HTML 필터링을 무시하려면 다음 함수 중 하나를 사용합니다.

  • createElement

    DOM에 추가할 수 있는 새 요소를 명시적으로 만듭니다. 각 요소를 명시적으로 만들기 때문에 안전한 HTML 필터가 요소에 적용되지 않습니다. 이 경우 사용자가 추가하는 요소를 완벽히 제어할 수 있으므로 악성 코드를 실수로 포함할 위험이 없다고 가정합니다.

  • MSApp.execUnsafeLocalFunction

    특정 기능에 대해 안전한 HTML 필터링을 사용하지 않도록 설정합니다. 보통은 차단되는 콘텐츠를 삽입하는 함수를 만들고 MSApp.execUnsafeLocalFunction을 사용하여 이 함수를 실행할 수 있습니다.

    
    
    var someElement = document.getElementById('someElementID');
    MSApp.execUnsafeLocalFunction(
        function() { someElement.innerHTML = '<div onclick="console.log(\"hi\");">hi</div>' }
    );
    
    
    
    
  • WinJS.Utilities.setInnerHTMLUnsafe, WinJS.Utilities.setOuterHTMLUnsafe

    안전한 HTML 필터링을 사용하지 않고 지정한 HTML을 작성합니다. 이러한 함수는 WinJS의 일부입니다.

이 함수는 시스템에 대한 액세스가 제한되어 있으므로 웹 컨텍스트의 페이지에는 이러한 제한 사항이 적용되지 않습니다. 따라서 innerHTML, pasteHTML 등의 속성과 함수는 악성 코드를 확인하지 않습니다.

DOM 이벤트

대부분의 경우 JavaScript를 사용하는 Windows 런타임 앱에서 DOM 이벤트의 기능은 웹 브라우저에서와 동일하지만 몇 가지 차이점이 있습니다. 다르게 작동하는 이벤트 목록은 HTML 및 DOM API 변경 목록을 참조하세요.

ActiveX 컨트롤

JavaScript를 사용하는 Windows 런타임 앱은 사용자 지정 ActiveX 컨트롤을 지원하지 않습니다. UI 컨트롤이 필요하면 HTML 컨트롤이나 WinJS 컨트롤을 사용하거나 사용자 지정 WinJS 컨트롤을 만들 수 있습니다. 사용자 지정 논리를 수행해야 하는 경우에는 대신 사용자 지정 Windows 런타임 개체를 만듭니다.

인코딩

JavaScript로 작성한 Windows 런타임 앱에서 액세스하는 모든 HTML, JavaScript 및 CSS는 UTF-8로 인코드해야 합니다.

바이트코드 캐싱

JavaScript를 사용하는 Windows 런타임 앱을 Microsoft Visual Studio 디버깅 환경 외부에서 실행하는 경우 여러 성능 최적화가 수행됩니다. 중요한 최적화 하나는 앱 패키지에 포함된 모든 JavaScript 파일(확장명이 .js인 파일)을 JavaScript 엔진이 바로 사용할 수 있는 바이트코드로 변환하는 것입니다. 앱에서는 이러한 파일의 코드를 처리되지 않은 파일(예: 웹의 JavaScript 파일)보다 더 빨리 로드 및 실행할 수 있습니다. 이 바이트코드 및 원본 코드의 복사본은 패키지 파일과 함께 단일 바이트코드 캐시 파일에 저장됩니다. 바이트코드 변환이 완료된 후에는 원래 원본 파일을 수정해도 앱을 다시 배포하지 않는 한 앱의 동작에 영향을 주지 않습니다.

jQuery 사용

JavaScript를 사용하는 Windows 런타임 앱에서 jQuery를 사용할 수 있습니다. 단, 버전 2.0 이상만 해당됩니다. 항상 최신 버전을 사용하는 것이 좋습니다.

관련 항목

HTML 및 DOM API 변경 목록

 

 

표시:
© 2016 Microsoft