단추의 스타일을 지정하는 방법

아티클
03/04/2016

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

button의 스타일을 지정하는 데 사용할 수 있는 CSS 속성과 의사 클래스가 많이 있습니다. 이 항목에서는 보다 일반적으로 사용되는 속성과 의사 클래스 몇 가지에 대해 설명합니다. 또한 WinJS에서 제공하는 win-backbutton CSS 클래스를 사용하는 방법의 예를 제공합니다.

알아야 할 사항

기술

사전 요구 사항

빠른 시작: 단추 추가

유용한 CSS 속성

CSS는 HTML 요소의 스타일을 지정하는 데 사용할 수 있는 여러 속성을 제공합니다. 그러나 이러한 속성 목록은 길어서 살펴보기가 약간 어려울 수 있습니다. button 컨트롤의 스타일을 지정하는 데 특히 유용한 간략한 CSS 속성 목록은 다음과 같습니다.

font-family
단추 텍스트에 사용할 글꼴을 지정합니다. 이 예에서는 font-family를 "Segoe UI Light"로 설정합니다.
```
<button id="fontFamilyButton" style="font-family: 'Segoe UI Light'">A button</button>
```
font-size
단추 텍스트에 사용할 글꼴 크기를 지정합니다. 절대 크기, 상대 크기, 절대 길이 값 또는 백분율과 같은 다양한 형식을 사용할 수 있습니다. 자세한 내용은 font-size 참조를 참조하세요.

이 예에서는 font-family를 20포인트로 설정합니다.
```
<button id="fontSizeButton" style="font-family: 'Segoe UI Light'; font-size: 20pt">A button</button>
```

color
단추 텍스트의 색상을 지정합니다.

이 예에서는 color 속성을 설정하는 여러 가지 방법을 보여 줍니다.

<button id="pinkButton1" style="color: DeepPink">A button</button>
<button id="pinkButton2" style="color: #FF1493">A button</button>
<button id="pinkButton3" style="color: rgb(255, 20, 147);">A button</button>

background-color
단추 면의 색상을 지정합니다.

이 예에서는 background-color 속성을 설정하는 여러 가지 방법을 보여 줍니다.

<button id="backgroundButton1" style="background-color: Black">A button</button>
<button id="backgroundButton2" style="background-color: #000000">A button</button>
<button id="backgroundButton3" style="background-color: rgb(0, 0, 0);">A button</button>

border
단추 테두리의 두께, 선 스타일 및 색상을 지정합니다.

다음 예제에서는 단추 주위에 단색 2px 테두리를 만듭니다.
```
<button id="borderButton" style="border: 2px solid rgb(255, 20, 147);">A button</button>
```

(이러한 항목은 사용할 수 있는 항목 목록의 일부에 불과합니다. 모든 CSS 속성의 전체 목록은 CSS 스타일시트 참조를 참조하세요.)

단추 컨트롤의 스타일을 지정하기 위한 의사 요소

button 컨트롤에는 스타일을 지정할 의사 요소가 없습니다.

단추 컨트롤의 스타일을 지정하기 위한 의사 클래스

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

:hover
사용자가 button을 커서로 가리키되 클릭하여 활성화하지 않을 때 button 컨트롤에 스타일을 적용합니다.

이 예에서는 가리킨 상태에 있는 button에 대한 스타일을 정의합니다.
```
#hoverButton:hover {
    background-color: deeppink;
}
```
```
<button id="hoverButton">A button</button>
```
:active
button 컨트롤이 활성 상태일 때 이 컨트롤에 스타일을 적용합니다. button는 사용자가 컨트롤을 누른 시간과 컨트롤을 해제한 시간 사이에 활성 상태입니다. 사용자가 컨트롤을 누르고 포인터를 단추 밖으로 끌면 사용자가 포인터를 해제할 때까지 컨트롤이 활성 상태를 유지합니다.

다음 예제에서는 활성 button의 배경색을 변경합니다.
```
#activeButton:active {
    font-weight: bold;
    border-color: deeppink;
}
```
```
<button id="activeButton">A button</button>
```
:focus
button 컨트롤에 포커스가 있을 때 이 컨트롤에 스타일을 적용합니다. button에 포커스를 두는 방법에는 몇 가지가 있습니다.
- 포인팅 장치로 button을 지정합니다.
- TAB 및 Shift+TAB 키로 button으로 이동합니다.
- keyboard shortcut를 사용하여 button을 선택합니다.
다음 예제에서는 button이 포커스를 받을 때 button의 배경색을 변경합니다.
```
#focusButton:focus {
   background-color: #ffc;
}
```
```
<button id="focusButton">A button</button>
```
:disabled
button 컨트롤이 비활성 상태일 때 이 컨트롤에 스타일을 적용합니다. 단추를 사용하지 않도록 설정하려면 disabled 특성을 해당 HTML에 추가하거나 JavaScript에서 disabled 속성을 true로 설정합니다.

다음 예제에서는 단추를 사용하지 않도록 설정하고 단추에 대한 스타일을 정의합니다.
```
#disabledButton:disabled {
   border-style: dotted;
}
```
```
<button id="disabledButton" disabled>A button</button>
```

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

WinJS CSS 클래스

WinJS는 특정 컨트롤의 스타일을 지정하는 데 사용할 수 있는 CSS를 제공합니다. button 컨트롤용으로는 win-backbutton 클래스가 있습니다. 이 클래스는 button에 이전 위치로 돌아갈 수 있는 탐색 단추의 모양을 제공합니다.

참고 이 클래스를 사용하려면 페이지에 WinJS 스타일시트 중 하나에 대한 참조가 포함되어 있어야 합니다. 자세한 내용은 JavaScript용 Windows 라이브러리 스타일시트를 참조하세요.

다음 예제에서는 win-backbutton을 사용하여 button에 탐색 단추의 스타일을 제공합니다.

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

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

win-backbutton 클래스를 사용하는 단추

다음을 통해 공유