10. 정적 파일 관리

  HTML만 가지고 웹 개발하기에는 너무 밍밍하다 마치 80, 90년도 홈페이지를 보는거 같으니 Bootstrap과 CSS, 이미지 파일로 보기좋게 꾸며 보도록 하겠다. 

 

 

● 포스트 목록 페이지에 Bootstrap 적용

 

blog_list.html 수정, static 폴더에 css 파일 관리, 경로 지정

 이전에 작성한 blog_list 파일을 post_list.html 파일에 그대로 붙여넣기를 하면 아래와 같이 딱 봐도 제대로 작동이 되지 않음을 알 수 있다. 분명히 bootstrap.min.css 파일이 존재 함에도 인식하지 못하고 있는 상태이다.

 

  이는 Django의 MTV 구조는 html 확장자가 붙은 파일은 views.py가 정의한 내용에 따라 내용들이 채워지게 되므로 정적인 파일이 아니라고 본다. 그렇기 때문에 정적 파일을 사용하겠다는 별도의 입력이 없는 한 bootstrap.min.css가 있다한들 이를 인식하지 못한다. 정적인 파일에 속한 css, js를 관리하기 용이하게 static 폴더를 만들어 정적 파일들을 집어넣은 후 {% load static %} 입력으로 static 파일 사용을 선언한 후 경로를 지정해 준다. 

  

 

  다시 정상적으로 출력 됨을 확인 할 수 있다.

 

 

실제 포스트 내용이 표시되도록 수정

  이전에 만든 blog.html에서 포스트 있는 것 처럼 만들었을 뿐이지만 이번에는 실제로 작성한 포스트가 출력되도록 수정해 보도록 하겠다. 

 

 

 

  이전에 작성했던 포스트 2개가 정상적으로 출력됨을 알 수있다. 1개는 아래로 스크롤 하면 보인다. 또한 Read more는 {{ p.get_absolute_url }}에 의해 누르면 해당 포스트의 상세 페이지로 이동한다. 

 

● 포스트 상세 페이지에 Bootstrap 적용

 

Start Bootstrap에서 포스트 상세 페이지 디자인 적용

 

  Start Bootstrap 웹 사이트에서 Templates → Blog → Blog Post를 클릭하여 다운로드 한 후 index.html 소스를 열어 복사 후 post_detail.html에 붙여넣고 수정한다. 

 

실제 포스트 내용이 표시되도록 수정