작정하고 Django (9) - include/ extends/ block 구문을 이용한 뼈대 html만들기 : Django로 Pinterest 따라하기

페이지의 위 , 중간 , 아래 부분 구현하기

Templates 폴더에 head.html 파일을 추가하여 head 부분에 해당하는 코드를 작성할 준비를 한다.

head.html 부분의 구성

base.html의 구성 include 기능을 사용하여 head.html 부분을 포함한다는 의미를 지정한다.

** Tip : 똑같은 div 구문을 작성할 때 Alt+마우스 왼쪽 클릭을 사용하면 동시에 여러 코드를 입력할 수 있음.

페이지의 위 , 중간 , 아래 부분을 담당하는 div 구역을 3개로 지정하여 설정을 주는 코드.
(pinterest 페이지의 위 중간 아래 부분을 담당하는 것)

python manage.py runserver 코드를 입력하여 페이지 변화 결과 확인.

코드의 위, 아래를 담당하는 header와 footer 구역을 html 파일로 따로 지정하고
base.html에서 include를 하는 코드를 진행함.

header와 footer에는 각각의 div 코드가 담겨있음.

코드의 중간 부분 따로 지정 (extend사용)

코드의 중간 부분을 다음과 같은 형태로 만든다.

accountapp 에서 따로 templates 디렉토리를 만들고, 그 안에 다시 accountapp 디렉토리, 그 안에 hello_world.html 파일을 만들어
중간부분에 해당하는 내용을 작성한다. 여기서 extend를 사용하여 base.html를 extend한다는 구문을 작성한다.

--> 이 작업을 왜 하느냐 ? 나중에 가독성을 향상시키기 위함. (어떤 장소에서의 .html 파일인지 위치를 명확히 알 수 있음.)

작업 테스트

작업 테스트를 위한 h1 태그의 testing 구문 입력

views.py 에서 기존에 base.html 파일로 지정되어 있는 것을 accountapp 안에 있는 hello_world.html 파일로 변경해주는 과정

변경된 결과