728x90
웹서핑을 하다보면 선택을 할수있는 체크 박스가 있다.
그것을 만들어 보도록 하자.
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<input type='checkbox' name='my-check'/>
<input type='checkbox' name='my-check'/>
<input type='checkbox' name='my-check'/>
</body>
</html>3개를 추가했으니 3개가 만들어진다.
실행해서 클릭하면 꺼졌다 켜졌다 잘 작동된다.
아하... 체크표시가 처음부터 되어있게 하고싶으면
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<input type='checkbox' name='my-check'checked/>
<input type='checkbox' name='my-check'checked/>
<input type='checkbox' name='my-check'checked/>
</body>
</html>뒤에다 checked를 입력하면 체크표시가 활성화 되있는 상태에서 실행이 된다.
라디오 기능을 써보자
이 기능은 그룹중에 하나만 선택이 된다.
예를 들어 5개의 선택지중 하나만 선택한다는 문제를 만들었을때 사용하는 기능이다.
<!DOCTYPE html>
<html lang="en">
<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>5지1답</title>
</head>
<body>
<input type='radio' name='problem1'/>
<input type='radio' name='problem1'/>
<input type='radio' name='problem1'/>
<input type='radio' name='problem1'/>
<input type='radio' name='problem1'/>
</body>
</html>간단히 만들수가 있다.
이것을 어떻게 활용하면 좋을지 기대가 된다.
728x90
'프로그래밍 > Web [HTML]' 카테고리의 다른 글
| 노드 (0) | 2023.03.23 |
|---|---|
| 폰트 편 - 간단하게 설정하자 (0) | 2022.12.02 |
| 아이콘 편 (0) | 2022.12.02 |
| 등급 분류 모양 만들기 (0) | 2022.12.01 |
| margin 편 (0) | 2022.12.01 |
