진행률 컨트롤의 스타일을 지정하는 방법(HTML)

아티클
03/04/2016

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

CSS 스타일시트 및 JavaScript용 Windows 라이브러리 스타일시트를 사용하여 progress 컨트롤의 스타일을 지정하는 방법을 알아봅니다.

알아야 할 사항

기술

사전 요구 사항

여기서는 progress 컨트롤의 세 가지 유형인 확정된 진행률 표시줄, 확정되지 않은 진행률 표시줄 및 확정되지 않은 진행률 표시원을 만드는 방법을 알고 있다고 가정합니다. 다양한 유형의 progress 컨트롤 추가에 대해 알아보려면 빠른 시작: 진행률 컨트롤 추가를 참조하세요.

유용한 CSS 속성

다음 CSS 속성은 progress 컨트롤의 스타일을 지정하는 데 특히 유용합니다.

width
진행률 컨트롤의 너비를 지정합니다. 확정되지 않은 진행률 표시원의 경우 너비와 높이가 동일해야 합니다.
height
진행률 컨트롤의 높이를 지정합니다. 확정되지 않은 진행률 표시원의 경우 너비와 높이가 동일해야 합니다.
color
확정된 진행률 표시줄의 표시줄 부분 색과 확정되지 않은 진행률 표시줄 및 확정되지 않은 진행률 표시원의 점 색을 지정합니다.

다음 예제에서는 파란색 표시줄이 있는 확정된 progress 표시줄을 만듭니다.
```
<progress value="0.4" style="color: blue"  />
```

진행률 컨트롤의 스타일을 지정하기 위한 의사 요소

progress 컨트롤은 컨트롤의 스타일 관련 부분에 대해 선택기로 사용할 수 있는 다음과 같은 의사 요소를 제공합니다.

::-ms-fill
확정된 progress 컨트롤의 표시줄 부분에 하나 이상의 스타일을 적용하고 확정되지 않은 진행률 컨트롤의 애니메이션을 지정합니다.

animation-name 스타일 속성을 제외한 모든 스타일이 확정된 진행률 표시줄의 표시줄 부분에 적용되어 확정되지 않은 진행률 표시줄 및 표시원의 애니메이션을 제어합니다.

다음 예제에서는 progress 컨트롤이 확정되지 않은 진행률 표시원으로 나타나도록 합니다.
```
/* Show the ring animation. This setting only works when
   you specify the width and height of the progress control */
#my-progress-ring::-ms-fill { animation-name: -ms-ring; }
```

의사 요소 및 다른 선택기를 함께 사용하는 다양한 방법에 대한 자세한 내용은 CSS 선택기 이해를 참조하세요.

진행률 컨트롤의 스타일을 지정하기 위한 의사 클래스

이 컨트롤은 컨크롤이 특정 상태일 때 스타일을 지정하기 위한 선택기로 사용할 수 있는 다음과 같은 의사 클래스를 지원합니다.

:indeterminate
하나 이상의 스타일을 확정되지 않은 상태의 progress 컨트롤에 적용합니다.

다음 예제에서는 확정되지 않은 progress 컨트롤의 스타일을 정의합니다.
```
progress:indeterminate {
    /* styling here */
}
```

의사 클래스 및 다른 선택기를 함께 사용하는 다양한 방법에 대한 자세한 내용은 CSS 선택기 이해를 참조하세요.

진행률 컨트롤의 스타일 지정을 위한 WinJS CSS 클래스

WinJS는 progress 컨트롤의 스타일을 지정하기 위한 여러 가지 CSS 클래스를 제공합니다.

이러한 클래스를 사용하려면 컨트롤의 class 특성을 클래스 이름으로 설정하세요. 여러 클래스를 한 요소에 할당할 수 있습니다. 공백으로 클래스 이름을 구분하면 됩니다. 다음 예제에서는 win-ring 및 win-large 클래스를 progress 컨트롤에 적용합니다.

<progress class="win-ring win-large" />

WinJS는 progress 컨트롤의 스타일을 지정하기 위한 다음과 같은 CSS 클래스를 제공합니다.

win-error
확정된 progress 표시줄을 일시 중지하고 오류 스타일로 표시합니다.
win-large
progress 컨트롤을 크게 만듭니다. 전체 화면 모달 작업에 이 스타일을 사용합니다.
win-medium
progress 컨트롤을 중간 크기로 만듭니다. 20pt 텍스트 옆에 진행률 표시원을 표시하려면 이 클래스를 사용합니다.
win-paused
확정된 progress 표시줄의 진행률을 일시 중지합니다.
win-ring
progress 컨트롤을 확정되지 않은 진행률 표시원으로 표시합니다. width 및 height 속성을 설정하거나 win-medium 또는 win-large 클래스를 사용하여 progress 컨트롤의 너비 및 높이를 지정해야 합니다.

Share via