빠른 시작: 컨트롤 스타일 지정(JavaScript 및 HTML을 사용하는 Windows 스토어 앱)

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

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

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

사전 요구 사항

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

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

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

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

Microsoft Visual Studio를 사용하여 새 프로젝트를 작성하는 경우 WinJS 스타일시트 두 개를 포함하여, 필요한 JavaScript용 Windows 라이브러리 파일이 프로젝트에 모두 자동으로 포함됩니다. 스타일시트를 사용하려면 다음과 같이 스타일시트 중 하나의 참조를 HTML 페이지의 head 요소에 추가합니다.


<!DOCTYPE html>
<html>
<head>
    
    <!-- A WinJS style sheet. -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">

</head>
<body>
    
</body>
</html>

WinJS는 Windows 8의 모양과 느낌에 어울리게 앱을 만드는 데 사용할 수 있는 ui-dark.css 및 ui-light.css라는 두 가지 기본 스타일시트를 제공합니다. 이러한 스타일시트는 다음 스타일을 정의합니다.

  • 기본 스타일

    html, bodyiframe 요소의 스타일입니다.

  • 기본 HTML 컨트롤 스타일

    기본 HTML 컨트롤(예: button)의 스타일입니다.

  • 추가적인 기본 HTML 컨트롤 클래스

    컨트롤을 다른 모양과 느낌으로 표현하기 위해 기본 HTML 컨트롤에 할당할 수 있는 CSS 클래스입니다. 이러한 전체 클래스 목록은 HTML 컨트롤의 CSS 클래스를 참조하세요.

  • WinJS 컨트롤 스타일

    WinJS 컨트롤의 스타일 지정 가능 부분을 나타내는 CSS 클래스입니다.

  • 입력 체계 스타일

    h1, dd 및 p와 같은 입력 체계 요소용 스타일입니다.

  • 추가적인 입력 체계 클래스

    텍스트에 스타일을 지정할 때 사용할 수 있는 CSS 클래스입니다. 예를 들어 win-type-large 클래스를 사용하여 요소의 텍스트를 크게 만들 수 있습니다. 이러한 전체 입력 체계 클래스 목록은 입력 체계 CSS 클래스를 참조하세요.

밝은 스타일시트 또는 어두운 스타일시트 포함

빠른 시작: WinJS 컨트롤 및 스타일 추가에서 설명했듯이, Visual Studio를 사용하여 JavaScript로 작성된 새 Windows 스토어 앱 프로젝트를 만드는 경우 프로젝트에 WinJS 파일과 참조가 자동으로 포함됩니다.

기본적으로 프로젝트의 각 HTML 페이지에는 어두운 스타일시트에 대한 참조가 들어 있습니다.


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

WinJS는 또한 밝은 스타일시트도 제공합니다. 어두운 스타일시트 참조를 이 참조로 대체하여 밝은 스타일시트를 포함할 수 있습니다.


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

이러한 스타일시트 중 하나를 반드시 포함해야 합니다. 대부분의 이미지 또는 비디오를 표시하는 앱에는 어두운 색 스타일시트를 사용하는 것이 좋으며, 텍스트가 많이 들어 있는 앱에는 밝은 스타일시트를 사용하는 것이 좋습니다. 사용자 지정 색 구성표를 사용하려는 경우 앱의 모양과 느낌에 가장 잘 맞는 스타일시트를 사용하세요.

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

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

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

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



<!-- The WinJS style sheet. -->
<link href="//Microsoft.WinJS.2.0/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, textareaselect와 같은 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 클래스를 참조하세요. 특정 컨트롤에 사용되는 클래스에 대한 자세한 내용은 해당 컨트롤에 대한 참조 페이지를 참조하세요.

ListViewFlipView와 같은 일부 컨트롤에서는 항목 템플릿도 지원합니다. 항목 템플릿을 사용하면 목록 항목의 모양과 내용을 보다 세부적으로 제어할 수 있습니다. 자세한 내용은 빠른 시작: 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 클래스를 사용하는 방법을 살펴보았습니다.

관련 항목

HTML/CSS/JavaScript 기초
CSS 선택기 이해
WinJS CSS 클래스
HTML 컨트롤용 CSS 클래스
Windows 런타임 및 JavaScript용 Windows 라이브러리 API 참조

 

 

표시:
© 2014 Microsoft. All rights reserved.