[JS] 캘린더 - 1 select만들기

목표

select에 option태그를 만들어 넣자!
필요지식) appendChild, createElement 등의 학습이 필요하다.

calendar.html

<div id="calendar_head">
    <button id="prev_month">prev</button>
    <select id="year_select"></select>
    <select id="month_select"></select>
    <button id="next_month">next</button>

    <div id="calendar_body"></div>
</div>

js

<script>
    document.addEventListener('DOMContentLoaded', function(){

    });

    function initYearAndMonth(){
        const date = new Date();
        const year = date.getFullYear(); // 2024
        const month = date.getMonth() + 1; // month는 0월부터 시작
        const yearSelect = document.getElementById('year_select');
        const monthSelect = document.getElementById('month_select');

        yearSelect.innerHtml = '';
        monthSelect.innerHtml = '';

        for (i = 2000; i <= year; i++){
            const option = document.createElement('option');
            option.value = i;
            option.textContent = i;
            yearSelect.appendChild(option);
        }

        for (i = 1; i <= 12; i++){
            const option = document.createElement('option');
            option.value = i;
            option.textContent = i;
            monthSelect.appendChild(option);
        }

        yearSelect.value = year;
        monthSelect.value = month;
    }
</script>

실제 구현 모습

내일 목표

calendar_body 에 캘린더 렌더링.