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&deg;
        <input type="range" min="10" max="30"
            list="temperatures">30&deg;
        <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

개발러 L의 뻔fun한 코딩

html number, range 속성을 이용하여 스핀 버튼과 슬라이드 바 사용하기