달력 만들기
중요도: 4
createCalender(elem, year, month)
라는 함수를 작성해 보세요.
이 함수는 주어진 연도/월의 달력을 생성하고 elem
안에 추가해야 합니다.
달력은 각 주를 <tr>
, 날짜는 <td>
로 나타내는 표여야 하며 표의 최상단은 월요일로 시작해서 일요일로 끝나는 요일이 적힌 <th>
여야 합니다.
예를 들면 createCalender(cal, 2012, 9)
는 cal
요소 안에 아래 달력을 생성합니다.
참고로 이 과제는 달력을 생성하는 것만으로 충분하며 클릭을 비롯한 동작은 구현하지 않아도 좋습니다.
여기서는 표를 "<table>...</table>"
처럼 문자열의 형태로 생성한 후 innerHTML
을 사용해 문서에 삽입하는 방식을 소개하겠습니다.
방법:
- 먼저
<th>
를 사용해 표의 헤더(header)를 만든 후 요일을 적어줍니다. d = new Date(year, month-1)
형식으로 날짜 객체를 생성합니다. 이러면month
로 대입한 월의 첫 번째 날을 구할 수 있습니다. (자바스크립트에서는 월을 0부터 시작한다는 점에 유의하세요.)- 첫번째 열부터
d.getDay()
로 구한 각 달의 첫번째 날까지의 빈칸은<td></td>
로 채워주세요. d.setDate(d.getDate()+1)
을 사용해d
객체의 날짜를 증가시키세요.d.getMonth()
로 구한 달이 다음 달로 변하기 전까지<td>
를 사용해 새로운 칸을 추가하면 됩니다. 만약 새로운 칸이 일요일이라면“</tr><tr>”
를 사용해 다음 주로 넘어가세요.- 달력이 완성되었지만 마지막 행에 빈 공간이 남아있다면 빈
<td>
를 사용해 달력을 사각형으로 만들 수 있습니다.