▣ [input type] number와 range
■ 웹 페이지에서 숫자를 입력할 때 직접 키보드에서 입력할 수도 있지만, 스핀박스나 슬라이드를 이용해서 선택할 수도 있는데요. HTML5에서는 이 두 가지를 모두 지원하고 있습니다. 스핀박스는 위. 아래 화살표를 눌러서 숫자를 증. 감할수 있는 형식이고, 슬라이드는 막대를 좌.우로 움직여서 숫자를 증. 감 하는 방식인데요. 태그의 형식을 알아보고 예제를 만들어서 어떻게 출력되는지 보겠습니다.
■ 두 입력방식의 형식은 각각 input type="number"와 input type="range"입니다. 이것들의 속성은 같기 때문에 한 번만 정리할게요.
■ 속성은 min, max, value, step 등이 있는데요. min은 필드에 입력할 수 있는 최솟값을 지정하는 값이구요. 반대로 max는 최대값을 입력합니다. range일 때는 min과 max를 따로 입력하지 않으면 기본값은 0과 100입니다. step은 짝수나 홀 수 등을 지정하거나 숫자의 간격을 지정할 수 있는 값이구요. 이 값은 생략할 수도 있습니다. 마지막으로 value는 초기에 화면에 출력될 값입니다.
■ input type="text" 형식을 넣어서 숫자를 입력해도 되겠지만, 이렇게 number와 range를 이용하면 좀 더 보기 좋을 거에요. 간단한 내용이니까 직접 메모장에 입력해서 어떻게 출력되는지 확인해보세요. ^^ 수고하셨습니다.
