[django] Django Template 템플릿 적용하는 법 ! + 정적 파일 관리 static files !

django를 사용해서 구현하면, 

 

정보들은 데이터 베이스에 저장하고,

날짜와 같이 매번 변경되는 정보는 바꿔서 새로운 웹 페이지를 구성할 수 있다.  

 

이번 포스팅에서는 웹 페이지의 변하지 않는 부분인 Template을 적용하는 방법에 대해 포스팅해보려고 한다. 

 

1. 템플릿 파일을 장고 프로젝트 안에 알맞게 넣어주기 

템플릿의 위치는 프로젝트 > foods 앱 디렉토리 > templates 디렉토리 > foods 디렉토리 안이다. 

 

2. 템플릿을 render해서 응답으로 돌려주기 

restaurant 디렉토리의 urls.py 파일을 해보면, 

foods/라는 path가 들어왔을때, foods 앱 디렉토리의 urls로 가라고 지시되어 있다. 

foods 디렉토리의 urls.py에 들어가보면 path로 index/가 들어오면 views.index로 가라고 지시되어 있다. 

마지막으로 views.py로 가면, 'foods/index.html'을 렌더링해서 HtppsResponse 객체로 만들어준다. 

 

그럼 이렇게 템플릿이 적용된 웹 페이지가 뜬다! 

하지만, 이렇게 CSS와 이미지가 적용되지 않는다.

이 문제를 해결하려면 정적 파일에 대한 이해가 필요하다.

 

 

정적 파일이란? (static files) 
= HTML 파일을 제외하고, 웹 페이지가 렌더링(Rendering)하는 과정에서 필요한 추가적인 파일 
= CSS, JS, PNG, FONT 등 

 

1. 정적파일을 만들때도 마찬가지로,

    foods > static > foods의 샌드위치 구조로 만들어준다. 

    foods 앱 디렉토리 안에, static 정적 파일 디렉토리를 만들고, 그 안에 foods 디렉토리를 만들어주는 식으로 ! 

2. foods 정적파일에 templates 디렉토리안에 있던 css, fonts, images 를 드래그 해서 넣어준다. 

3. 드래그로 css, fonts, images들을 옮겨 줬다면,

    templates/ foods 안의 css, fonts, images 파일들을 지워준다.

    index.html만 남겨둔다. 

자, 그럼 이제 정적 파일을 사용하기 위한 준비가 끝났다! 

 

4.  정적 파일 사용하기 

index.html 맨 위에 {% load static %} 이라고 적어준다. 

첫줄인 {% load static %}은  템플릿 랭귀지 중 템플릿 태그인데, static에 있는 정적 파일을 현재 이 템플릿 파일에서 사용한다고 알려주는 것을 역할을 한다. -> 정적 파일을 사용한다고 알려줌 

 

템플릿에 있는 경로를 정적파일이 있는 위치로 변경해주기 

 

(1) CSS 경로 바꾸기 

href에 css가 있는 경로들이 속성으로 들어가 있다. 

css의 경로를 아래와 같이 바꿔준다. 

{% static "정적 파일 css 경로" %}로 바꿔주면 static 파일안의 css에 접근할 수 있도록 경로가 수정된다. 

(2) 이미지 경로 바꾸기 

이미지의 경로는 src 이므로, src 경로 앞에 {% static "정적 파일 images 경로" %} 표시를 해준다. 

그리고 python manage.py runserver를 하면, 이렇게 템플릿의 css와 images까지 잘 적용되어 나오는 걸 볼 수 있다. 

정리하자면, HTML외에 css, js 등을 사용하기 위해서는 정적파일이 필요하다.

정적 파일을 넣어주는 디렉토리를 만들고, 

정적파일을 사용하기 위한 템플릿 태그 {% load static %}과 정적 파일의 경로를 바꿔줌으로써 정적파일을 사용할 수 있다!