사용자의 관점에서 서비스를 제공받기 위해서는 template이 필수다.
저번에는 html을 이용해서 간단한 작업을 거쳤는데 이번에는 웹 사이트를 만들때 뼈대가되는 베이스 구조를 세웠다. 웹페이지는 크게 3부분으로 이루어져있는데 body에는 header,main, footer로 나누어진다. header에는 웹 사이트 이름, 게시판, 목차 , main에는 내용물, footer는 사이트의 세부설명이나 연락처, 주소등으로 주로 이루어져있는데 이 모든것을 전부 base html파일에 때려박기에 나중되면 복잡해 질 수 있으므로 templates 폴더가 따로 html파일을 만들었다.
base.html파일의 모습이다. 코드의 재사용성을 높이고 코드 수정을 용이하기 하기 위해직접 쓰지 않고 {% include 'head.html' %} include 문법을 이용하여 head.html파일 안에 있는 내용을 불러왔다. 이때 주의할점이 제가 중괄호와 %를 띄어쓰기 하는 바람에 html파일을 불러오지 못하는 문제가 생겼다. '% }' 이렇게 띄우지 말고 '%}' 두 철자를 붙여쓰자.
head.html에는 head 태그가 있는 모든 내용이 담겨 있다.body 태그 안에 있는 header, footer에서는 배경 style을 설정하였다.
main 부분은 둘과 다르다는것을 알 수 있다. 왜 다르게 구성했을까? header와 footer는 내용이 변하지 않지만 main은 각 게시물, 기사마다 내용이 다르고 계속 변하기 때문에 {% block content %},{% endblock %} 문법을 사용해 각 페이지마다 다른 내용을 가질 수 있게 한다.
account 앱폴더 안에 template 폴더를 만들었고 거기에 html파일을 만들어서 main 부분을 구성하였다.
base.html의 기본 구조를 그대로 가져와 block content 블록으로 싸여 있는 부분만 변경한다. 이렇게 함으로써 페이지마다 각기 다른 내용을 구성할 수 있게된다.
최종 출력물이다. 파란색 바탕이 header, 녹색이 main, 아래 검은색 배경이 footer부분이다.
