상태 선택자, 속성 선택자
1. 상태 선택자
입력양식의 상태를 선택할 때 사용한다.
① :focus는 입력폼에 마우스 커서를 위치시킨 input 요소를 선택한다.
② :checked는 사용 불가능한 입력 폼의 input 요소를 선택한다.
③ :enabled는 사용 가능한 입력 폼의 input 요소를 선택한다.
④ :disabled는 사용 불가능한 입력 폼의 input 요소를 선택한다.
2. 속성 선택자 : [type="속성값"]
[type="submit"] 은 input 요소의 type 속성값이 submit인 요소를 선택한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상태선택자, 속성선택자</title>
<style>
/* 스타일시트는 아래쪽에 작성하면 우성이다. */
ul li {list-style: none;}
input {height:30px; margin-top : 10px; border-radius: 30px;}
/* input : enabled 와 input:disabled 를 모두 선택한 것 */
input:enabled {border:1px dashed #06F;}
/* dashed : 점선*/ /*disabled 는 적용되지 않음*/
input:disabled {background:skyblue;}
input:focus {
background : rgba(80,150,250,0.3);
border : 1px solid #06F;
outline:0; /*박스 바깥쪽 영역에 생기는 라인 : input, image*/
} /*focus가 제일 밑으로 내려왔기 때문에 border와 outline이 적용됨*/
input[type="checkbox"] {width:20p; height:20px; }
input[type="checkbox"]:checked {width:25px; height:25px; }
/*input[]:checked 체크박스 선택 했을 때 적용*/
/* 속성 선택자 */
input[type="submit"] {border:1px solid #06F;}
</style>
</head>
<body>
<form name="form_id" action="" method="post">
<ul>
<li><input type="text" name="id" placeholder="아이디를 입력하세요." autofocus required></li>
<!-- autofocus 옵션은 입력폼에 커서를 자동으로 위치시키는 옵션이다.
required 옵션은 필수 입력 항목으로 지정하는 옵션이다.-->
<li><input type="password"name="pwd" placeholder="비밀번호를 입력하세요." required></li>
<li><input type="text" name="js" value="JavaScript" disabled></li>
<!-- disabled 옵션은 입력폼을 비활성화 상태로 하여 입력할 수 없다. -->
<!-- js 라는 변수에 javascript 값을 넣어서 서버로 보냄 --> <!-- 많이 쓰진 않음 -->
<li>
<input type="checkbox" name="grade" value="VIP" checked >VIP
<input type="checkbox" name="grade" value = "관리자">관리자
</li>
<input type="submit" value="로그인" class="login">
</ul>
</form>
</body>
</html>
'국비지원 JAVA 풀스택 과정 > HTML+CSS3' 카테고리의 다른 글
| [HTML+CSS3] 구조선택자 (0) | 2022.09.27 |
|---|---|
| [HTML+CSS3] 형제선택자 (0) | 2022.09.27 |
| [HTML+CSS3] 자식+후손 선택자 (0) | 2022.09.26 |
| [HTML+CSS3] 기본 선택자 (0) | 2022.09.26 |
| [HTML+CSS3] 스타일시트 기본 문법 (0) | 2022.09.26 |