html number, range 속성을 이용하여 스핀 버튼과 슬라이드 바 사용하기
네 안녕하세요, 이번 포스팅에서는 스핀 버튼과 슬라이드 바를 사용하는 방법에 대해서 알아보도록 하겠습니다.
스핀 버튼과 슬라이드 바는 웹을 꾸미기에 아주 적합한 요소인데,
정말 어지간한 사이트들에는 다 들어가 있는 기능이 스핀 버튼과 슬라이드 바입니다.
그만큼 썼을 때 이목을 집중시키기가 쉽고,
매우 직관적으로 요소나 수치 등을 표현할 수 있어서 정말 많이 씁니다.
그럼 지금부터 이들을 어떻게 사용을 할 수 있는지 알아보도록 하겠습니다.
1. 스핀 버튼과 슬라이드 바로 편리한 숫자 입력하기 : number, range 속성 이용
이번에는 스핀 버튼과 슬라이드 바로 좀 더 시각적인 요소들을 넣어보겠습니다.
html에서는 정수나 상수를 좀 더 편리하게 입력할 수 있는 기능을 제공을 하는데,
그게 바로 스핀 버튼과 슬라이드 바입니다.
이 둘은 이렇게 사용을 합니다.
<input type = "number"> // 스핀 버튼으로 정교한 값 입력하기
<input type = "range"> // 슬라이드 바로 대략적인 값 입력하기
이렇게 쓸 수 있습니다.
그리고 추가적으로 min, max, step 속성이 있는데,
각각 스핀 버튼으로 조작이 가능한 최대 및 최소 범위,
그리고 그들을 조작할 시에 얼마나 많이 증감이 될 것인지를 조정하는 것입니다.
그리고 이들은 하나의 값이기 때문에 value 속성으로 저장이 되고,
이 값은 자바스크립트로 읽을 수 있습니다.
그럼 간단한 예제를 통하야 같이 보도록 하겠습니다.
<!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>
</head>
<body>
<h3>홈 제어 시스템 - 온도 조절</h3>
<hr>
<form>
지속시간 (0.0~10.0시간) :
<input type="number" min="0.0" max="10.0"
step="0.5"><br><br>
온도 설정 : 10°
<input type="range" min="10" max="30"
list="temperatures">30°
<datalist id="temperatures">
<option value="12" label="Low">
<option value="20" label="Medium">
<option value="28" label="High">
</datalist>
</form>
</body>
</html>
이렇게 한번 작성을 해봤습니다.
이해를 좀 더 쉽게 하게 해 드릴 수 있는 방법이 있을까 생각을 하다가,
요즘은 다들 집에 시스템 에어컨을 설치를 하곤 하니,
그걸 활용을 해서 보여드리면 좋겠다 싶어서 한 번 그런 식으로 작성을 해봤습니다.
홈 제어 시스템이 돌아가는 지속 시간은 세밀하게 조정을 할 필요가 있기 때문에 스핀 버튼으로 만들었고,
온도는 대략적으로만 떨구기만 하면 되기 때문에 슬라이드 바로 만들었습니다.
그럼 결과 화면은 어떻게 나왔는지 한 번 볼까요?
이렇게 스핀 버튼과 슬라이드 바가 제대로 나온 것을 보실 수 있습니다.
그리고 스핀 버튼은 마우스 커서를 올리면 버튼이 보입니다.
그냥 보면 텍스트 입력 창으로 보실까 봐 마우스 커서를 올리고서 캡처를 떴습니다.
여기까지 스핀 버튼과 슬라이드 바를 입력하는 방법에 대하여 알아보았습니다.
다음 포스팅에서는 폼 요소들을 그룹핑을 해서 간단한 정보 입력창을 만드는 방법을 한번 배워보도록 하겠습니다.
긴 글 읽어주신 독자분들께 다시 한 번 감사드립니다 ~
'html, css, 자바스크립트 > html' 카테고리의 다른 글
html fieldset, legend 태그 이용하여 폼 요소 그룹핑 하기 (0) | 2023.03.10 |
---|---|
html type 속성과 placeholder 속성을 이용하여 정보의 힌트 및 양식 보여주기와 형식을 가진 텍스트 입력하기 (0) | 2023.03.10 |
html month, week, date, time, datetime-local 속성 이용하여 시간 표현하기 (0) | 2023.03.07 |
html color 속성 이용하여 색 입력하기 (0) | 2023.03.07 |
html label 태그로 폼 요소의 캡션 만들기 (0) | 2023.03.06 |
댓글