반응형
● 가상 선택자
★ 의사 클래스 선택자(pseudo-class)
- 요소의 특수한 상태를 정의하는데 사용
- 예를 들어, 링크 요소에 마우스가 올라갔을 때, 내려올 때 등.
※ 종류
☆ :disabled - 요소의 속성 중에 disabled 가 설정될 때의 스타일 설정.
☆ :checked - 체크 요소의 체크가되었을 때의 스타일 설정.
★ pseudo_class_selector3.html ★
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기타 의사 클래스 선택자</title>
<style type="text/css">
input:disabled {
background-color: black;
}
input:checked {
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<input type="text" name="int1">
<br>
<input type="text" name="int1" disabled>
<br>
<input type="checkbox" name="ck" value="1" checked>대중교통
<br>
<input type="checkbox" name="ck" value="2">자가용
<br>
</body>
</html>반응형
'Front-end > Css' 카테고리의 다른 글
| [CSS] 색상표현 (0) | 2023.07.06 |
|---|---|
| CSS 가상 선택자4(::first-line, ::first-letter, ::before, ::after) (0) | 2023.05.16 |
| CSS 가상 선택자2(:first-child, :last-child, :nth-child(2n+1)) (0) | 2023.05.16 |
| CSS 가상 선택자1(:link, :visited, :hover, :active, :focus) (0) | 2023.05.16 |
| CSS 기본 선택자('*', '태그', '.', '#', '[속성]') (0) | 2023.05.04 |
