멋쟁이 사자처럼 at 한국교통대학교 7기

2019 KNUT X LIKE LION #7

코스 전체목록

닫기

템플릿 상속

글쓰기 페이지

  • 지금까지 만든 [글쓰기]의 버튼을 눌렀을 때의 화면은 다음과 같습니다.

 

  • [글쓰기] 페이지가 밋밋하니 꾸며보도록 합시다.
    앞에서 적용시켜보았던 부트스트랩을 활용하여 지금 페이지를 꾸며도 상관없습니다.
     
  • 하지만 저는 이번에는 다른 방식을 적용하여 페이지를 꾸며보도록 할 것입니다.
    [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]가 적용되고, 그 아래에 내용이 나타므로 정상적으로 적용된 것을 알 수 있습니다.

 

 

 

댓글

댓글 본문
버전 관리
KNUT X LIKE LION
현재 버전
선택 버전
graphittie 자세히 보기