JangGeonWu
janggeonwu97
JangGeonWu
전체 방문자
오늘
어제
  • 분류 전체보기 (78)
    • SQLD (21)
    • 개인 공부용 (17)
    • Django (9)
    • Tableau (6)
    • ElasticSearch (8)
    • 빅데이터 엔지니어 (5)
    • Spring 퀵 스타트 (0)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

  • 개인 공부 기록용 블로그

인기 글

최근 글

티스토리

hELLO · Designed By 정상우.
JangGeonWu

janggeonwu97

템플릿 모듈화 및 상속
Django

템플릿 모듈화 및 상속

2022. 10. 27. 16:53

템플릿을 왜 모듈화할까?

편하니까!

 

일반적으로 메인 영역을 제외하고 나머지 영역은 디자인이 일관되게 유지되어야 한다.

즉, 그 '나머지 영역'을 미리 만들어놓고 가져다 쓰면 편할 것이다.

 

1. 프로젝트 전체적으로 쓰이는 템플릿 구성하기

우선, templates 폴더를 생성한다.

그리고 base.html, navbar.html, footer.html을 생성한다.

index.html에서 해당 영역을 가져와 base.html에 입력

templates/base.html
templates/base.html

이 base.html은 부모가 되어 자식에게 상속시켜야 한다.

그렇게 하기 위해, main area block을 명시해준다.

templates/base.html

이제, index.html로 가서 main area block을 정의해준다.

extends를 추가해 base.html의 내용을 상속받겠다는 언급도 해준다.

blog/templates/blog/index.html
blog/templates/blog/index.html

 

그러고 나서, settings.py에서 TEMPLATES의 DIRS을 아래와 같이 수정한다.

settings.py

 

2. Navbar, Footer도 완성하기

base.html에서 navbar와 footer에 해당하는 영역을 각각 navbar.html, footer.html에 옮긴다.

templates/navbar.html
templates/footer.html

이후, base.html에 include를 이용하여 두 html 템플릿을 불러온다.

templates/base.html

실제 화면은 바뀌지는 않았지만, 이러한 방식으로 간결하게 표현이 가능하다.

 

'Django' 카테고리의 다른 글

다대일 관계 구현하기  (0) 2022.10.28
페이지 구성 개선하기  (0) 2022.10.27
미디어 파일 관리하기  (0) 2022.10.27
부트스트랩과 정적 파일 적용하기  (0) 2022.10.27
장고 프로젝트에서 앱, 웹 페이지 개발하기  (0) 2022.10.26
    'Django' 카테고리의 다른 글
    • 다대일 관계 구현하기
    • 페이지 구성 개선하기
    • 미디어 파일 관리하기
    • 부트스트랩과 정적 파일 적용하기
    JangGeonWu
    JangGeonWu

    티스토리툴바