Django Template

HTML, CSS를 공부할 때 아래 그림처럼 CSS, fonts, images, index.html 이 4개의 파일을 구성해서 공부한 적이 있을 것이다.

• 

하지만, 이렇게 구성할 경우 정적으로 내용이 고정되어 있어 수정을 할 때 하나하나 모두 변경해주어야 하는 불편함이 있다. 그런데, django를 이용하면 각각의 정보는 데이터베이스에서 가져오고, 날짜같이 매번 달라지는 부분은 동적으로 구성하여 새로운 페이지를 만들 수 있다.

이미 우리는 Django 템플릿과 렌더링에 대해 배운바 있는데 다시 한번 흐름을 살펴보고 템플릿을 적용시켜보자.

• 일단 css, fonts, images, index.html 파일을 templates/foods앱에 넣어주자. 그럼 아래와 같은 디렉토리 구조가 될 것이다.
  
• 사용자가 우리의 웹페이지에 들어오기 위해 URL(https://domain/foods/index/)을 입력하면 맨 먼저 project app의 urls.py에서 /foods라는 문자열 패턴매칭을 통해 foods app의 urls.py로 넘긴다.
  
• foods app의 urls.py에서는 그다음의 문자열 패턴 /index과 매칭이 되므로 동일 앱의 views에서 index 함수를 호출시킨다.
  
• 호출된 index 함수에서는 아까전에 우리가 넣어준 템플릿인 foods/index.html 파일을 render하여 응답(Response)을 한다.
  
• 결과값은 다음과 같은데 CSS 적용과 images 파일은 정상적으로 적용되지 않았다. 어떻게 해야될까?
  

Django 정적 파일 (static files)

앞서 살펴보았던 index 템플릿에 css와 image가 적용되지 않았는데 이를 해결하기 위해서는 static files 이라는 개념을 알아야 한다.

• 위 CSS, JS, image, fonts 같은 파일을 정적파일이라고 하는데, 그냥 templates/foods/css, templates/foods/image와 같이 템플릿 디렉토리 안에 index.html과 동일선상에 넣어버리면 렌더링이 제대로 되지 않는다.

• 따로 static 디렉토리를 만들어 주어야 렌더링이 제대로 되는데 이 디렉토리도 재미있는 특징이 있다.

• templates 디렉토리 구조가 샌드위치 구조로 되어있는데, static 디렉토리 구조도 이 구조와 동일하게 샌드위치 구조로 만들어 주어야 한다.

• 이제 static/foods에 정적파일들을 넣어주는데 그냥 넣으면 지저분하니까 위 그림처럼 따로 css디렉토리, fonts디렉토리, images디렉토리를 만들어 각 디렉토리에 맞는 파일들을 집어넣자.

• 정적파일을 적용하기 위해서는 index.html에 그러한 의미를 전달해주어야 한다.
  • {% load static %} : 정적파일 사용하겠다는 구문
    
• 정적파일을 사용하겠다고 했으니, 템플릿에 있는 경로를 정적파일이 있는 경로로 변경해주자.
  • {% static '파일경로' %} : 정적파일 적용
    
  • 맨위에서 static 디렉토리를 적용하겠다고 써놓았으니, static/foods/css/styles.css와 같이 써줄필요 없이 static을 제외한 foods/css/styles.css부분만 써주면 된다.
• 나머지 이미지도 모두 템플릿 태그를 이용하여 경로를 지정해주자.
  
• 이제 이쁘게 CSS적용도 되었고 이미지도 잘 나온다.