220117 TIL

TIL DAY 158

오늘 배운 일

✔️ Django 웹 개발

1. 디자인 입히기 II

이번에는 상세 보기 페이지에 디자인을 입혀보도록 하겠다.

우리의 costory 프로젝트에서 post_detail 템플릿을 보면 블록 지정이 안돼있다.

그리하여 한 번 수정해보겠다.

전과 마찬과지로 상단에 상속할 템플릿과 load static 을 적어주겠다.

post_detail.html

다음으로는 CSS 블록을 만들어준다.

이렇게 블록안에 css 라고 적어준다.

그리고 밑에 있는 link 를 잘라내서 안에다 붙여넣어준다.

다음으로 href 경로를 static 을 이용해서 바꿔주겠다.

그 다음으로는 글의 제목이 들어갈 부분을 작성해줄 것 이다.

base.html 에서 가보면 post_header 라는 블록이 있다.

base.html

이 부분이 포스트의 상세 페이지에서 글 제목이 되는 부분이다.
우리는 이 부분을 post_detail 템플릿에다가 만들어준다.

post_detail.html

그리고 밑에 있는 div 태그와 h1 그리고 p 태그들을 잘라내서 블록 안에다가 붙여넣어준다.

이제 제목이랑 작성일을 넣어줄 것 이다.

그런데 한 가지 의문이 있는게 왜 post_header 블록만 div 태그 그러니까 클래스 이름이 container 인 태그 안에 넣어서 작성하는 것 일까?

그 이유는 원래 디자인 템플릿의 구조가 그렇기 때문이다.

우리는 기존의 디자인에 맞춰서 데이터를 넣어주기만 하기 때문에 이런 식으로 기존의 디자인은 살려서 데이터를 넣어주어야 한다.

이 post_header 안에 데이터를 넣을때는 views.py 에서...

views.py

빨간색으로 그어져있는 부분이다.

이 부분에서 넘겨준 데이터를...

post_detail.html

빨간부분에다가 넘겨준다.

그리하여 글의 제목과 작성일인 post.title , post.dt_created 을 넘겨준다.

마지막으로 밑으로 스크롤을 내려서 content 블록을 만들어준다.

그리고 아까와 동일하게 밑에 있는 태그들을 잘라내서 붙여넣어준다.

그리고 하나씩 수정해준다.

우선 글의 본문에는 개행문자 linebreaksbr 이란 템플릿 필터를 적용해 주어야 한다.

그리고 수정일 또한 위에랑 마찬가지로 템플릿 변수를 사용해서 수정해준다.

밑에 있는 a 태그의 href 또한 바꿔준다.

URL 템플릿 태그를 이용해서 포스트 리스트로 가주도록 해준다.

다음으로 주석된 부분들을 처리해주고 개발 서버를 켜서 잘 작동하는지 확인해본다.

python3 manage.py runserver

http://127.0.0.1:8000/posts/1/

첫 번째 상세페이지로 가보면...

이렇게 디자인이 적용된 상세 페이지를 확인할 수 있다.

끝으로 :

• 오늘은 상세 페이지의 디자인을 구현해보는 시간을 가져보았다.
• 생각보다 어렵지 않아서 금방 이해되고 천천히 코드를 잘 살펴보면 내가 놓친 부분인 있는지 다시 확인해보자!