< 속성 선택자 >
- 태그명[속성명=값]으로 사용
- 속성이 가상 클래스로 정의되어 있다면 태그명:속성명으로 사용 가능
<html>
<head>
<meta charset="UTF-8">
<title>속성 선택자 1</title>
<style>
label { display: inline-block; width: 100px;}
input[type="password"] {background-color: darkgray;}
input:required { background-color: gold;}
input:read-only { background-color: pink;}
input:disabled { background-color: red;}
input[autofocus] { background-color: skyblue;} /*autofocus는 가상 클래스이기 때문에 꼭 [대괄호]안에 적어줘야함.
나머지 위에는 대괄호에 적어도 되고 아니여도 됨*/
</style>
</head>
<body>
<h1>속성 선택자</h1>
<fieldset>
<legend>학생 정보</legend>
<label for="part">학과</label><input type="text" name="part" id="part" required><br>
<label for="name">이름</label><input type="text" name="name" id="name" autofocus><br>
<label for="major1">주전공</label><input type="text" name="major1" id="major1" required><br>
<label for="major2">부전공</label><input type="text" name="major2" id="major2"><br>
<label for="major3">자율전공</label><input type="text" name="major3" id="major3" disabled><br>
<label for="group1">동아리1</label><input type="text" name="group1" id="group1" required><br>
<label for="group2">동아리2</label><input type="text" name="group2" id="group2"><br>
<label for="license">취득자격</label><input type="text" name="license" id="license" readonly value="정보처리기사"><br>
<label for="service">봉사활동</label><input type="text" name="service" id="service" required><br>
<label for="pwd">비밀번호</label><input type="password" name="pwd" id="pwd"><br>
</fieldset>
</body>
</html>
'Front-end > CSS' 카테고리의 다른 글
| 색상 설정 (0) | 2022.08.30 |
|---|---|
| 절대크기와 상대크기 (0) | 2022.08.30 |
| 가상 클래스와 가상 요소 (0) | 2022.08.30 |
| [CSS] css 선택자 (id, class) (0) | 2022.08.30 |
| [CSS] 스타일 오버로딩 (0) | 2022.08.30 |