HTML의 step 속성은 <input> 요소에서 숫자를 증가하거나 감소시킬 때의 간격(단위)을 정의하는 속성입니다. 주로 type="number" 형태의 입력 필드와 함께 사용되며, 사용자가 화살표 버튼이나 키보드로 값을 조절할 때 일정한 단계별로 값이 변하도록 제어할 수 있습니다.
기본 문법
step 속성의 기본적인 작성 형식은 다음과 같습니다.
<input step="숫자">
예를 들어 step="5"로 설정하면 값이 0 → 5 → 10 → 15처럼 5씩 증가하거나 감소합니다.
HTML step 속성 예제
아래는 step 속성을 실제로 적용한 예제 코드입니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
</style>
<body>
<h1>HTML step Demo</h1>
<p>주문 수량을 입력하세요:</p>
<input type="number" step="5" value="0">
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같이 숫자 입력 필드가 화면에 나타납니다.
입력 필드에 아무 숫자나 입력한 뒤, 키보드의 위쪽(↑) 또는 아래쪽(↓) 화살표 키를 눌러 보세요. 값이 1씩이 아니라 5씩 증가하거나 감소하는 것을 확인할 수 있습니다.
step 속성 활용 팁
- 소수점 허용:
step="0.01"처럼 소수 단위를 지정하면 가격 입력 등에 유용합니다. - 유효성 검사: step 값과 맞지 않는 값이 입력되면 폼 유효성 검사에서 오류로 처리됩니다.
- min/max 조합: min, max 속성과 함께 사용하면 허용 범위와 간격을 동시에 제어할 수 있습니다.