HTML DOM Input Month 값(value) 속성 완벽 정리

HTML DOM의 input month 값(value) 속성은 <input type="month"> 필드에 설정된 value 속성의 값을 가져오거나 수정하는 데 사용됩니다. 이 속성을 활용하면 사용자가 선택한 연도와 월 정보를 자바스크립트로 손쉽게 읽어 오거나 변경할 수 있습니다.

문법(Syntax)

input month 값 속성의 기본 문법은 다음과 같습니다.

1. 값 반환하기

object.value

2. 값 설정하기

object.value = "YYYY-MM"

값을 설정할 때는 "연도-월"(예: "2024-05") 형식의 문자열을 지정해야 합니다.

예제 코드

아래는 HTML DOM input month 값 속성을 활용한 실전 예제입니다. 사용자가 월을 선택한 뒤 버튼을 클릭하면 선택된 값이 화면에 표시됩니다.

<!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 Value Property Demo</h1>
<p>안녕하세요! 휴가를 위한 월을 선택해 주세요</p>
<input type="month" class="monthInput">
<button type="button" onclick="getValue()" class="btn">클릭하여 값 확인하기</button>
<div class="show"></div>
<script>
function getValue() {
var monthInput = document.querySelector(".monthInput");
        document.querySelector(".show").innerHTML = "Value = " +
        monthInput.value;
}
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM Input Month 값(value) 속성 완벽 정리 – 문법과 실전 예제

월 선택 입력창에서 원하는 연도와 월을 선택한 뒤, “클릭하여 값 확인하기” 버튼을 누르면 아래와 같이 선택된 값이 표시됩니다.

HTML DOM Input Month 값(value) 속성 완벽 정리 – 문법과 실전 예제

정리

HTML DOM의 input month 값 속성은 type="month" 입력 필드의 값을 읽고 쓸 수 있는 간단하면서도 유용한 기능입니다. 폼 데이터 유효성 검사나 날짜 관련 UI를 구현할 때 활용도가 높으니, 위 예제 코드를 직접 실행해 보며 동작 방식을 익혀 보시기 바랍니다.