Q1)readonly속성은 활성화일까 ? 비활성화일까?
⚡정답은 활성화 상태!
⭐input:focus, input:checked, input:enabled ,input:disabled
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상태선택자</title>
<style>
/*상태선택자*/
/*:focus -> 커서가 컴퍼넌트를 선택하면*/
input:focus{background:yellow;}
/*:enabled -> 활성화 상태일때 적용*/
input:enabled{color:blue;}
/*:disabled -> 비활성화의 경우 스타일*/
input:disabled{color:red; font-weight:bold;}
/* :checked -> checked인 컴포넌트 선택*/
input:checked{
width:50px; height:50px;
}
input:checked+label{
background:orange; color:olive;
width:50px; height:50px;
}
</style>
</head>
<body>
<form>
<label>이름</label>
<input
type="text"
name="username"
value="hongildong"
readonly
/><br />
<label>아이디</label>
<input
type="text"
name="username"
value="gildong"
disabled
/>
<input
type="submit"
value="전송하기"
/><br />
<label>취미</label><br />
<input type="checkbox" value="농구" /><label>농구</label>
<input type="checkbox" value="축구" checked/>축구
<input type="checkbox" value="야구" />야구
<input type="checkbox" value="배구" />배구
<input type="submit" value="전송하기" />
</form>
</body>
</html>결과
풀스택eDot