HTML DOM의 input month step 속성은 HTML 문서에서 type이 "month"인 입력 필드의 step 속성 값을 가져오거나 수정하는 기능을 제공합니다.
step 속성은 사용자가 월을 선택할 때 값이 변화하는 간격(단위)을 의미합니다. 예를 들어 step 값을 3으로 설정하면, 사용자는 3개월 단위로만 월을 이동하며 선택할 수 있습니다. 이를 통해 특정 간격의 날짜만 입력받도록 폼을 제어할 수 있습니다.
문법(Syntax)
input month step 속성의 기본 문법은 다음과 같습니다.
1. step 값 반환하기
object.step
2. step 값 설정하기
object.step = "숫자"
예제(Example)
다음은 HTML DOM input month step 속성의 실제 사용 예시입니다.
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
height:100%;
}
p{
font-weight:700;
font-size:1.1rem;
}
input{
display:block;
width:35%;
border:2px solid #fff;
background-color:transparent;
color:#fff;
font-weight:bold;
padding:8px;
margin:1rem auto;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
.show{
font-size:1.5rem;
color:#db133a;
font-weight:bold;
}
</style>
</head>
<body>
<h1>DOM Input month step 속성 데모</h1>
<p>안녕하세요! 휴가를 위한 월을 선택해 주세요.</p>
<input type="month" class="monthInput">
<button type="button" onclick="setStep()" class="btn">Step = 3</button>
<button type="button" onclick="getStep()" class="btn">step 값 확인하기</button>
<div class="show"></div>
<script>
function setStep(){
var monthInput = document.querySelector(".monthInput");
monthInput.step="3";
}
function getStep() {
var monthInput = document.querySelector(".monthInput");
var showMsg = document.querySelector(".show");
showMsg.innerHTML = monthInput.step;
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
먼저 "Step=3" 버튼을 클릭하여 step 속성값을 3으로 설정합니다. 그다음 원하는 월을 선택한 뒤 값을 변경해 보세요. step 속성이 어떻게 동작하는지 직접 확인할 수 있습니다.
