5.4.3 입력 요소 가상 클래스 선택자
입력 요소의 특정 상태를 이용해 선택자로 지정하는 방법입니다. 여러 종류가 있지만, 여기서는 자주 사용하는 4가지만 다루겠습니다.
표 5-5 입력 요소 가상 클래스 선택자
|
종류 |
설명 |
|
:focus |
입력 요소에 커서가 활성화되면 선택자로 지정합니다. |
|
:checked |
체크박스가 표시되어 있으면 선택자로 지정합니다. |
|
:disabled |
상호작용 요소가 비활성되면(disabled 속성이 사용되면) 선택자로 지정합니다. |
|
:enabled |
상호작용 요소가 활성화되면(disabled 속성이 사용되지 않은 상태면) 선택자로 지정합니다. |
TIP | 표 5-5에서는 입력 요소와 상호작용 요소, 체크박스를 구분해서 설명합니다. 입력 요소는 사용자가 텍스트를 입력하는 input 태그와 textarea 태그로 생성되는 요소이고, 상호작용 요소는 입력 요소와 체크박스를 포함하는 모든 상호작용이 가능한 요소를 의미합니다. 그리고 체크박스는 input 태그의 type 속성값이 checkbox인 요소를 말합니다.
● :focus
:focus 선택자는 입력 요소에 커서가 활성화되면 스타일을 적용합니다. 다음 코드는 입력 요소에 커서를 올리면 텍스트에 빨간색을 적용합니다.
05/04/input_pseudo.html
<style>
input:focus{
color:red;
}
</style>