AppBar 및 ToolBar 스타일 지정(HTML)

  • 아티클

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

AppBar 또는 ToolBar 및 해당 컨트롤의 스타일을 지정하는 방법의 예를 제공합니다.

사전 요구 사항

소개

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

밝은 테마 및 어두운 테마

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

<div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'bottom'}">
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdAdd',disabled:'true',label:'Add',icon:'add',tooltip:'Add item',section:'primary',type:'flyout',
          flyout:select('#addFlyout'),onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',tooltip:'Remove item',section:'primary',
          onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdEdit',label:'Edit',icon:'edit',tooltip:'Edit item',section:'primary',onclick:Sample.outputCommand}">
          </button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',tooltip:'Take a picture',section:'primary',
          onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdSettings',label:'Settings',icon:'settings',tooltip:'Settings',section:'primary',
          onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdShare',label:'Share',icon:'reshare',tooltip:'Share',section:'primary',onclick:Sample.outputCommand}">
          </button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdPrint',label:'Print',section:'secondary',onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdNetwork',label:'Network',section:'secondary',onclick:Sample.outputCommand}"></button>
    </div>

어두운 스타일시트의 선택:

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

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

어두운 스타일 앱 바

밝은 스타일시트 선택:

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

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

밝은 스타일 앱 바

ToolBar는 동일한 스타일시트를 사용하여 모양이 비슷합니다.

유용한 CSS 속성

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

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

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

  • Background-colorAppBar의 배경색을 제어합니다.

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

참고  이러한 값은 일반적으로 ui-light.css 또는 ui-dark.css로 미리 설정됩니다.

 

공통 부분 및 상태 선택기

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

  • .win-command AppBar 명령 레이블에 스타일을 지정:

    .win-appbar .win-command
{
    color: rgb(28, 160, 218);
}

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

    참고  사용자가 줄임표를 터치 또는 클릭하여 AppBar를 열어야 이 효과를 볼 수 있습니다. 명령 레이블은 기본적으로 숨겨져 있습니다.

     

  • .win-commandimage 단추의 아이콘 이미지에 스타일 지정:

    .win-appbar .win-commandimage
{
    color: rgb(28, 160, 218);
}

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

의사 클래스

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

  • :hover - 사용자가 단추 아이콘 위에 커서를 두고 클릭하여 활성화하지 않으면 커서를 단추 밖으로 이동할 때까지 단추의 배경색이 변경됩니다. 마우스로 가리키고 있는 동안에는 기본적으로 단추의 도구 설명도 표시됩니다.

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

  • :active - 사용자가 컨트롤을 누른 시간과 옵션을 선택한 시간 사이 또는 단추가 type="toggle"로 설정된 경우 단추가 활성 상태입니다.

    활성 카메라 단추

  • :disabled - 아이콘 색상이 변경되면 단추에서 사용자 조치를 수락할 수 없음을 나타냅니다. 이 의사 클래스가 적용되려면 단추의 disabled 속성을 "disabled"로 설정해야 합니다.

    비활성화된 홈 단추

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

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

.win-appbar .win-appbar-actionarea
{
   background-color: yellow;
}


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

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

노란색 앱 바

넘침 영역의 배경색 스타일 지정은 다음과 같습니다.

.win-appbar .win-appbar-overflowarea
{
   background-color: green;
}

동일한 방식으로 Toolbar의 스타일을 지정하면 다음과 같게 됩니다.

.win-toolbar win-toolbar-overflowarea{
   background-color: green;
}

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

.win-toolbar win-toolbar-overflowarea
{
   background-color: green;
}

방지할 스타일 지정

CSS를 사용하여 AppBars 및 ToolBars의 모양과 느낌을 변경할 수 있습니다. 특히 AppBar와 ToolBar 애니메이션이 원활하게 작동할 수 있습니다. 다음은 알려진 위험 영역입니다.

  • padding — 기본값을 변경하지 마세요.

  • border — 기본값을 변경하지 마세요.

  • margin — ToolBar와 AppBar 요소에서만 여백의 스타일을 고르게 지정:

    .win-toolbar, .win-appbar {
   margin: 3px;
}

  • background-color — 스타일 지정은 다음과 같이 작업 영역과 넘침 영역에서 안전하게 수행할 수 있습니다.

    .win-toolbar-actionarea, .win-appbar-actionarea {
   background-color: rgb(0,0,127);
}
.win-toolbar-overflowarea, .win-appbar-overflowarea {
   background-color: rgb(0,0,255);

  • position,  float — ToolBar 요소에서 직접 이러한 CSS 특성의 스타일을 지정할 수 없으며, 해당 규칙의 스타일을 지정하는 부모 요소에서 ToolBar를 래핑할 수 있습니다. 참고  이 제한 사항은 AppBar에 적용되지 않습니다.

     

알려진 문제

  1. ToolBar 숨기기 - ToolBar 구성 요소는 공용 API를 사용해서만 숨겨야 합니다. "umbrella" CSS 클래스를 사용하여 보기에서 여러 구성 요소를 숨기는 것이 일반적인 방법이지만 ToolBar(또는 AppBar)에는 좋은 방법이 아닙니다. 문제는 명령이 표시되는지 여부를 알리는 데 DOM을 사용하지 않고 명령의 상태를 캐시하도록 ToolBar의 성능이 최적화되어 있기 때문입니다. 따라서 사용 가능한 활성 영역에 적합하지 않을 때 Toolbar를 조정하고 명령을 오버플로할 수 있으며, 동시에 DOM에서 읽을 때 자원이 많이 드는 브라우저 레이아웃이 발생하지 않게 됩니다. CSS를 사용하여 단추의 스타일을 숨겨짐으로 지정하면 ToolBar에서 일부 명령이 숨겨짐으로 설정되었음을 인식하지 않으며, 창의 크기를 조정할 때 ToolBar의 활성 영역에서 사용 가능한 공간이 축소되므로 명령 오버플로를 너무 일찍 시작하게 됩니다.

    대신 Command.hidden 속성만 설정하거나 ToolBar.showOnlyCommands() 메서드를 호출하여 ToolBar의 명령을 표시하고 숨겨야 합니다.

  2. 적응형 오버플로 오류 - ToolBar 요소를 "콘텐츠에 맞게 크기 조정"으로 만들면 ToolBar의 적응형 오버플로 동작이 제대로 작동하지 않습니다.

    예를 들어 ToolBar 구성 요소는 다른 구성 요소 내부에 있도록 설계되어 있습니다(일반적으로 다른 div 요소에 중첩됨). 일반적으로 고유 div에서 ToolBar는 부모 너비의 100%를 차지합니다. 그러나 부모가 사용하는 CSS 레이아웃에서 몇 가지 플렉스 상자에 중첩되어 있으며 transportcontrols 클래스에서 align-items:center;를 사용하여 ToolBar가 명령의 너비까지로만 설정되도록 하면 예상치 못한 동작이 발생합니다. ToolBar에서 width를 캐시하고 충분한 공간이 없다고 판단되면 명령을 오버플로하기 때문입니다. ToolBar에는 상수 요소 너비가 필요하지만 이 시나리오에 사용된 스타일에서는 유연한 너비를 제공합니다.

    이 시나리오의 해결 방법(ToolBar 숨기기에 대한 솔루션과도 결합됨)은 align-items:stretch;를 사용하도록 부모의 사용자 지정 transportcontrols 클래스를 변경하는 것입니다. 테스트 결과 이 방법이 간단한 솔루션으로 판별되었지만 특정 이유로 인해 align-items를 변경할 수 없으면 align-self:stretch를 직접 ToolBar 요소에 두어 문제를 해결할 수 있습니다.

요약 및 다음 단계

이 문서에는 AppBar와 ToolBar의 스타일을 지정하는 몇 가지 예와 해당 컨트롤이 표시되어 있습니다. 응용 프로그램에서 AppBars 및 ToolBars를 사용할 때 문제점을 피할 수 있도록 유의해야 할 몇 가지 디자인 문제에 대한 정보도 제공되어 있습니다.

WinJS 시도 웹 사이트에서 AppBars 및 ToolBars의 스타일을 지정하는 데 관한 —실습— 내용을 자세히 알아보세요. 코드를 사용하여 결과를 즉시 확인해 보세요.

관련 항목

WinJS.UI.ToolBar

WinJS.UI.AppBar

WinJS.UI.AppBarCommand

AppBarIcon