[HTML] 숫자 형식의 input 엘리먼트의 증감값 설정하기

input[@type='number']의 증감폭 설정

  벌써 HTML5가 릴리즈된지도 4년이 지났습니다. HTML5의 input 엘리먼트에는 다양한 type 속성을 줄 수 있죠. email, password, text, number, 등등...

  이번 포스트에서 쓰이는 타입은 number입니다. 숫자를 입력하는 input 엘리먼트의 증감폭 설정 방법을 알려드릴 것이기 때문이죠.

1씩 증감하는 기본값

  <input type="number">로 가장 단순히 엘리먼트를 생성해봅시다. 대부분의 브라우저에서 우측에 위, 아래 화살표가 있는 버튼이 생기며 해당 버튼을 누르거나 키보드 위/아래 방향키를 눌러 숫자를 1씩 증감시킬 수 있습니다.

기본값인 1씩 증감되는 모습

원하는 값만큼 증감되도록 설정해보자

  하지만 다양한 경우에서 1이 아닌 값이 증감되는 것이 편할 수 있습니다. 예를 들어서 쇼핑몰의 최소 가격 비교 가능 금액이 10원이라면, 화살표를 클릭할 때 10원씩 증감되는 것이 편하겠죠. 물론 언뜻 그냥 키보드로 입력하면 되는걸 왜 굳이 설정까지 해야하나 할 수 있겠지만, 제가 이쪽 일을 하면서 알게 된 사실은 은근히 키보드보다 마우스를 선호하는 사람이 꽤 많다는 것입니다.

  아무튼, 그럼 10씩 증감시키려면 어떻게 해야 하느냐? 바로 step 속성을 활용하시면 됩니다. 지금 상황은 10씩 증감시켜야 하는 상황이니, 다음과 같이 작성하시면 됩니다.

<input type="number" step="10">

  그럼 아래와 같이 작동하게 됩니다.

step 속성 값인 10씩 증감되는 모습

  물론 해당 속성의 값은 숫자라면 무엇이든 쓸 수 있습니다. -1, 0, 1, 2, 2.2, 7.7 등등 뭐든지요. 단, 0 이하의 값을 입력하면 무조건 1씩 증감된다는 사실만 기억하시면 됩니다.