돌아가기

달력 만들기

중요도: 4

createCalender(elem, year, month) 라는 함수를 작성해 보세요.

이 함수는 주어진 연도/월의 달력을 생성하고 elem 안에 추가해야 합니다.

달력은 각 주를 <tr>, 날짜는 <td>로 나타내는 표여야 하며 표의 최상단은 월요일로 시작해서 일요일로 끝나는 요일이 적힌 <th> 여야 합니다.

예를 들면 createCalender(cal, 2012, 9)cal 요소 안에 아래 달력을 생성합니다.

참고로 이 과제는 달력을 생성하는 것만으로 충분하며 클릭을 비롯한 동작은 구현하지 않아도 좋습니다.

샌드박스를 열어 정답을 작성해보세요.

여기서는 표를 "<table>...</table>" 처럼 문자열의 형태로 생성한 후 innerHTML 을 사용해 문서에 삽입하는 방식을 소개하겠습니다.

방법:

  1. 먼저 <th>를 사용해 표의 헤더(header)를 만든 후 요일을 적어줍니다.
  2. d = new Date(year, month-1) 형식으로 날짜 객체를 생성합니다. 이러면 month 로 대입한 월의 첫 번째 날을 구할 수 있습니다. (자바스크립트에서는 월을 0부터 시작한다는 점에 유의하세요.)
  3. 첫번째 열부터 d.getDay() 로 구한 각 달의 첫번째 날까지의 빈칸은 <td></td> 로 채워주세요.
  4. d.setDate(d.getDate()+1)을 사용해 d객체의 날짜를 증가시키세요. d.getMonth() 로 구한 달이 다음 달로 변하기 전까지 <td>를 사용해 새로운 칸을 추가하면 됩니다. 만약 새로운 칸이 일요일이라면 “</tr><tr>” 를 사용해 다음 주로 넘어가세요.
  5. 달력이 완성되었지만 마지막 행에 빈 공간이 남아있다면 빈 <td> 를 사용해 달력을 사각형으로 만들 수 있습니다.

샌드박스를 열어 정답을 확인해보세요.