빠른 시작: 앱 바 스타일 지정(HTML)

Applies to Windows and Windows Phone

이 빠른 시작에서는 앱 바 및 해당 컨트롤의 스타일 지정 방법에 대한 몇 가지 예를 제공합니다.

사전 요구 사항

소개

빠른 시작: 컨트롤 스타일 지정에서는 JavaScript용 Windows 라이브러리 스타일시트가 앱에 Windows 8 모양과 느낌을 자동으로 제공하는 스타일 집합을 제공하는 방법에 대해 설명합니다. 다음 예제에서는 CSS(CSS 스타일시트)를 사용하여 일부 앱 바 스타일을 사용자 지정하는 방법을 보여 줍니다.

밝은 테마 및 어두운 테마

앱에 대해 밝거나 어두운 스타일시트를 선택하면 앱의 다른 컨트롤뿐만 아니라 앱 바의 모양에도 영향을 줍니다. 이 샘플 앱 바의 경우:


<div data-win-control="WinJS.UI.AppBar">
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{icon:'home', label:'Home', onclick:null, section:'global', type:'button'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{icon: 'sort', label:'Sort', type:'button'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{icon: 'more', label:'More', type:'flyout'}"></button>
</div>

어두운 스타일시트 선택:


<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">

다음과 같은 모양의 앱 바가 생성됩니다.

어두운 스타일 앱 바

밝은 스타일시트:


<link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet">

다음과 같은 모양의 앱 바가 생성됩니다.

밝은 스타일 앱 바

유용한 CSS 속성

다음은 앱 바 컨트롤에서 일반적으로 사용되는 CSS 속성입니다.

  • Border-color: 앱 바의 테두리 색을 제어합니다.

    예를 들면 border-color: rgb(255, 224, 100);와 같습니다.

  • Background-color 앱 바의 배경색을 제어합니다.

    예를 들면 background-color: rgb(255, 224, 100);와 같습니다.

공통 부분 및 상태 선택기

다음은 컨트롤의 부분 및 상태에 스타일을 지정하는 데 유용한 몇 가지 CSS 선택기입니다.

  • .win-command앱 바 명령 레이블에 스타일을 지정합니다.
    
    .win-appbar .win-command
    {
        color: rgb(28, 160, 218);
    }
    
    

    색상이 지정된 명령 레이블이 있는 단추

  • .win-commandimage단추의 아이콘 이미지에 스타일을 지정합니다.
    
    .win-appbar .win-commandimage
    {
        color: rgb(28, 160, 218);
    }
    
    

    색상이 지정된 명령 아이콘이 있는 단추

  • .win-commandring단추의 이미지 주위에 있는 원에 스타일을 지정합니다.
    
    .win-appbar .win-commandring
    {
        border-color: rgb(28, 160, 218);
    }
    
    

    색상이 지정된 원이 있는 단추

의사 클래스

다음과 같은 Pseudo_classes를 선택기로 사용하여 특정 상태에 있는 앱 바 단추의 스타일을 지정할 수 있습니다.

  • :hover - 사용자가 아이콘 위에 커서를 놓지만 클릭하여 활성화하지는 않습니다. 가리키고 있는 동안 아이콘 레이블의 도구 설명이 기본적으로 표시됩니다.

    가리키고 있는 동안 표시되는 홈 단추 위의 도구 설명

  • :active - 아이콘은 사용자가 컨트롤을 누른 시간과 옵션을 선택한 시간 사이에 활성 상태입니다.

    활성 홈 단추

  • :disabled - 아이콘이 사용자 조작을 수락할 수 없습니다. 이 의사 클래스의 경우 아이콘의 disabled 속성을 "disabled"로 설정해야 합니다.

    비활성화된 홈 단추

사용자 지정 색상으로 앱 바 스타일 지정

앱 바 스타일 지정에 대한 추가 예제입니다.


.win-appbar
{
    background-color: yellow;
    border: 3px solid blue;
}

.win-appbar .win-commandimage
{
    color: red;
}

다음과 같은 앱 바 색상이 생성됩니다.

노란색 앱 바

요약

이 빠른 시작에서는 앱 바 및 해당 컨트롤의 스타일 지정에 대한 몇 가지 예를 제공했습니다.

관련 항목

WinJS.UI.AppBar
WinJS.UI.AppBarCommand
AppBarIcon

 

 

표시:
© 2014 Microsoft