Front-end/Css
CSS 가상 선택자3(:disabled, :checked)
sky-j
2023. 5. 16. 17:35
반응형
● 가상 선택자
★ 의사 클래스 선택자(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>반응형