글쓰기 페이지
- 지금까지 만든 [글쓰기]의 버튼을 눌렀을 때의 화면은 다음과 같습니다.
- [글쓰기] 페이지가 밋밋하니 꾸며보도록 합시다.
앞에서 적용시켜보았던 부트스트랩을 활용하여 지금 페이지를 꾸며도 상관없습니다.
- 하지만 저는 이번에는 다른 방식을 적용하여 페이지를 꾸며보도록 할 것입니다.
[Fixed navbar]가 위에 고정되어 있으며, 그 밑에 원래 내용이 출력이 되게 할 것입니다.
- 이를 위해서 [blogMain.html]에서 작성하였던 html 코드를 가져와서 적용해도 됩니다.
지금의 경우 [글쓰기]에 한정되어 있지만, 여러 페이지에 적용해야 되는 경우가 생긴다면 이는 코드의 중복이 많이 일어나게 됩니다.
- 이러한 현상을 방지하기 위해 템플릿 상속을 적용하여 페이지를 작성하도록 합시다.
템플릿 상속
- 말 그대로 html 문서 중 기본 뼈대가 되는 문서를 기본 템플릿으로 정하고, 이는 공통의 코드이므로 다른 문서에서 기본 템플릿의 코드가 필요하면 상속하여 가져다 쓰는 것입니다.
- 기본이 되는 템플릿을 'base.html'로 정합니다.
base.html 생성
- 템플릿 상속을 위해 'base.html'을 만들고 [글쓰기] 페이지에서 상속받도록 해봅시다.
[firstProject]에서 오른쪽 클릭을 합니다. [firstProject]-[New]-[Directory]를 클릭합니다.
[templates]를 입력하고 [OK]합니다.
새로 생성된 [templates]를 클릭한 뒤 오른쪽 클릭합니다. [templates]-[New]-[HTML File]를 클릭합니다.
[base]를 입력하고 [OK]합니다.
[base.html]이 생성되었습니다.
blogMain.html 수정
- 'base.html'을 생성한 김에 'blogMain.html'도 같이 수정하여 상속받아 봅시다.
기존에 작성해놓았던 [blogMain.html] 문서를 엽니다. 안에 있는 내용 전부를 복사합니다.
[base.html]에 붙여넣기 합니다.
스크롤을 내려 밑으로 내려오면 </nav>가 보입니다.
<main> </main> 태그를 지우고 다음 코드를 추가하여 작성합니다.
{% block content %}
{% endblock %}
- 우리가 필요한 것은 [navbar]이므로 [navbar]만 남기고 나머지는 삭제합니다.
- {% block content %} 와 {% endblock %} 사이에는 나머지 상속받는 템플릿의 내용이 들어갑니다.
즉, base.html 문서를 상속받는 템플릿이라면 [navbar]는 공통으로 상속받고, [content] 내용만 바뀌어서 나타나게 되는 것입니다.
다시 [blogMain.html]로 돌아옵니다. 이제 [navbar] 내용은 상속을 받으니 <main>만 남기고 나머지는 삭제하여 줍니다.
[firstProject]-[settings.py]를 엽니다. [TEMPLATES]를 다음과 같이 수정하여 줍니다.
'DIRS': [os.path.join(BASE_DIR, 'blogapp/templates')]를 지워줍니다. 'DIRS': [os.path.join(BASE_DIR, 'firstProject/templates')]로 바꾸어줍니다.
- 이유는 기본 템플릿의 위치가 변경되었기 때문입니다.
다시 [blogMain.html]로 돌아와서 다음을 추가해줍니다.
{% extends 'base.html' %}
{% block content %}
{% endblock %}
- 1번 라인은 'base.html'를 상속받는다는 의미이며 3번, 15번 라인은 'blogMain.html' 만의 내용을 나타내는 코드입니다.
createBlog.html 수정
- 위와 같은 방식으로 [createBlog.html]도 수정하여 봅시다.
{% extends 'base.html' %}
{% block content %}
{% endblock %}
'base.html' 적용 확인
- 서버를 구동시킨 후, 제대로 적용되었는지 확인합니다.
- 'blogMain' - 정상적으로 적용되었습니다.
- [글쓰기]를 누르면 [navbar]가 적용되고, 그 아래에 내용이 나타므로 정상적으로 적용된 것을 알 수 있습니다.
