ToDo 목록이 나타날 홈페이지를 간단히 만들어 봅니다.

head 태그 안에는 페이지 제목과 포함할 CSS가 들어있습니다. 제목을 표시할 때 사용하는 title은 홈페이지 라우팅 핸들러에서 넘겨준 title 값이 들어갑니다. 우리는 Bootstrap 라이브러리를 사용할 것이기 때문에 Bootstrap CSS를 포함합니다.

body 태그 안에는 페이지의 내용이 들어갑니다. 소갯말은 h1과 p 태그로 표현하고, 그 밑에는 ToDo 목록 인터페이스가 있습니다. 새로운 ToDo 항목을 추가하는 인터페이스는 Bootstrap의 form-inline 클래스를 이용해 한 줄로 표현합니다. 표는 index, 내용, 완료 버튼, 삭제 버튼으로 구성되어 있습니다. 새로운 ToDo 항목을 추가하면 tbody 로 추가될 것입니다.

body 태그 아래에는 jQuery와 Bootstrap 자바스크립트를 가져옵니다. 그리고 ToDo 목록을 가져오거나 각종 버튼의 기능을 구현한 todo.js 리소스를 가져옵니다.