ListView 및 관련 항목 스타일 지정(HTML)

아티클
03/04/2016

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

다양한 방법으로 ListView를 사용자 지정할 수 있습니다. ListView 자체, 그 안에 포함된 항목 또는 이러한 항목으로 구성된 템플릿에 스타일을 지정할 수 있습니다.

JavaScript용 Windows 라이브러리 CSS 클래스 사용

JavaScript용 Windows 라이브러리 컨트롤과 마찬가지로, ListView는 모양과 느낌을 사용자 지정할 수 있는 클래스 집합을 제공합니다. 다음 섹션에서는 이러한 클래스를 사용하여 ListView를 사용자 지정하는 방법을 설명합니다.

ListView 자체에 스타일 지정

ListView에 포함된 항목에 스타일을 지정하는 방법을 살펴보기 전에 ListView 자체에 스타일을 지정하는 방법부터 알아보겠습니다. ListView에 스타일을 지정하는 데 사용되는 기본 클래스는 다음과 같습니다.

win-listview: 전체 ListView에 스타일을 지정합니다.
win-viewport: 뷰포트에 스타일을 지정합니다. 여기에는 필요할 경우 스크롤 막대가 표시됩니다.
win-surface: ListView의 스크롤 가능한 영역에 스타일을 지정합니다. 화면이 뷰포트보다 더 크면 뷰포트에 스크롤 막대가 표시됩니다.

다음은 그룹화된 항목이 포함된 일반적인 ListView의 예입니다.

그룹화된 항목이 포함된 ListView

다음 그림은 win-listview, win-viewport 및 win-surface 파트가 강조 표시되어 있는 동일한 ListView를 보여 줍니다.

ListView의 기본 구성 요소

일반 스타일 권장 사항

항상 ListView에 ID를 할당하고 다음 예제와 같이 CSS 선택기의 시작 부분에 해당 ID를 포함합니다.

#myListView .win-listview {
    background-image: url('../images/icecream.png'); 
    border: 2px solid red;
}

ListView 컨트롤에는 많은 기본 스타일이 있습니다. 스타일 중 하나를 재정의해도 아무 효과가 없으면 CSS 선택기가 기본 스타일을 재정의할 만큼 특정적이지 않을 수 있습니다.

전체 ListView 컨트롤에 스타일 지정

ListView 컨트롤에 내부 항목 뒤에 표시되는 고정 배경 이미지를 추가하려는 경우 또는 테두리를 전체 컨트롤에 적용하려는 경우에는 win-listview 클래스를 다시 정의합니다. 다음 예제에서는 ListView에 이미지 배경과 빨간색 테두리를 적용합니다.

#myListView .win-listview {
    background-image: url('../images/icecream.png'); 
    border: 2px solid red;
}

ListView의 현재 모양은 다음과 같습니다.

테두리와 배경 이미지가 있는 ListView

ListView의 여백에 스타일 지정

win-surface 클래스를 사용하여 ListView에 여백을 적용합니다. ListView를 호스트하는 div 요소에는 여백을 적용하지 마세요. 스타일이 올바르게 지정되지 않습니다. 대신 win-surface을 사용합니다. win-surface에 여백을 추가하는 경우 ListView의 높이를 적절하게 조정해야 합니다. ListView를 호스트하는 div 요소에 스타일을 지정하여 높이를 설정합니다.

list layout을 사용하는 경우 win-surface에 여백이나 안쪽 여백을 추가하지 마세요.

기본적으로 그룹 헤더에는 70px 왼쪽 여백이 있습니다. 그룹을 표시할 때 win-surface를 재정의하는 경우 왼쪽 여백 70px + 원하는 추가 여백을 지정하는 것이 좋습니다.

스크롤 방향에 따라 뷰포트에 스타일 지정

win-horizontal 및 win-vertical 클래스를 사용하여 세로 또는 가로로 스크롤할 때 ListView에 스타일을 적용할 수 있습니다. 다음 예제에서는 ListView가 가로로 스크롤될 때 뷰포트에 왼쪽 여백을 추가합니다.

#myListView .win-listview .win-viewport.win-horizontal {
    margin-left: 10px;  
}

다음 예제에서는 ListView가 세로로 스크롤될 때 뷰포트에서 왼쪽 여백을 제거합니다. 사이트 뷰 상태인 경우 ListView를 세로 방향으로 설정하는 것이 일반적입니다.


#myListView .win-listview .win-viewport.win-vertical {
    margin-left: 0px; 
}

전체 스크롤 가능한 영역에 스타일 지정

ListView의 스크롤 가능한 부분에 스타일을 지정하려면 win-surface 클래스를 재정의합니다. 다음 예제에서는 사용자가 항목을 스크롤할 때 스크롤되는 배경 이미지를 ListView에 적용합니다.


#myListView .win-listview .win-surface {
    background-image: url('../images/icecream.png'); 
}

화면에 스타일이 지정되어 있는 ListView

로드 진행률 표시기에 스타일 지정

ListView는 항목을 로드하고 있는 동안 progress 표시기를 표시합니다. win-process 클래스를 다시 정의하여 이 표시기에 스타일을 지정할 수 있습니다. 다음 예제에서는 progress 표시기를 숨깁니다.

#myListView .win-listview .win-progress{
    display: none;
}

항목 및 그룹에 스타일 지정

ListView에는 그룹과 항목이 포함됩니다.

각 그룹은 win-groupheader 클래스가 나타내는 그룹 헤더에 포함됩니다.
각 항목은 win-container 클래스가 나타내는 항목 컨테이너에 포함됩니다.

ListView의 그룹 헤더와 컨테이너 구성 요소

항목에 스타일 지정

ListView에 포함된 항목에 스타일을 지정하는 방법에는 두 가지가 있습니다. 항목 템플릿에 스타일을 적용하거나 win-container 클래스를 다시 정의하면 됩니다. 템플릿 안에서만 꼭 해야 할 일이 있는데, 바로 항목 크기를 설정하는 일입니다. 항목의 크기를 설정하지 않으면 원하는 레이아웃을 얻을 수 없습니다.

항목의 크기를 설정하려면:

WinJS.Binding.Template을 사용하는 경우 다음 예제처럼 WinJS.Binding.Template 요소의 자식 크기를 설정합니다.

<!-- The WinJS.Binding.Template element. -->
<div id="templateExample" data-win-control="WinJS.Binding.Template">

    <!-- This is the root element. Be sure to set its width and height. -->
    <div style="width: 120px; height: 125px;">


        <img src="#" data-win-bind="alt: title; src: picture"
            style="width: 60px; height: 60px;" />
        <div>
            <h4 data-win-bind="innerText: title">
            </h4>

            <h6 data-win-bind="innerText: text">
            </h6>
        </div>
    </div>
</div>

템플릿 함수를 사용하는 경우에는 함수에서 반환하는 DOM 요소의 너비와 높이를 설정합니다.

항목 컨테이너에 스타일 지정

항목 컨테이너에 스타일을 지정하려면 win-container 클래스를 재정의합니다. 이 예제에서는 각 항목의 컨테이너에 여백을 추가합니다.

#myListView .win-listview .win-container{
    margin: 2px;
}

win-container에는 스타일을 지정할 수 있는 두 개의 속성(margin 및 background)만 있습니다.

투명 항목을 만들려면 배경색을 투명으로 설정합니다. 이 예제에서는 투명 항목을 만듭니다.

#myListView .win-container:not(.footprint):not(.hover)
{
    background-color: transparent;
}

항목의 여백 및 안쪽 여백에 스타일 지정

항목 사이에 간격을 추가하려면 win-container 클래스에 여백을 설정합니다. 항목 사이에 공간을 만들기 위해 항목에 안쪽 여백을 추가하지 않는 것이 좋습니다. 대신 여백을 사용합니다. 동일한 ListView에 있는 모든 항목에 동일한 여백이 지정되어야 합니다.

ListView에서 항목 표시를 시작한 후에는 win-container의 여백이나 안쪽 여백을 변경하지 마세요.

그룹 헤더에 스타일 지정

그룹 헤더에 스타일을 지정하려면 win-groupheader 클래스를 재정의합니다. 이 예제에서는 그룹 헤더에 회색 배경을 추가합니다.

#myListView .win-listview .win-groupheader {                        
        background-color: #bfbfbf;           
}

스타일이 지정된 그룹 헤더를 포함하는 ListView

항목 상호 작용에 스타일 지정

가리키기 상태에 있는 항목에 스타일 지정

사용자가 포인터를 항목 위로 가져가면 항목이 가리키기 상태로 전환됩니다. 가리킨 상태에 있는 항목의 스타일을 변경하려면 가리키기 의사 클래스를 사용합니다. 이 예제에서는 가리킨 항목의 배경과 윤곽을 변경합니다.

#myListView .win-container:hover {
    background-color: red; 
    outline: orange solid 5px;
}

항목 하나가 가리킨 상태에 있는 ListView

포커스가 있는 항목에 스타일 지정

포커스가 있는 항목에 스타일을 지정하려면 항목 컨테이너에 스타일을 지정할 때 스타일 선택기의 일부로 win-focus 클래스를 사용합니다. 포커스 윤곽에 스타일을 지정하려면 win-focusedoutline 클래스를 사용합니다. 이 예제에서는 포커스가 있는 윤곽을 빨간색 파선으로 변경합니다.

#myListView .focusExample.win-listview .win-focusedoutline {
    outline: red dashed 2px;
                     
}

선택한 항목에 스타일 지정

기본적으로 선택한 항목에는 선택 테두리가 표시됩니다. 선택한 항목에 "채워진" 모양을 지정하려면 win-selectionstylefilled CSS 클래스를 ListView에 연결합니다.

선택한 항목의 모양을 추가로 사용자 지정하려면 다음 클래스를 재정의할 수 있습니다.

win-selectionborder

선택한 항목 주위에 있는 테두리에 스타일을 지정합니다.
win-selectionbackground

선택한 항목의 배경에 스타일을 지정합니다.
win-selectionhint

선택한 항목 뒤에 표시되는 두 번째 확인 표시인 선택 힌트에 스타일을 지정합니다. 항목을 살짝 밀면 선택 힌트가 표시됩니다.
win-selectioncheckmark

선택한 항목 위에 나타나는 확인 표시입니다.
win-selectioncheckmarkbackground

선택한 항목 위에 나타나는 확인 표시의 배경입니다.

또한 항목이 선택된 경우 win-selected 클래스를 스타일 선택기의 일부로 추가하여 항목 컨테이너와 같은 다른 구성 요소를 사용자 지정할 수 있습니다.