크기가 다른 항목을 표시하는 방법(HTML)

아티클
03/04/2016

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

기본적으로 ListView는 목록의 각 항목에 같은 크기를 할당합니다. 그리드 레이아웃을 사용할 경우 이 동작을 수정하여 항목을 여러 셀에 걸쳐 배치함으로써 크기가 다른 항목을 표시할 수 있습니다.

알아야 할 사항

기술

사전 요구 사항

기본 ListView 개체를 만들고 사용할 수 있다고 가정합니다. ListView 컨트롤 소개는 빠른 시작: ListView 추가를 참조하세요.

지침

ListView의 셀 및 크기 조정 정보

코드를 살펴보기 전에 ListView가 항목 크기 조정을 처리하는 방식을 이해하면 도움이 됩니다.

기본적으로 ListView는 포함하는 각 항목에 동일한 크기의 셀을 할당합니다. 다음은 모두 크기가 같은 항목을 포함하는 ListView입니다.

크기가 같은 항목이 포함된 ListView

다음은 개별 셀이 강조 표시되어 있는 동일한 ListView입니다.

ListView의 셀

셀 크기는 ListView에 있는 첫 번째 항목 크기로 결정됩니다. ListView에 다른 크기의 항목이 들어 있어도 여전히 첫 번째 항목 크기에 따라 셀 크기를 할당합니다. 따라서 한 항목이 다른 항목들보다 크면 다른 ListView 항목의 크기와 일치하도록 잘립니다.

크기가 다른 항목이 포함된 ListView

셀 범위 확장을 설정하여 이 동작을 변경할 수 있습니다. 이렇게 하면 항목이 여러 셀에 걸쳐 있을 수 있습니다. 이 예제에서는 더 큰 항목이 1개의 셀이 아닌 5개 셀에 걸쳐 있도록 셀 범위 확장이 켜져 있습니다.

셀 범위 확장이 사용하도록 설정된 ListView

셀 스패닝을 켜면 기본 셀의 크기도 명시적으로 지정할 수 있습니다. ListView의 모든 항목이 기본 셀 크기가 여러 개인 하나의 크기를 갖는 것이 좋습니다. 다음 예제에서는 크기가 더 큰 항목이 높이는 기본 셀 높이의 2배이지만 너비는 같도록 수정됩니다.

같은 기본 셀 크기가 여러 개인 항목이 포함된 ListView

다음은 크기가 세 개의 다른 크기를 갖는 항목을 포함하는 ListView를 만드는 방법입니다.

1단계: 데이터 및 ListView 만들기

먼저 데이터 원본과 ListView를 만들어봅니다.

JavaScript 파일에서 ListView에 대한 데이터 원본을 정의합니다. 이 예제에서는 JSON 개체 배열에서 List를 만든 다음 WinJS.Namespace.define을 사용하여 DataExamples라는 네임스페이스를 통해 노출함으로써 공개적으로 액세스 가능하게 합니다.

데이터는 다른 항목(예: 빠른 시작: ListView 추가)에 제시된 예제와 비슷하며 type 필드가 추가됩니다. 이 필드는 "smallListIconTextItem", "mediumListIconTextItem" 및 "largeListIconTextItem" 중 하나의 값을 가질 수 있습니다. 이후 단계에서 이 필드를 사용하여 각 항목의 크기를 결정하는 CSS 클래스를 할당하게 됩니다.

(function () {
    "use strict";

    var myCellSpanningData = new WinJS.Binding.List([
            { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png", type: "smallListIconTextItem" },
            { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png", type: "mediumListIconTextItem" },
            { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png", type: "largeListIconTextItem" },
            { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png", type: "mediumListIconTextItem" },
            { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png", type: "smallListIconTextItem" },
            { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png", type: "smallListIconTextItem" },
            { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png", type: "mediumListIconTextItem" },
            { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png", type: "mediumListIconTextItem" },
            { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png", type: "smallListIconTextItem" },
            { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png", type: "smallListIconTextItem" },
            { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png", type: "smallListIconTextItem" },
            { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png", type: "smallListIconTextItem" },
            { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png", type: "smallListIconTextItem" },
            { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png", type: "smallListIconTextItem" },
            { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png", type: "mediumListIconTextItem" },
            { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png", type: "smallListIconTextItem" },
            { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png", type: "largeListIconTextItem" },
            { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png", type: "mediumListIconTextItem" }
    ]);



    WinJS.Namespace.define("DataExamples",
        {
            myCellSpanningData: myCellSpanningData
        });

})();

(코딩을 수행하며 이 예제에서 사용된 이미지를 사용하려면 ListView 항목 템플릿 샘플을 다운로드하여 가져올 수 있습니다.)

HTML 파일에서 셀 스패닝 레이아웃을 사용하는 ListView를 만듭니다. 해당 itemDataSource 속성을 이전 단계에서 만든 데이터 원본으로 설정합니다.

<div id="myListView" 
    data-win-control="WinJS.UI.ListView" 
    data-win-options="{ 
        itemDataSource: DataExamples.myCellSpanningData.dataSource, 
        layout: {  
            type: WinJS.UI.CellSpanningLayout 
        } 
    }"
></div>

2단계: 기본 셀 크기를 정의하고 셀 스패닝을 사용하도록 설정

이제 기본 셀의 크기를 정의해야 합니다.

ListView에서 셀 스패닝 레이아웃을 사용하게 하려면 CellSpanningLayout 개체를 만들고 이 개체를 사용하여 ListView 컨트롤의 layout 속성을 설정합니다. 셀 스패닝을 켜고 기본 셀의 크기를 정의하려면 이 정보를 제공하는 groupInfo 함수를 만들고 이 함수를 사용하여 CellSpanningLayout 개체의 groupInfo 속성을 설정합니다. 정의하는 groupInfo 함수는 다음 속성을 포함하는 개체를 반환해야 합니다.

enableCellSpanning
true로 설정하여 셀 범위 확장을 켭니다. 기본값은 false입니다.
cellWidth
기본 셀의 너비입니다.
cellHeight
기본 셀의 높이입니다.

이 예제의 경우 기본 셀 크기로 310×80 픽셀을 사용합니다.

JJ657974.wedge(ko-kr,WIN.10).gif 기본 셀 크기를 정의하고 셀 스패닝을 사용하도록 설정하려면

데이터를 만들었던 JavaScript 파일에서 셀 스패닝을 켜고 기본 셀 크기를 310×80 픽셀로 정의하는 groupInfo 함수를 만듭니다.

// Enable cell spanning and specify
// the cellWidth and cellHeight for the items
var groupInfo = function groupInfo() {
    return {
        enableCellSpanning: true,
        cellWidth: 310,
        cellHeight: 80
    };
};

WinJS.Utilities.markSupportedForProcessing을 사용하여 HTML에서 함수에 액세스할 수 있도록 합니다.
```
// Enable cell spanning and specify
// the cellWidth and cellHeight for the items
var groupInfo = function groupInfo() {
    return {
        enableCellSpanning: true,
        cellWidth: 310,
        cellHeight: 80
    };
};

WinJS.Utilities.markSupportedForProcessing(groupInfo);
```
(기본적으로는 보안상의 이유로 JavaScript용 Windows 라이브러리 컨트롤에서 함수 및 이벤트 처리기에 액세스할 수 없습니다. WinJS.Utilities.markSupportedForProcessing 함수를 사용하여 이러한 기본 동작을 재정의할 수 있습니다. 이 경우 제공하는 HTML이 올바른 형식이며 WinJS에서 처리될 수 있다고 가정합니다. 자세한 내용은 기본 앱 코딩을 참조하세요.)

함수에 대해 WinJS.Utilities.markSupportedForProcessing을 호출해도 공개적으로 액세스할 수 있게 설정되지는 않습니다. 이 작업은 다음 단계에서 수행하겠습니다.
네임스페이스를 통해 groupInfo 함수를 노출하여 공개적으로 액세스할 수 있도록 합니다. 이 예제에서는 1.1단계에서 만든 DataExamples 네임스페이스를 업데이트합니다.
```
WinJS.Namespace.define("DataExamples",
    {
        groupInfo : groupInfo,
        myCellSpanningData: myCellSpanningData
    });
```

groupInfo 함수를 사용하도록 ListView를 업데이트합니다.

<div id="myListView" 
    data-win-control="WinJS.UI.ListView" 
    data-win-options="{ 
        itemDataSource: DataExamples.myCellSpanningData.dataSource, 
        layout: {  
            groupInfo: DataExamples.groupInfo,
            type: WinJS.UI.GridLayout 
        } 
    }"
></div>

3단계: 단일 셀에 있는 항목 크기 정의

이제 기본 셀 크기를 정의했으므로 항목의 크기를 정의할 수 있습니다. 첫 번째 단계에서 데이터를 정의할 때 허용되는 항목의 크기에 대한 정보가 들어 있는 type 필드(작음, 보통 또는 큼)를 포함했습니다. 이러한 정보를 사용하여 항목 크기를 할당할 수 있습니다. 크기를 할당하는 가장 좋은 방법은 CSS 클래스를 사용하는 것입니다. 이 방법은 템플릿 함수를 사용할지 또는 WinJS.Binding.Template를 사용할지에 따라 다릅니다.

기본 셀은 너비가 310픽셀이고 높이고 80픽셀입니다. 각 항목의 전체 크기는 기본 셀 크기의 배수여야 합니다. 기본 셀 크기는 항목의 크기에 항목의 안쪽 여백, 여백 및 테두리를 더한 크기입니다.

ListView의 셀

다음은 기본 셀 크기를 계산하는 수식입니다.

기본 셀 너비 = 항목 너비 + 항목 가로 안쪽 여백 + 항목 가로 여백 + 항목 테두리 두께
기본 셀 높이 = 항목 높이 + 항목 세로 안쪽 여백 + 항목 세로 여백 + 항목 테두리 두께

JJ657974.wedge(ko-kr,WIN.10).gif 단일 셀에 있는 항목 크기를 정의하려면

가장 작은 항목의 크기를 정의해보겠습니다. CSS(CSS 스타일시트) 파일에서 "smallListIconTextItem".
```
.smallListIconTextItem
{

}     
```
이라는 CSS 클래스를 만듭니다.
가장 작은 항목은 셀 하나만 차지합니다. 항목 너비를 300px로, 높이를 70px로, 안쪽 여백을 5px로 설정해보겠습니다.
```
.smallListIconTextItem
{
    width: 300px;
    height: 70px;
    padding: 5px;
    overflow: hidden;
    background-color: Pink;
    display: -ms-grid;
}    
```
이러한 수치를 수식에 넣어 기본 셀 크기가 맞는지 계산해봅니다.
- 셀 너비 = 항목 너비 + 왼쪽 안쪽 여백 + 오른쪽 안쪽 여백 + 테두리 두께 + 왼쪽 여백 + 오른쪽 여백 = 300 + 5px + 5px + 0 + 0 + 0 = 310
- 셀 높이 = 항목 높이 + 위쪽 안쪽 여백 + 아래쪽 안쪽 여백 + 테두리 두께 + 위쪽 여백 + 아래쪽 여백 = 70px + 5px + 5px + 0 + 0 + 0= 80
기본 셀 크기와 일치하므로 다음 단계를 계속 살펴보겠습니다.

4단계: 2개 이상의 셀에 걸쳐 있는 항목 크기 정의

하나 이상의 셀에 걸쳐 있는 항목 크기를 결정할 때는 걸쳐 있는 셀 사이의 win-container 여백도 고려해야 합니다. 예를 들어 항목 하나가 가로로는 하나의 셀에 걸쳐 있지만 세로로는 두 개의 셀에 걸쳐 있는 경우 전체 항목 크기에는 아래와 같이 첫 번째 셀의 win-container 아래쪽 여백과 두 번째 셀의 win-container 위쪽 여백이 포함됩니다.

두 개의 셀에 걸쳐 있는 항목

다음은 여러 셀에 걸쳐 있는 항목의 전체 항목 크기를 계산하는 수식입니다.

전체 항목 너비 = number of cells * 기본 셀 너비 + (number of cells - 1) * (win-container 왼쪽 여백 + win-container 오른쪽 여백)
전체 항목 높이 = number of cells * 기본 셀 높이 + (number of cells - 1) * (win-container 위쪽 여백 + win-container 아래쪽 여백)

팁 win-container 여백은 기본적으로 5픽셀입니다.

JJ657974.wedge(ko-kr,WIN.10).gif 두 개의 셀에 세로로 걸쳐 있는 항목 크기를 정의하려면

다음 수식을 사용하여 전체 항목 높이를 결정합니다.

전체 항목 높이 = number of cells * 기본 셀 높이 + (number of cells - 1) * (win-container 위쪽 여백 + win-container 아래쪽 여백) = 2 * 80 + (2-1) * (5 + 5) = 170
해당 크기 항목을 지정하는 CSS 스타일을 만듭니다. 다음 예제에서는 높이가 160픽셀이고 안쪽 여백이 5픽셀인 항목을 정의합니다. 이 항목의 전체 높이는 160 + 5 + 5 = 170이 됩니다. 이 항목은 가로로 하나의 셀만 차지하므로 3단계, smallListIconTextItem에서 만든 CSS 클래스와 같은 너비 및 안쪽 여백을 지정합니다.
```
.mediumListIconTextItem
{
    width: 300px;
    height: 160px;
    padding: 5px;
    overflow: hidden;
    background-color: LightGreen;
    display: -ms-grid;
}
```

JJ657974.wedge(ko-kr,WIN.10).gif 세 개의 셀에 세로로 걸쳐 있는 항목 크기를 정의하려면

다음 수식을 사용하여 전체 항목 높이를 결정합니다.

전체 항목 높이 = number of cells * 기본 셀 높이 + (number of cells - 1) * (win-container 위쪽 여백 + win-container 아래쪽 여백) = 3 * 80 + (3-1) * (5 + 5) = 260
해당 크기 항목을 지정하는 CSS 스타일을 만듭니다. 다음 예제에서는 높이가 250픽셀이고 안쪽 여백이 5픽셀인 항목을 정의합니다. 이 항목의 전체 높이는 250 + 5 + 5 = 260이 됩니다.
```
.largeListIconTextItem
{
    width: 300px;
    height: 250px;
    padding: 5px;
    overflow: hidden;
    background-color: LightBlue;
    display: -ms-grid;
}
```

5단계: CellSpanningLayout에 대한 항목 크기 조정 함수 만들기

groupInfo 함수 외에도 CellSpanningLayout은 데이터 원본에서 다양한 '유형'의 항목 크기를 조정하는 방법을 결정하는 itemInfo 함수를 노출해야 합니다. itemInfo 함수는 다음 속성이 포함된 JavaScript 개체를 반환해야 합니다.

width
ListView에서 개별 항목의 너비
height
ListView에서 개별 항목의 높이

JJ657974.wedge(ko-kr,WIN.10).gif Listview에서 개별 항목의 크기를 정의하려면

데이터를 만든 JavaScript 파일에서 데이터 원본의 항목을 검색하고 해당 항목의 크기와 높이를 반환하는 itemInfo 함수를 만듭니다.

// Item info function that returns the size of a cell spanning item
var itemInfo = WinJS.Utilities.markSupportedForProcessing(function itemInfo(itemIndex) {
    var size = { width: 310, height: 80 };

    // Get the item from the data source
    var item = DataExamples.myCellSpanningData.getAt(itemIndex);
    if (item) {

        // Get the size based on the item type
        switch (item.type) {
            case "smallListIconTextItem":
                size = { width: 310, height: 80 };
                break;

            case "mediumListIconTextItem":
                size = { width: 310, height: 170 };
                break;

            case "largeListIconTextItem":
                size = { width: 310, height: 260 };
                break;

            default:
        }
    }
    return size;
});

itemInfo는 WinJS.Utilities.markSupportedForProcessing 호출로 래핑되어 HTML에서 함수에 액세스할 수 있게 합니다.

네임스페이스를 통해 itemInfo 함수를 노출하여 공개적으로 액세스할 수 있도록 합니다. 이 예제에서는 1.1단계에서 만든 DataExamples 네임스페이스를 업데이트합니다.
```
WinJS.Namespace.define("DataExamples",
    {
        myCellSpanningData: myCellSpanningData,
        groupInfo: groupInfo,
        itemInfo: itemInfo
});
```

itemInfo 함수를 사용하도록 ListView를 업데이트합니다.

<div id="myListView" 
    data-win-control="WinJS.UI.ListView" 
    data-win-options="{ 
        itemDataSource: DataExamples.myCellSpanningData.dataSource, 
        layout: {  
            groupInfo: DataExamples.groupInfo,
            itemInfo: DataExamples.itemInfo,
            type: WinJS.UI.CellSpanningLayout
        } 
    }"
></div>

6단계: 템플릿 만들기

마지막 단계는 방금 정의한 CSS 클래스를 사용하는 템플릿이나 템플릿 함수를 만드는 것입니다. 다음은 WinJS.Binding.Template과 템플릿 함수를 만드는 방법입니다.

JJ657974.wedge(ko-kr,WIN.10).gif 옵션 A: WinJS.Binding.Template 사용

HTML에서 WinJS.Binding.Template.

<div id="myItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div>
        <img src="#" class="regularListIconTextItem-Image" data-win-bind="src: picture" />
        <div class="regularListIconTextItem-Detail">
            <h4 data-win-bind="innerText: title"></h4>
            <h6 data-win-bind="innerText: text"></h6>
        </div>
     </div>
 </div>

를 정의합니다.

1.1단계에서 데이터를 정의할 때 각 항목에 할당되는 CSS 클래스를 지정하는 type 속성을 어떻게 포함했는지 기억해 보세요. 이제 이 데이터를 사용할 수 있습니다. 항목의 루트 요소에서 클래스 이름을 데이터의 type 필드 값에 바인딩합니다.
```
<div id="myItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div data-win-bind="className: type">
        <img src="#" class="regularListIconTextItem-Image" data-win-bind="src: picture" />
        <div class="regularListIconTextItem-Detail">
            <h4 data-win-bind="innerText: title"></h4>
            <h6 data-win-bind="innerText: text"></h6>
        </div>
    </div>
</div>
```
참고 이 예제에서는 class.가 아닌 className에 바인딩합니다. HTML에서 "클래스"를 사용하지만 지원 JavaScript 속성 이름은 "className"으로 지정되기 때문입니다. 앱은 data-win-bind 특성을 처리할 때 바인딩된 값을 JavaScript 호출을 통해 할당합니다.

즉, HTML 특성 이름과 지원 JavaScript 속성 이름이 다를 경우 data-win-bind를 설정할 때 JavaScript 속성을 사용하게 됩니다.

itemTemplate 속성을 템플릿의 ID로 설정하여 템플릿을 사용하도록 ListView를 업데이트합니다.

<div id="listView"
     data-win-control="WinJS.UI.ListView"
     data-win-options="{
         itemDataSource: DataExamples.myCellSpanningData.dataSource,
         itemTemplate: select(#'myItemTemplate'),
         layout: {
             groupInfo: DataExamples.groupInfo,
             itemInfo: DataExamples.itemInfo,
             type: WinJS.UI.CellSpanningLayout
    }
}"></div

원할 경우 WinJS.Binding.Template 대신 템플릿 함수를 사용할 수 있습니다. 템플릿 함수를 사용하면 HTML을 생성하고 크기를 할당할 때 훨씬 더 유연하게 작업할 수 있습니다.

JJ657974.wedge(ko-kr,WIN.10).gif 옵션 B: 템플릿 함수 사용

JavaScript 파일에서 템플릿 함수를 정의합니다. 데이터를 포함하는 동일한 파일에 이 코드를 추가하거나 다른 파일에 추가할 수 있습니다. ListView를 포함하는 페이지가 이 파일을 참조하도록 합니다.

이 예제에서는 각 항목에 대한 type 데이터를 사용하여 크기를 결정하는 CSS 클래스에 할당합니다.

var myCellSpanningJSTemplate = function myCellSpanningJSTemplate(itemPromise) {
    return itemPromise.then(function (currentItem) {
        var result = document.createElement("div");

        // Use source data to decide what size to make the
        // ListView item
        result.className = currentItem.data.type;
        result.style.overflow = "hidden";

        // Display image
        var image = document.createElement("img");
        image.className = "regularListIconTextItem-Image";
        image.src = currentItem.data.picture;
        result.appendChild(image);

        var body = document.createElement("div");
        body.className = "regularListIconTextItem-Detail";
        body.style.overflow = "hidden";
        result.appendChild(body);

        // Display title
        var title = document.createElement("h4");
        title.innerText = currentItem.data.title;
        body.appendChild(title);

        // Display text
        var fulltext = document.createElement("h6");
        fulltext.innerText = currentItem.data.text;
        body.appendChild(fulltext);

        return result;
    });
};

태그를 통해 액세스할 수 있게 함수에 대해 markSupportedForProcessing을 호출합니다.
```
WinJS.Utilities.markSupportedForProcessing(myCellSpanningJSTemplate);
```

WinJS.Namespace.define을 사용하여 이 함수를 공개적으로 액세스 가능하게 만듭니다.

WinJS.Namespace.define("Templates",
    {
        myCellSpanningJSTemplate: myCellSpanningJSTemplate
    });

HTML에서 해당 itemTemplate 속성을 템플릿 함수의 이름으로 설정하여 템플릿 함수를 사용하도록 ListView를 업데이트합니다.

<div id="myListView" 
    data-win-control="WinJS.UI.ListView" 
    data-win-options="{ 
        itemDataSource: DataExamples.myCellSpanningData.dataSource,
        itemTemplate:  Templates.myCellSpanningJSTemplate
        layout: {  
            groupInfo: DataExamples.groupInfo,
            itemInfo: DataExamples.itemInfo,
            type: WinJS.UI.CellSpanningLayout
        } 
    }"
></div>

사용하는 템플릿 접근 방식에 관계없이 앱을 실행하면 ListView에서 여러 크기의 항목을 표시합니다.

여러 크기의 항목이 포함된 ListView

설명

항목 편집

셀 스패닝이 사용하도록 설정된 ListView에서 항목을 변경하는 경우 변경할 때마다 ListView.recalculateItemPosition을 호출합니다.

데이터 원본이 WinJS.Binding.List이면 편집한 직후에(예: List.push 또는 List.splice 호출 후) recalculateItemPosition을 호출합니다.
데이터 원본이 사용자 지정 VirtualizedDataSource이면 beginEdits를 호출하고 편집한 다음 recalculateItemPosition을 호출한 다음 endEdits를 호출합니다.

다음을 통해 공유