확인란 컨트롤의 스타일을 지정하는 방법(HTML)

아티클
03/04/2016

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

checkbox의 스타일을 지정하는 데 사용할 수 있는 CSS 속성과 의사 클래스가 많이 있습니다. 이 항목에서는 보다 일반적으로 사용되는 속성과 의사 클래스 몇 가지에 대해 설명합니다.

알아야 할 사항

기술

사전 요구 사항

빠른 시작: 확인란 컨트롤 추가

유용한 CSS 속성

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

background
checkbox 면의 배경을 지정합니다. 다음 예제에서는 확인란에 그라데이션 배경을 지정합니다.

#backgroundExampleCheckbox {
    background: -ms-linear-gradient(green, blue );
}

    <label>
        <input id="backgroundExampleCheckbox" type="checkbox" />Option
    </label>

그라데이션 배경이 적용된 확인란

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

다음 예제에서는 확인란에 빨간색 테두리를 지정합니다.
```
#borderExampleCheckbox {
    border: 1px solid red;
}
```
```
    <label>
        <input id="borderExampleCheckbox" type="checkbox" />Option
    </label>
```

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

확인란 컨트롤의 스타일을 지정하기 위한 의사 요소

checkbox 컨트롤은 컨트롤 특정 부분의 스타일을 지정하는 데 선택기로 사용할 수 있는 다음과 같은 의사 요소를 제공합니다.

::-ms-check
확인란의 확인 표시에 하나 이상의 스타일을 적용합니다.

다음 예제에서는 확인란의 확인 표시를 녹색으로 지정합니다.
```
#checkExampleCheckbox::-ms-check {
    color: green;
}
```
```
    <label>
        <input id="checkExampleCheckbox" type="checkbox" checked />Option
    </label>
```

확인란 컨트롤의 스타일을 지정하기 위한 의사 클래스

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

:checked
선택됨 상태의 checkbox에 스타일을 지정합니다.
:indeterminate
확정되지 않은 상태의 checkbox에 스타일을 지정합니다.
:hover
사용자가 checkbox을 커서로 가리키되 클릭하여 활성화하지 않을 때 checkbox에 스타일을 적용합니다.
:active
checkbox 컨트롤이 활성 상태일 때 이 컨트롤에 스타일을 적용합니다. checkbox는 사용자가 컨트롤을 누른 시간과 컨트롤을 해제한 시간 사이에 활성 상태입니다. 사용자가 컨트롤을 누르고 포인터를 checkbox 밖으로 끌면 사용자가 포인터를 해제할 때까지 컨트롤이 활성 상태를 유지합니다.
:focus
checkbox 컨트롤에 포커스가 있을 때 이 컨트롤에 스타일을 적용합니다. checkbox에 포커스를 두는 방법에는 몇 가지가 있습니다.
- 포인팅 장치로 checkbox을 지정합니다.
- TAB 및 Shift+TAB 키로 checkbox으로 이동합니다.
- keyboard shortcut를 사용하여 checkbox을 선택합니다.
:disabled
checkbox 컨트롤이 비활성 상태일 때 이 컨트롤에 스타일을 적용합니다. checkbox를 사용하지 않도록 설정하려면 disabled 특성을 해당 HTML에 추가하거나 JavaScript에서 disabled 속성을 true로 설정합니다.

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