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

아티클
03/04/2016

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

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

사전 요구 사항

빠른 시작: FlipView 추가

FlipView에서 스타일을 지정할 수 있는 부분

대부분의 JavaScript용 Windows 라이브러리 컨트롤과 마찬가지로, FlipView도 컨트롤의 특정 부분에 스타일을 지정하는 데 사용할 수 있는 CSS 클래스 집합을 제공합니다. 예를 들어 FlipView 컨트롤의 왼쪽 탐색 단추에 스타일을 지정하려면 win-leftnav CSS 클래스를 재정의합니다.

다음은 FlipView 컨트롤에서 스타일을 지정할 수 있는 부분의 다이어그램입니다.

FlipView 컨트롤에서 스타일을 지정할 수 있는 부분

FlipView 자체에 스타일 지정

FlipView를 만들려면 div 요소를 만들고 data-win-control 속성을 "WinJS.UI.FlipView"로 설정합니다. 다른 모든 요소에 CSS 스타일을 적용하는 것과 마찬가지로 이 div 요소(호스트 요소)에도 적용할 수 있습니다. 실제로는 항상 호스트 div 요소의 width 및 height를 지정합니다.

 <div id="basicFlipView" 
    style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ 
        itemDataSource: DefaultData.bindingList.dataSource, 
        itemTemplate: select('#simpleItemTemplate'),
        orientation: 'horizontal' 
    }">
</div>

기본 스타일이 적용된 FlipView 컨트롤

win-flipview 클래스를 사용하여 전체 FlipView에 스타일을 지정할 수도 있습니다. FlipView를 만들면 이 클래스가 호스트 div 요소에 추가됩니다.

FlipView 컨트롤의 탐색 단추에 스타일 지정

FlipView에는 네 개의 탐색 단추가 있습니다. FlipView 컨트롤의 orientation이 "horizontal"이면 왼쪽 및 오른쪽 탐색 단추를 사용합니다. orientation이 "vertical"이면 위쪽 및 아래쪽 탐색 단추를 사용합니다. 다음은 FlipView 컨트롤의 탐색 단추에 스타일을 지정하는 데 사용할 수 있는 부분입니다.

win-navbottom
아래쪽 탐색 단추에 스타일을 지정합니다.
win-navbutton
모든 탐색 단추에 스타일을 지정합니다.
win-navleft
왼쪽 탐색 단추에 스타일을 지정합니다.
win-navright
오른쪽 탐색 단추에 스타일을 지정합니다.
win-navtop
위쪽 탐색 단추에 스타일을 지정합니다.

다음 예제에서는 왼쪽 탐색 단추를 빨간색으로 만들고 검정색 테두리를 지정합니다.

#styledHorizontalFlipview .win-navleft {
    background-color: red;
    border: 2px solid black;
}

<div id="styledHorizontalFlipview" 
    style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ 
        itemDataSource: DefaultData.bindingList.dataSource, 
        itemTemplate: select('#simpleItemTemplate'),
        orientation: 'horizontal' 
    }">
</div>

스타일이 지정된 왼쪽 탐색 단추가 있는 FlipView

탐색 단추의 스타일을 지정하기 위한 의사 클래스

의사 클래스를 선택기로 사용하여 특정 상태에 있는 탐색 단추의 스타일을 지정할 수 있습니다. 다음은 탐색 단추의 스타일을 지정하는 데 사용할 수 있는 유용한 의사 클래스 중 일부입니다.

win-navbutton:hover
사용자가 FlipView 컨트롤의 탐색 단추를 커서로 가리키지만 클릭하여 활성화하지 않을 때 탐색 단추에 스타일을 적용합니다.

이 예제에서는 가리킨 상태에 있는 탐색 단추에 대한 스타일을 정의합니다.

#styledHorizontalFlipview .win-navbutton:hover {
    background-color: orange;
    border: 2px solid white;
}

<div id="styledHorizontalFlipview" 
    style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ 
        itemDataSource: DefaultData.bindingList.dataSource, 
        itemTemplate: select('#simpleItemTemplate'),
        orientation: 'horizontal' 
    }">
</div>

win-navbutton:active
FlipView 컨트롤의 탐색 단추가 활성 상태일 때 단추에 스타일을 적용합니다. 탐색 단추는 사용자가 컨트롤을 누른 시간과 컨트롤을 해제하는 시간 사이에 활성 상태입니다. 사용자가 컨트롤을 누르고 포인터를 단추 밖으로 끌면 사용자가 포인터를 해제할 때까지 컨트롤이 활성 상태를 유지합니다.

다음 예제에서는 활성 탐색 단추의 배경색을 변경합니다.
```
#styledHorizontalFlipview .win-navbutton:active {
    background-color: limegreen;
}
```
```
<div id="styledHorizontalFlipview" 
    style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ 
        itemDataSource: DefaultData.bindingList.dataSource, 
        itemTemplate: select('#simpleItemTemplate'),
        orientation: 'horizontal' 
    }">
</div>
```

항목 스타일 지정

항목에 스타일을 지정하는 한 가지 방법은 CSS를 사용하여 템플릿 자체의 HTML 요소에 스타일을 지정하는 것입니다.

다음 예제에서는 CSS를 사용하여 템플릿 자체에 스타일을 지정합니다.

.itemStyling p {
    margin-left: 120px;
}

.simpleItemTemplateRoot {
    width: 480px; 
    height: 310px;
}

.simpleItemTemplateImage {
    height: 270px; 
    width: 480px;
}

.simpleItemTemplateText {
    height: 40px; 
    padding: 5px;
}

 <div id="simpleItemTemplate" 
     data-win-control="WinJS.Binding.Template" 
     style="display: none">
    <div class="simpleItemTemplateRoot">
        <img class="simpleItemTemplateImage"
             src="#" 
             data-win-bind="src: picture; alt: title"
             />       
        <div class="simpleItemTemplateText" 
            data-win-bind="innerText: title" >
        </div>     
    </div>
</div>
  
 <div id="basicFlipView" 
    style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ 
        itemDataSource: DefaultData.bindingList.dataSource, 
        itemTemplate: select('#simpleItemTemplate'),
        orientation: 'horizontal' 
    }">
</div>

win-item CSS 클래스를 사용하여 항목이 포함된 div 요소에 스타일을 지정할 수도 있습니다.