목차
접기
728x90
반응형
<!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>가상 선택자(1)</title> <!-- 컬러 피커 사용하기(CSS 색상)-->
<style>
body {
background-color: #f5d742;
}
form fieldset {
margin-bottom: 25px;
}
form fieldset legend {
font-size: 15px;
font-weight: 800; /* 800 정도면 bold와 비슷한 굵기이다. */
}
input:disabled {
background-color: #fff;
border: 1px solid #000;
}
input:checked + span {
color: red;
font-weight: bold;
}
input:hover {
background-color: #262b4a;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>사용자 정보</legend>
<label for="name">이름 :
<input type="text" id="name" disabled> <!-- disabled를 사용하면 input을 사용하지 못하도록 한다.-->
</label>
</fieldset>
<fieldset>
<legend>신청 과목</legend>
<p>이 달에 신청할 과목을 선택하세요.</p>
<label for="speaking"> <!-- radio button 은 1개만 클릭이 된다.-->
<input id="speaking" type="radio" name="subject" value="speaking"><span>회화</span>
</label>
<label for="grammer">
<input id="grammer" type="radio" name="subject" value="grammer"><span>문법</span>
</label>
<label for="writing">
<input id="writing" type="radio" name="subject" value="writing"><span>작문</span>
</label>
</fieldset>
</form>
</body>
</html>🙄 기억하기
fieldsetlegendlabelinput type="radio"- radio checkbox를 사용할 때는 name을 모두 일치시켜야 한가지만을 선택하게 된다.
- value에는 서버에 전송할 데이터를 입력하도록 한다.
- input 속성 : disabled
- css 속성 :
input:checked(선택된),input:disabled- 위와 같이 css에서 사용할 수 있다.
컬러피커
크롬에서 컬러피커를 검색하면 CSS 색상을 아주 유용하게 사용할 수 있다.
728x90
반응형
LIST
'HTML, CSS' 카테고리의 다른 글
| rgba, rem 등 사용법 (0) | 2021.06.08 |
|---|---|
| 가상 클래스 (2) (0) | 2021.06.08 |
| CSS 속성 선택자 (0) | 2021.06.08 |
| input 속성(pattern, type) (0) | 2021.06.08 |
| 상태 선택자 (0) | 2021.06.03 |