2 편집기가 열리면 다음과 같이 코드를 작성합니다.
➊ <form></form> 태그를 작성하고 게시판의 제목을 입력할 <input> 태그, 내용을 입력할 <textarea> 태그, 전송 버튼인 <button> 태그를 추가하고 버튼의 속성을 type="submit"으로 설정합니다.
➋ 2장에서 만들었던 header와 footer 코드도 추가합니다. 위쪽에 {{>layouts/header}}를, 아래쪽에 {{>layouts/footer}}를 작성합니다.
templates/articles/new.mustache
{{>layouts/header}} ---- ➋ 헤더 레이아웃 적용
<form action=""> ------- ➊ 입력 폼 작성
<input type="text">
<textarea></textarea>
<button type="submit">Submit</button>
</form>
{{>layouts/footer}} ---- ➋ 푸터 레이아웃 적용
TIP 이 책은 스프링 부트 입문을 다루므로 HTML과 CSS 코드를 별도로 설명하지 않습니다. 그러나 책에서 다루는 내용이 그렇게 복잡하거나 어렵지 않기 때문에 검색해 보거나 다른 도서를 참고해 충분히 학습할 수 있습니다. 잘 모르는 HTML 태그나 CSS 속성이 나오면 인터넷에서 검색해 보고, 좀 더 체계적인 학습이 필요하다고 생각하면 관련 기본서를 통해 공부하기 바랍니다.
• 참고 도서: 코딩 자율학습 HTML + CSS + 자바스크립트(2022, 김기수 저)