..

Search

29) 상태 의사 클래스

상태 의사 클래스


상태 의사 클래스(UI element states pseudo-class)

상태 의사 클래스를 사용하면 입력 양식의 상태에 따라 각각의 스타일을 별도로 설정할 수 있습니다.

CSS에서 사용할 수 있는 상태 의사 클래스는 다음과 같습니다.

 

- :checked
- :enabled
- :disabled


:checked

:checked는 input 요소 중에서 체크된(checked) 상태의 input 요소를 선택합니다.

예제

<style>

    input { color: #FFEFD5; }

    input:checked + span { color: #CD853F; }

</style>

코딩연습 ▶


:enabled와 :disabled

:enabled는 input 요소 중에서 사용할 수 있는 input 요소를 선택합니다.

또한, :disabled는 input 요소 중에서 사용할 수 없는 input 요소를 선택합니다.

예제

<style>

    input { color: #FFEFD5; }

    input:disabled + span { color: #CD853F; }

</style>

코딩연습 ▶


CSS 상태 의사 클래스(UI element states pseudo-class)

의사 클래스 설명
:checked 체크된(checked) 상태의 input 요소를 모두 선택함.
:enabled 사용할 수 있는 input 요소를 모두 선택함.
:disabled 사용할 수 없는 input 요소를 모두 선택함.

연습문제