빠른 시작: 앱 레이아웃 정의(HTML)

  • 아티클

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

임의의 창 크기 또는 방향에 대한 앱 레이아웃을 정의할 수 있습니다.

앱 기능 전체 프로세스 시리즈의 일부로 이 기능의 작동 방법을 살펴보세요.: Windows 스토어 앱 UI 전체 프로세스

목표: 이 문서를 읽으면 HTML, CSS(CSS 스타일시트) 및 JavaScript를 사용하여 모든 보기 상태에서 적합해 보이고 잘 작동하는 유연한 UI를 만드는 방법에 대해 확실하게 이해할 수 있습니다.

사전 요구 사항

  • 앱 디자인을 알고 있어야 합니다.

    Windows 런타임 앱을 계획 및 디자인하는 방법에 대한 자세한 내용은 비전 정의를 참조하세요.

  • Windows 8.1의 크기 조정 가능한 창에 익숙해야 합니다.

    보기 상태에 대한 자세한 내용은 레이아웃 및 크기 조정에 대한 UX 지침에서 확인할 수 있습니다.

  • CSS 미디어 쿼리에 대해 알아야 합니다.

    미디어 쿼리는 W3C(World Wide Web 컨소시엄) 미디어 쿼리 명세에 정의되어 있습니다. CSS 미디어 쿼리 샘플에서 작동 중인 미디어 쿼리를 확인할 수 있습니다.

  • CSS3(CSS 스타일시트, Level 3) 고급 레이아웃 기능 특히, CSS3 그리드 맞춤 사용 방법을 알고 있어야 합니다.

    CSS3 고급 레이아웃 기능 및 그리드 맞춤에 대한 내용은 CSS에서 확인할 수 있습니다.

CSS를 사용하는 적응 레이아웃 샘플

이 문서에서는 CSS를 사용하는 적응 레이아웃 샘플에서 레이아웃이 구현되는 방식을 설명하여 앱 레이아웃 정의와 관련된 기본 개념을 설명합니다. 샘플은 오늘 날씨 및 10일 예보를 표시하는 시뮬레이션 날씨 앱입니다. CSS 및 HTML, CSS 그리드, ListView 컨트롤 및 CSS 미디어 쿼리를 사용하여 유연한 앱 레이아웃을 만드는 방법에 대해 설명합니다.

자세한 내용을 알아보기 전에 CSS를 사용하는 적응 레이아웃 샘플의 구조를 살펴보겠습니다. 앱은 세 개의 HTML 페이지로 구성되어 있습니다. 첫 번째는 앱 UI의 기본 화면을 정의하는 최상위 페이지 App.html입니다. 뒤로 단추, 제목 및 자막, 앱 메뉴, 앱 바 단추 및 콘텐츠 표시 영역(아래 이미지에서 흰색 영역)이 포함되어 있습니다.

샘플 앱의 기본 페이지

다른 두 HTML 페이지, Current.html 및 TenDay.html은 기본 페이지의 콘텐츠 영역에 표시되는 콘텐츠 구조를 정의합니다. Current.html 페이지는 다음과 같이 오늘 날씨에 대한 세부 정보를 표시합니다.

현재 날씨 페이지

TenDay.html 페이지는 다음과 같이 10일 예보에 대한 세부 정보를 표시합니다.

10일 예보 페이지

앱의 기본 페이지 레이아웃과 10일 예보 레이아웃을 정의하는 CSS를 사용하는 적응 레이아웃 샘플 부분에 집중하겠습니다.

다음은 10.6" 디스플레이에서 1366 x 768 해상도로 전체 화면 세로 및 가로 방향으로 10일 예보를 표시할 때뿐 아니라 다른 앱과 나란히 배치(좁은 레이아웃 및 넓은 레이아웃에 맞게 크기 조정)했을 때 앱의 기본 페이지가 어떻게 표시되는지 보여 줍니다.

세로, 가로, 좁은 레이아웃 및 넓은 레이아웃

앱이 사용 가능한 화면 영역을 채우는지 확인

잘 디자인된 앱의 UI 화면은 사용 가능한 화면 영역을 모두 채웁니다. 앱에서 수용해야 하는 광범위한 장치 폼 팩터, 해상도 및 방향을 고려할 때 처음에는 이것이 어려운 과제로 여겨질 수 있습니다. 그러나 CSS를 사용하면 쉽게 해결됩니다.

앱이 사용 가능한 화면 영역을 모두 채우는지 확인하려면

  1. div 요소를 페이지에 있는 모든 다른 UI 요소의 최상위 컨테이너로 사용합니다.

    <body>
    <div class="win-ui-dark appGrid">
        <!-- TODO: Define page structure here. -->
    </div>
</body>

  2. CSS 속성 vw 및 vh를 사용하여 뷰포트를 기준으로 div의 width 및 height 속성을 설정합니다. 예를 들어 100vw(뷰포트 너비) 및 100vh(뷰포트 높이)를 사용하여 뷰포트를 다음과 같이 채웁니다.

    .appGrid {
    width: 100vw;
    height: 100vh;
    /* TODO: Add other styles here. */
}

    vw 및 vh는 계층 구조 내의 깊이에 관계없이 모든 요소에 지정할 수 있습니다. 뷰포트의 크기 조정 컨텍스트는 변경되지 않으므로 상속된 크기 조정을 고려할 필요가 없습니다.

    참고  샘플에서는 width 및 height 속성을 100%로 설정합니다.

     

기본 페이지의 기본 레이아웃 정의

앱 UI의 레이아웃을 지정하는 경우 가로 방향부터 시작하는 것이 좋습니다. 가로 레이아웃을 정의하고 나면 세로 및 좁은 너비 레이아웃에 대해 조정하기가 쉽습니다.

HTML을 사용하여 페이지 UI 항목 정의

앱 UI에는 일반적으로 탐색 단추, 제목, 메뉴, 컨트롤 등과 같은 항목이 있습니다. 이러한 UI 항목을 페이지 최상위 div 요소의 자식 HTML 요소로 추가합니다.

다음 HTML은 CSS를 사용하는 적응 레이아웃 샘플 앱 최상위 페이지의 UI 항목을 정의합니다. 항목에는 뒤로 단추, 제목 및 자막, 앱 메뉴, 기본 콘텐츠 영역 및 앱 바 단추가 포함됩니다.

<body>
    <div class="win-ui-dark appGrid">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="win-type-xx-large titlecontainer" tabindex="0"><span class="pagetitle">Mountains</span><span class="win-type-x-large chevron">&#xE099</span></span>
                <span class="win-type-x-large pagesubtitle">Rainer</span>
            </h1>
        </header>
        <div id="headerFlyout" data-win-control="WinJS.UI.Menu">
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'rainierMenuItem', label:'Rainier'}"></button>
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'stHelensMenuItem', label:'St. Helens'}"></button>
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'olympusMenuItem', label:'Olympus'}"></button>
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'bakerMenuItem', label:'Baker'}"></button>
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'adamsMenuItem', label:'Adams'}"></button>
        </div>
        <div class="appViewContentMask">
            <div class="appViewContent">
                <div id="current-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/current.html', data: FluidAppLayout.Data.mountains[0].weatherData[0]}"></div>
                <div id="ten-day-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/tenDay.html', data: FluidAppLayout.Data.mountains[0].weatherData}"></div>
            </div>
        </div>
    </div>
    <div id="appbar" class="win-ui-dark appbar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'current', label: 'Current', icon: 'calendarday', type: 'toggle', onclick: FluidAppLayout.transitionPivot, selected: 'false', tooltip: 'Get the current report'}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'tenDay', label: 'Ten day', icon: 'calendarweek', type: 'toggle', onclick: FluidAppLayout.transitionPivot, selected: 'false', tooltip: 'Get the ten day report'}"></button>
    </div>
</body>

CSS 그리드를 사용하여 HTML 페이지에서 UI 항목 배치

유연하고 조정 가능한 UI 레이아웃을 얻을 수 있는 가장 좋은 방법 중 하나는 CSS 그리드를 사용하는 것입니다. 그리드는 자동으로 확장하여 제공된 공간을 채울 수 있고 여러 창 크기에 맞게 UI 레이아웃을 조정하기 쉽게 하는 다양한 속성 집합을 제공하기 때문입니다. 그리드에 있는 요소의 위치는 요소가 지정된 순서와 무관하므로 즉 요소의 위치는 HTML 태그의 순서가 아니라 CSS에 의해 결정되므로 요소를 다양한 화면 크기 또는 다양한 방향에서 다양하게 배열하거나 일부 요소가 일부 레이아웃에 표시되지 않도록 하기가 용이합니다.

기본 페이지 레이아웃

  1. CSS를 사용하는 적응 레이아웃 샘플 앱은 div -ms-grid의 display 속성을 설정하여 App.html 페이지의 최상위 div에 CSS 그리드를 적용합니다. 이러한 최상위 그리드는 앱의 기본 페이지에서 UI 항목을 배치하는 데 필요한 전체 구조를 정의합니다.

  2. 그런 다음 샘플 앱은 -ms-grid-columns 및 -ms-grid-rows 속성의 값을 설정하여 그리드의 열과 행을 정의합니다.

    다음 CSS 코드는 샘플 기본 페이지의 최상위 div에 그리드를 적용합니다. 이 그리드는 앱 헤더를 구성하는 항목(뒤로 단추, 제목 및 자막, 앱 메뉴 등)을 배치하고 기본 콘텐츠 영역의 위치를 설정하는 데 사용됩니다.

    .appGrid {
    display: -ms-grid;
    -ms-grid-columns: 120px 1fr;
    -ms-grid-rows: 120px 1fr; 

    /* Other properties omitted for clarity. */

}

    앞의 CSS 코드는 열과 행이 두 개씩 있는 그리드를 만듭니다. 첫 번째 열의 너비는 120픽셀이고 두 번째 열의 너비는 "부분 단위"입니다. 즉 열 너비가 자동으로 확장되어 첫 번째 열이 채우지 않는 사용 가능한 공간을 채웁니다. 행도 유사한 방식으로 정의됩니다.

    다음 일러스트레이션은 그리드가 앱의 기본 페이지를 어떻게 나누는지 보여 줍니다.

    기본 페이지 그리드

  3. 다음으로 CSS를 사용하는 적응 레이아웃 샘플은 그리드의 특정 셀에 각 항목을 할당하여 UI 항목의 위치를 설정합니다. 이를 위해 샘플은 페이지의 요소에 -ms-grid-column 및 -ms-grid-row 속성을 적용합니다. CSS 그리드는 셀 경계를 기준으로 항목을 배치하고 여러 열 또는 행에 걸쳐 항목이 있도록 허용하는 데 필요한 여러 다른 속성을 지원합니다. 자세한 내용은 그리드 레이아웃을 참조하세요.

    다음 CSS 코드는 샘플 앱 기본 페이지의 header 요소를 최상위 그리드의 열 1, 행 1에 배치하고 요소가 그리드의 두 열에 걸쳐 있도록 허용합니다. 이 코드는 최상위 그리드의 열 1, 행 1 안에 "자식" 그리드도 만듭니다. 자식 그리드는 헤더를 구성하는 개별 항목(뒤로 단추, 제목 및 자막, 앱 메뉴 등)을 배치하는 데 사용됩니다.

    header[role=banner] {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-column-span: 2;

    /* Child grid for positioning header items.*/
    display: -ms-grid;
    -ms-grid-columns: 120px 1fr;
    -ms-grid-rows: 1fr;
}

    앞의 코드는 다음 이미지에서 파란색으로 강조 표시된 영역에 그리드를 만듭니다.

    샘플 앱 헤더의 자식 그리드

    CSS를 사용하는 적응 레이아웃 샘플은 중첩 div 요소를 사용하여 오늘 예보 및 10일 예보가 표시되는 기본 콘텐츠 영역을 정의합니다.

    <div class="appViewContentMask">
    <div class="appViewContent">
        <div id="current-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/current.html', data: FluidAppLayout.Data.mountains[0].weatherData[0]}"></div>
        <div id="ten-day-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/tenDay.html', data: FluidAppLayout.Data.mountains[0].weatherData}"></div>
    </div>
</div>

    앞의 예제에서는 JavaScript용 Windows 라이브러리 HtmlControl 컨트롤을 사용하여 오늘 및 10일 예보에 필요한 HTML 페이지를 동적으로 포함합니다. WinJS 컨트롤에 대한 자세한 내용은 빠른 시작: WinJS 컨트롤 및 스타일 추가를 참조하세요.

    다음 CSS 코드는 최상위 그리드의 열 2, 행 2에 appViewContentMask div를 배치합니다. 콘텐츠가 전체 그리드 셀을 채우고 셀에 맞지 않는 모든 콘텐츠는 숨기도록 하는 속성도 설정합니다.

    .appViewContentMask {
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Other properties omitted for clarity. */

}

    다음 CSS 코드는 appViewContent div를 appViewContentMask div에서 정의된 영역을 채우는 단일 셀이 포함된 자식 그리드로 전환합니다. 자식 그리드를 사용하면 보기 상태에서 앱의 크기 또는 방향을 변경하는 경우 쉽게 콘텐츠를 재배치할 수 있습니다.

    
.appViewContent {
    width: 100%;
    height: 100%;
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
}

    CSS 코드는 콘텐츠 영역 그리드를 파란색으로 강조 표시된 영역에 할당합니다.

    샘플 앱 콘텐츠 영역의 그리드

10일 예보의 기본 레이아웃 정의

10일 예보는 WinJS ListView 컨트롤을 사용하여 관리되고 표시되는 항목 컬렉션입니다. 각 항목은 날짜, 최고 및 최저 온도, "체감" 온도 및 눈 올 확률을 포함한 문자열 집합과 이미지로 구성됩니다.

10일 예보의 항목 레이아웃

다음 HTML 페이지는 10일 예보의 항목 UI를 정의합니다. CSS를 사용하는 적응 레이아웃 샘플은 WinJS 템플릿 및 데이터 바인딩을 사용하여 ListView 컨트롤에 데이터를 제공합니다. 이 항목에서는 UI 레이아웃에 중점을 두므로 여기에서 템플릿 및 데이터 바인딩을 살펴보지는 않겠습니다. 템플릿 및 데이터 바인딩에 대해 자세히 알아보려면 템플릿을 사용하여 데이터를 바인딩하는 방법을 참조하세요.

<body>
    <div class="tenDayPage">
        <div id="tenDayTemplate" class="tenDayTemplate" data-win-control="WinJS.Binding.Template">
            <div class="tenDayGrid">
                <div class="win-type-x-large tenDayDate" data-win-bind="innerHTML: date">
                </div>
                <div class="tenDayImg">
                    <img data-win-bind="src: imgSrc" />
                </div>
                <div class="win-type-x-large tenDayHighLow">
                    <span class="tenDayHigh" data-win-bind="innerHTML: hi"></span>
                    <span>/</span>  
                    <span class="tenDayLow" data-win-bind="innerHTML: low"></span>
                </div>
                <div class="tenDayFeelsLike">
                    <span>Feels like </span>
                    <span data-win-bind="innerHTML: feelsLike"></span>
                </div>
                <div class="tenDayChanceOfSnow">
                    <span>Chance of snow is </span>
                    <span data-win-bind="innerHTML: chanceOfSnow"></span>
                </div>
            </div>
        </div>
        <div id="tenDayListView" class="tenDayListView" data-win-control="WinJS.UI.ListView" data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>
    </div>
</body>

이전 예제에서는 특별한 WinJS CSS classes for typography를 사용하여 날짜 및 최고/최저 온도 문자열에 아주 큰 글꼴 크기를 설정합니다. 이것이 tenDayDate 및 tenDayHighLow div 요소에서 class="win-type-x-large"의 의미입니다.

샘플 앱은 다음 CSS 코드를 사용하여 TenDay.html 페이지 및 해당 ListView 컨트롤이 부모 컨테이너(앱 기본 페이지의 콘텐츠 영역)를 채우도록 합니다.

/* Size Page to full size of parent container */
.tenDayPage
{
    height: 100%;
}

/* List View Control */
.tenDayListView
{
    width: 100%;
    height: 100%;
}

CSS 미디어 쿼리를 사용하여 보기별 레이아웃 및 스타일 적용

CSS 미디어 쿼리를 사용하면 창 크기에 따라 쉽게 다양한 스타일을 정의하여 앱의 HTML 항목에 적용할 수 있습니다. 다른 레이아웃마다 별도의 미디어 쿼리를 사용할 수도 있고 미디어 쿼리를 결합하여 동일한 스타일 집합을 여러 레이아웃에 적용할 수도 있습니다. 여기에서는 CSS를 사용하는 적응 레이아웃 샘플이 기본 페이지 및 10일 예보의 항목을 레이아웃하는 데 사용하는 미디어 쿼리에 대해 설명합니다.

좁은 레이아웃의 기본 페이지 레이아웃 지정

샘플 앱을 사용하는 경우 세로, 가로 및 크기 조정된 넓은 레이아웃에서 UI 항목의 크기와 레이아웃이 크게 변경되지 않습니다. 그러나 앱 너비를 500픽셀보다 작게 조정할 경우 다음 사항이 변경됩니다.

  • 앱 헤더의 UI 항목이 더 작아집니다.
  • 레이아웃이 두 개의 열과 두 개의 행에서 단일 열로 변경되고 이 열에서는 헤더가 첫 번째 행을 채우고 기본 콘텐츠 영역이 두 번째 행을 채웁니다.

좁은 레이아웃과 넓은 레이아웃 간의 헤더 레이아웃 차이점

이러한 변경 내용은 좁은 너비에 특정한 스타일 집합을 정의하는 CSS 미디어 쿼리를 통해 적용됩니다.

@media (max-width:499px) {
    .appGrid {
        display: -ms-grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 120px 1fr;
        width: 100%;
        height: 100%;
    }

    header[role=banner] {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
        -ms-grid-columns: 60px 1fr;
        -ms-grid-rows: 1fr;
        display: -ms-grid;
    }

        header[role=banner] .win-backbutton {
            -ms-grid-column: 1;
            -ms-grid-row: 1;
            margin-left: 20px;
            margin-top: 75px;
        }

        header[role=banner] .titlearea {
            -ms-grid-column: 2;
            -ms-grid-row: 1;
            margin-top: 69px;
            max-width: 260px;
        }

    .appViewContentMask {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
    }

앞의 CSS 코드에서는 –ms-grid-columns 속성의 새 값이 앱의 기본 그리드(appGrid)를 두 개의 열에서 하나로 변경합니다. 이 CSS 코드는 또한 앱 헤더의 항목에 대해 새 자식 그리드를 정의하고 새 그리드에서 헤더 항목을 배치합니다. 마지막으로 이 코드는 콘텐츠 영역(appViewContentMask)을 이전 그리드의 열 2, 행 2에서 새 그리드의 열 1, 행 2로 이동합니다.

좁은 레이아웃의 10일 예보 레이아웃 지정

앱 너비를 500픽셀보다 작게 조정할 경우 10일 예보의 개별 항목 레이아웃이 변경됩니다. 너비가 500픽셀보다 클 경우 단일 열 그리드를 사용하여 세로로 항목이 레이아웃됩니다. 너비가 500픽셀보다 작을 경우에는 2열 그리드를 사용하여 가로 방향으로 항목이 전환됩니다.

다음 이미지는 다른 레이아웃의 10일 예보 항목 모양을 보여 줍니다.

좁은 레이아웃과 넓은 레이아웃 간의 항목 레이아웃 차이점

다른 레이아웃을 얻기 위해 샘플은 CSS 미디어 쿼리를 사용하여 현재 보기 상태를 기준으로 스타일을 적용합니다. 샘플에서는 모든 보기 상태에 공통적인 스타일 집합 하나와 너비가 500px보다 작을 때의 레이아웃에 대한 스타일 집합을 정의합니다.

/* Styles that are common across all view states */
    .tenDayGrid
    {
        width: 190px;
        height: 250px;
        overflow: hidden;
        padding: 10px;
        display: -ms-grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: (auto)[5];
    }

    .tenDayDate
    {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
    }

    .tenDayImg
    {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
    }

    .tenDayHighLow
    {
        -ms-grid-column: 1;
        -ms-grid-row: 3;
    }

    .tenDayFeelsLike
    {
        -ms-grid-column: 1;
        -ms-grid-row: 4;
    }
    .tenDayChanceOfSnow
    {
        -ms-grid-column: 1;
        -ms-grid-row: 5;
    }
}

/* Define the template for the width less than 500px */
@media (max-width:499px)
{
    .tenDayDate
    {
        font-weight: 600;
    }

    .tenDayDate > .day
    {
       font-weight: 200;
    }

    .tenDayHighLow
    {
        font-weight: 300;
    }

    .tenDayFeelsLike, .tenDayChanceOfSnow
    {
        font-weight: 300;
    }

    .tenDayGrid
    {
        width: 250px;
        height: 150px;
        overflow: hidden;
        padding: 10px;
        display: -ms-grid;
        -ms-grid-columns: auto 1fr;
        -ms-grid-rows: (auto)[4];
    }

    .tenDayDate
    {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
        -ms-grid-column-span: 2;
    }

    .tenDayImg
    {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
        -ms-grid-row-span: 3;
    }

    .tenDayHighLow
    {
        -ms-grid-column: 2;
        -ms-grid-row: 2;
    }

    .tenDayFeelsLike
    {
        -ms-grid-column: 2;
        -ms-grid-row: 3;
    }
    .tenDayChanceOfSnow
    {
        -ms-grid-column: 2;
        -ms-grid-row: 4;
    }
}

필요한 경우 JavaScript를 사용하여 창 크기 조정 이벤트 처리

CSS 및 미디어 쿼리를 사용하여 가능한 한 많은 앱 레이아웃을 정의하는 것이 좋습니다. 그러나 JavaScript를 사용하여 CSS가 해결할 수 없는 레이아웃 문제를 처리해야 하는 경우도 있습니다.

예를 들어 샘플 앱은 WinJS ListView 컨트롤을 사용하여 10일 예보의 항목을 표시하고 앱 너비에 따라 목록 및 그리드 모드 사이에서 ListView를 전환합니다. 샘플 앱의 너비가 500픽셀이거나 더 넓은 경우 ListView는 그리드 모드를 사용하여 항목을 세로 및 가로로 배치하고 부모 컨테이너를 채웁니다. 앱 너비가 500픽셀보다 작은 경우 ListView는 목록 모드를 사용하여 세로 목록에 항목을 정렬합니다.

JavaScript에서 보기별 레이아웃을 만들려면 창 크기 조정 이벤트의 이벤트 수신기를 등록합니다. 이벤트 수신기 코드에서 clientWidth 속성을 쿼리하고 적절하게 레이아웃을 구성합니다.

다음 예제에서 CSS를 사용하는 적응 레이아웃 샘플은 ListView를 그리드 모드로 설정합니다. 창 너비가 500픽셀보다 작을 경우 ListView는 목록 모드로 바뀝니다. 앱의 이벤트 수신기는 크기 조정 이벤트를 수신 대기한 다음 clientWidth 속성을 쿼리하고 그에 따라 ListView를 변경합니다.

function ready(element, options) { 
        element.winControl = this; 
        var that = this; 
        WinJS.UI.process(element).done(function () { 
            that.listView = element.querySelector(".tenDayListView").winControl; 
            var itemTemplate = element.querySelector(".tenDayTemplate"); 
            var listViewLayout = new WinJS.UI.GridLayout(); 
 
            if (document.body.clientWidth <= 499) { 
                listViewLayout = new WinJS.UI.ListLayout(); 
            } 
            else { 
                element.style.opacity = "0"; 
            } 
 
            // ... 
 
            window.addEventListener("resize", tenDayResize, false); 
        }); 
    } 
 
    function tenDayResize(e) { 
 
        var listview = document.querySelector(".tenDayListView").winControl; 
 
        if (document.body.clientWidth <= 499) { 
            if (!(listview.layout instanceof WinJS.UI.ListLayout)) { 
                listview.layout = new WinJS.UI.ListLayout(); 
            } 
        } 
        else { 
            if (listview.layout instanceof WinJS.UI.ListLayout) { 
                listview.layout = new WinJS.UI.GridLayout(); 
            } 
        } 
    }

요약

이제 HTML, CSS 및 JavaScript를 사용하여 모든 창 크기에서 적합해 보이고 잘 작동하는 유연한 UI를 만드는 방법을 이해했을 것입니다.

관련 항목

CSS를 사용하는 적응 레이아웃 샘플

CSS 미디어 쿼리 샘플

Windows 8용 실습 랩

뷰어 앱 개발

미디어 쿼리 명세

ListView 컨트롤

개발자용 Internet Explorer 10 가이드