빠른 시작: 컨트롤 스타일 지정(HTML)

아티클
03/04/2016

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

JavaScript를 사용하는 Windows 런타임 앱에서 컨트롤의 모양을 사용자 지정하려면 웹 사이트에 사용되는 것과 매우 비슷한 CSS( Cascading Style Sheet) 스타일시트를 사용합니다. 또한 JavaScript를 사용하는 Windows 스토어 앱에서 고급 컨트롤 스타일 지정 기능을 지원하며 JavaScript용 Windows 라이브러리에서 앱을 Windows 8 모양과 느낌으로 쉽게 표현할 수 있도록 도와줄 포괄적인 스타일 집합을 제공합니다.

여기서는 WinJS 스타일시트를 포함하는 방법, HTML 컨트롤(감성 컨트롤)의 스타일을 지정하는 방법, WinJS 컨트롤의 스타일을 지정하는 방법, 그리고 WinJS에서 제공하는 입력 체계 클래스를 사용하는 방법을 보여 줍니다.

앱 기능 전체 프로세스 시리즈의 일부로 이 기능의 작동 방법을 살펴보세요.: Windows 스토어 앱 UI 전체 프로세스

사전 요구 사항

또한 JavaScript로 작성한 Windows 런타임 앱에서 이벤트를 처리하는 방법을 알고 있다고 가정합니다. 권장 이벤트 처리 방법에 대해 알아보려면 빠른 시작: HTML 컨트롤 추가 및 이벤트 처리를 참조하세요.
여기서는 사용자가 WinJS 컨트롤을 작성하고 사용할 수 있다고 가정합니다. 방법을 알아보려면 빠른 시작: WinJs 컨트롤 및 스타일 추가를 참조하세요.
또한 CSS에 대해서도 잘 알고 있어야 합니다. CSS에 대한 자세한 내용은 HTML/CSS/JavaScript 기초를 참조하세요.

JavaScript용 Windows 라이브러리 스타일시트 사용 시 이점

WinJS 스타일시트는 다음과 같은 이점을 제공합니다.

컨트롤의 멋진 모양을 제대로 구현하는 스타일 집합이며 터치 기반 디스플레이에서 잘 작동합니다.
고대비 모드를 자동으로 지원합니다. 고대비를 고려하여 스타일을 디자인했기 때문에 고대비 모드의 장치에서 앱을 실행하는 경우에도 스타일이 올바르게 표시됩니다.
다른 언어를 자동으로 지원합니다. WinJS 스타일시트는 Windows 8에서 지원하는 모든 언어에 대해 올바른 글꼴을 자동으로 선택합니다. 동일한 앱에서 여러 언어를 사용할 수도 있으며 이러한 언어가 올바르게 표시됩니다.
다른 읽기 방향을 자동으로 지원합니다. HTML과 WinJS 컨트롤, 레이아웃 및 스타일이 오른쪽에서 왼쪽 방향으로 읽는 언어에 맞게 자동으로 조정됩니다.

앱의 모양과 느낌 사용자 지정

앱의 모양과 느낌을 사용자 지정하려는 경우 WinJS 스타일을 무시하고 처음부터 다시 만들지는 않습니다. 변경할 스타일을 다시 정의하여 조금씩 변경하는 편이 작업하기 쉽습니다.

실제로 직접 만드는 것보다 WinJS 스타일을 재정의하는 것이 더 낫습니다. 앱을 고대비 모드로 실행하는 경우 고대비를 지원하는 색 구성표에서 기본 스타일 색의 변경 사항을 자동으로 다시 정의합니다.

고유의 스타일시트를 만들어서 WinJS 스타일시트 뒤에 포함하여 기본 스타일시트의 스타일을 재정의할 수 있습니다.


<!-- The WinJS style sheet. -->
<link href="/WinJS/css/ui-dark.css" rel="stylesheet">

<!-- Your style sheet for overriding portions of the default style sheet. -->
<link href="/css/mystylesheet.css" rel="stylesheet" />

색을 지정하는 방법

WinJS 스타일시트를 재정의하거나 고유의 스타일을 지정할 수 있습니다. 고유의 스타일을 지정하는 경우 CSS 시스템 색을 사용하는 것이 좋습니다. 이러한 색상은 앱이 고대비 모드일 때 자동으로 올바르게 표시되기 때문입니다. 시스템 색 목록은 사용자 정의 시스템 색을 참조하세요.

기존의 WinJS 스타일을 재정의하는 경우 사용자 정의 시스템 색을 사용하지 않고 RGB 값을 지정해도 좋습니다. WinJS 스타일을 재정의할 때 시스템이 고대비 모드로 전환되면 사용자 지정 색 정보가 무시되고 대신에 호환되는 색상표가 사용됩니다.

HTML 컨트롤 스타일 지정

CSS를 사용하여 일반 HTML 페이지에서 스타일을 지정하는 것처럼 HTML 컨트롤(button, textarea 및 select와 같은 HTML 5 표준에 포함된 컨트롤)의 스타일을 지정할 수 있습니다. (CSS와 CSS 작동 방식에 대해 알아보려면 HTML/CSS/JavaScript 기초를 참조하세요. )

예를 들어 너비가 400픽셀이 되도록 텍스트 입력 상자의 스타일을 지정하려면 다음 CSS를 작성합니다.

input[type=text]
{
    width: 400px;
}

텍스트 입력 컨트롤

표준 컨트롤에는 여러 구성 요소 또는 하위 파트가 있습니다. 예를 들면 이전 예의 텍스트 입력 컨트롤에는 텍스트 값과 지우기 단추라는 두 가지 부분이 있습니다.

레이블이 지정된 구성 요소를 포함하는 텍스트 입력 컨트롤

JavaScript를 사용하는 Windows 스토어 앱은 여러 컨트롤의 개별 파트에 대한 스타일을 지정하는 데 사용할 수 있는 CSS 의사 요소를 제공합니다. 텍스트 입력 값의 의사 요소는 -ms-value이며 지우기 단추의 의사 요소는 -ms-clear입니다.

값을 포함하는 텍스트 입력 컨트롤

컨트롤 파트의 스타일을 지정하려면 다음 구문을 사용합니다.

element selector::part name { /* 스타일 */ }

예를 들어 입력 상자의 지우기 단추에 대한 스타일을 지정하려면 다음 스타일을 작성합니다.

input[type=text]::-ms-clear
{
            border: 2px solid orange
}

지우기 단추에 주황색 테두리가 있는 텍스트 입력 컨트롤

의사 요소 선택기를 다른 선택기와 함께 사용하여 특정 클래스 이름이나 ID로 컨트롤 대상을 지정할 수 있습니다.

예를 들어 "orangeButton" 클래스를 사용하는 텍스트 입력 컨트롤의 지우기 단추에 스타일을 지정하려면 다음 스타일을 만듭니다.

input[type=text].orangeButton::-ms-clear
{
            border: 2px solid orange
}

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

다음은 각 HTML 컨트롤에 사용할 수 있는 파트입니다.

컨트롤	파트
input type=checkbox	-ms-check
input type=radio	-ms-check
input type=password	-ms-reveal
input type=range	-ms-fill-lower, -ms-fill-upper, -ms-thumb, -ms-track, -ms-ticks-after, -ms-ticks-before, -ms-tooltip
input type=email, input type=number, input type=password, input type=search, input type=tel, input type=url	-ms-value,-ms-clear
input type=file	-ms-value, -ms-browse
progress	-ms-fill
select	-ms-value, -ms-expand

Select 컨트롤 option 요소는 또한 CSS 스타일을 지원하므로 색 및 글꼴 스타일 같은 드롭다운 항목의 모양을 세부적으로 제어할 수 있습니다. 이 기능을 사용하여 사용자가 사용할 글꼴을 선택하기 전에 드롭다운에서 여러 글꼴 스타일을 미리 볼 수 있는 글꼴 선택기 컨트롤 같은 시나리오를 편집할 수 있습니다.


<select id="fontNameSelect" onChange="formatText('fontName')">
    <option style="font-family:Arial;">Arial</option>
    <option style="font-family:Comic Sans MS;">Comic Sans MS</option>
    <option style="font-family:Courier New;">Courier New</option>
    <option style="font-family:Cursive;">Cursive</option>
    <option style="font-family:Segoe Script;">Segoe Script</option>
</select>

HTML 컨트롤 클래스 사용

스타일시트에는 컨트롤을 다른 모양과 느낌으로 표현하기 위해 기본 HTML 컨트롤에 할당할 수 있는 CSS 클래스가 포함되어 있습니다. 예를 들면 win-backbutton 클래스를 사용하여 표준 단추를 뒤로 이동 단추와 비슷한 모양으로 만들 수 있습니다.

<button class="win-backbutton"></button>

이 클래스를 사용할 경우 단추가 다음과 같이 표시됩니다.

backbutton CSS 클래스를 사용하는 단추

JavaScript용 Windows 라이브러리 컨트롤 스타일 지정

WinJS 컨트롤의 스타일을 지정하려면 해당 컨트롤에 대한 WinJS CSS 클래스를 재정의합니다. 예를 들어 AppBar의 스타일을 지정하려면 win-appbar 클래스를 재정의합니다.

다음 예제에서는 ListView의 진행률 표시기를 숨기는 스타일을 만듭니다.

.win-listView .win-progress {
    display: none;
}

사용 가능한 전체 클래스 목록은 WinJS CSS 클래스를 참조하세요. 특정 컨트롤에 사용되는 클래스에 대한 자세한 내용은 해당 컨트롤에 대한 참조 페이지를 참조하세요.

ListView 및 FlipView와 같은 일부 컨트롤에서는 항목 템플릿도 지원합니다. 항목 템플릿을 사용하면 목록 항목의 모양과 내용을 보다 세부적으로 제어할 수 있습니다. 자세한 내용은 빠른 시작: ListView 추가 및 빠른 시작: FlipView 추가를 참조하세요.

입력 체계 클래스 사용

이 스타일시트에는 텍스트를 포함하는 모든 요소에 적용할 수 있는 입력 체계용 CSS 클래스도 포함되어 있습니다. 예를 들면 win-title 클래스를 사용하여 제목에 Windows 8 제목 스타일을 적용할 수 있습니다. 이 예제에서는 입력 체계 클래스를 사용하여 다양한 제목 유형을 만듭니다.


     <p class="win-type-xx-large">win-type-xx-large</p>
     <p class="win-type-medium">win-type-medium</p>
     <p class="win-type-xx-small">win-type-xx-small</p>

입력 체계 클래스를 사용하는 요소

이러한 전체 입력 체계 클래스 목록은 입력 체계 CSS 클래스를 참조하세요.

샘플

스타일 지정에 대해 자세히 알아보려면 다음 샘플을 참조하세요.

요약

WinJS 스타일시트를 사용하는 방법, 감성 컨트롤 및 WinJS 컨트롤의 스타일을 지정하는 방법, 그리고 WinJS에서 입력 체계용으로 제공하는 그 밖의 CSS 클래스를 사용하는 방법을 살펴보았습니다.