2023년 군 장병 대상 AIㆍSW 인재양성 사업
구름 SW개발 중급과정(PY) Django 실습 정리
HTML 렌더링 구성하기
- 우선 우리가 작업하고 있는 폴더에 'templates'라는 폴더를 만들어준다.
- 추가로 'posts'를 'templates' 하위 폴더로 만들어준다.
- 마지막으로 'posts' 폴더에 'main.html'이란 html 문서를 만들어준다.
# views.py
def main(request): # 함수 이름이랑 html 이름이랑 맞춰주면 좋음
return render(request, 'posts/main.html') # render에서 항상 templates 폴더에 있는 html을 가져옴# urls.py
from posts.views import main
urlpatterns = [
...
path('', main), # ''는 빈 경로로 사이트 메인을 뜻함
]# settings.py
import os
TEMPLATES = [
...
'DIRS': [os.path.join(BASE_DIR, 'templates')], # DIRS 부분만 설정
# 기본 경로 인식을 못해서 기본 경로를 'templates'로 잡아주는 과정임
...
]링크 타고 다른 페이지 넘어가기
- 'templates' 폴더 아래에 'lovely'란 폴더를 만들어준다.
- 'lovely' 폴더 아래에 'first, second, third'란 제목의 html 문서를 만들어준다.
$ python manage.py startapp lovely # 'lovely' 라는 앱 생성# settings.py
INSTALLED_APPS = [
...
'lovely',
]# lovely/views.py
def first(request):
return render(request, 'lovely/first.html')
def second(request):
return render(request, 'lovely/second.html')
def third(request):
return render(request, 'lovely/third.html')# urls.py
from lovely.views import first, second, third
urlpatterns = [
...
path('first/', first),
path('second/', second),
path('third/', third),
]include
현재 urls.py에서 모든 경로를 다루고 있는데, 지금은 경로의 개수가 얼마 안되서 지저분하게 보이지 않지만, 앱이 많아지고 urls.py에 모든 경로를 집어 넣으면 코드가 방대해지고 유지보수가 어려워짐. 그것의 해결방안은 'include'로 따로 관리하는 것임.
# urls.py
...
from django.urls import path, include # 'include' 추가
urlpatterns = [
... # 기존 first, second, third 경로 삭제
path('lovely/', include('lovely.urls')) # 추가
]# lovely/urls.py # 파일 생성
from django.urls import path
from .views import first, second, third
urlpatterns = [
path('first/', first, name="first"), # name 지정을 해주면 html에서 하이퍼링크 코딩을 할때 경로 설정이 편리해짐
# <a href='{% url "first" %}'>first</a>
# 이런 식으로 간편하게 경로 설정이 가능
# 추가로 동일한 name이 생길 경우엔 예) app_name = "lovely" 처럼 현재 파일에 변수 선언을 한 뒤 {% url "lovely:first" %}로 사용 가능함
path('second/', second, name="second"),
path('third/', third, name="third"),
]모든 HTML에 스타일 적용하기
$ touch templates/base.htmlBootstrap으로 뼈대 만들기 Bootstrap 홈페이지에서 docx 링크에 들어가서 템플릿을 복사해서 base.html에 붙여넣어준다.
# base.html
<body>
{% block content %} # 'content'라는 이름의 블럭을 만듦
{% endblock %} # 블럭을 닫음
...
<body>- 블럭(block): 다른 html을 만들어서 그 html은 위, 아래 구조를 반복하지 않고 그대로 가져오는데 block content 안으로 새로운 내용만 들어가게함
# main.html
{% extends 'base.html' %} # base.html 가져오기
{% block content %}
<h1>
Hello, Django!
</h1>
<a href='{% url "lovely:first" %}'>first</a>
<a href='{% url "lovely:second" %}'>second</a>
<a href='{% url "lovely:third" %}'>third</a>
{% endblock %}# first.html (second, third 모두 이와 같이 설정해줌)
{% extends 'base.html' %}
{% block content %}
<h1>
... page
</h1>
{% endblock %}- 모든 프로젝트에 style을 적용하기 위해선 static이란 기능을 사용해야 함
- static은 정적 파일로써 프로젝트 안에 있으면서 우리가 계속 재사용 할 수 있으면서 변하지 않는 css, js, fonts 같은 것들을 말함
- static도 사용하기 위해서 경로 설정을 해주어야 함
- 프로젝트 폴더 및에 'static' 폴더 생성하고 그 밑에 css, js 등 필요한 폴더 생성
# settings.py
STATIC_URL = ...
STATICFILES_DIRS = [ # 추가
os.path.join(BASE_DIR, 'static')
]# base.html
{% load static %} # static을 사용하기 위해서 최상단에 추가
<!doctype html>
...
<link rel="stylesheet" href="{% static 'css/project.css' %}"> # project.css 가져오기Include로 HTML 소스 관리하기
- 앞에서 언급했던 Include는 중복된 소스 코드(navbar, footer 등)를 관리하기 위해서 필요한 기능임
- Bootstrap에서 navbar 가져오기 docx에서 navbar 검색하고 적절한 navbar code를 복사
- include를 통해서 가져오는 html 같은 경우에는 파일명 맨 앞에 '_'를 붙여준다. 강사님의 방식이라고 하는데 괜찮은 팁 같음
# templates/share/_navbar.html # 폴더, 파일 생성 후 코드 추가
<nav class="..."> # Bootstrap에서 복사해둔 navbar 코드 붙여넣기모든 HTML에 적용하기
# base.html
<body>
{% include 'share/_navbar.html' %} # body 태그 최상단에 추가
...원하는 HTML만 적용하기
{% extends 'base.html' %}
{% block content %}
{% include 'share/_navbar.html' %} # 'content' 블럭 안에 추가
<h1>
Hello, Django!
</h1>
...
{% endblock %}정적 이미지 삽입
- static 폴더 아래에 필요한 유형의 폴더 생성 (ex: img, video...)
- 예시 사진 다운로드 받고 img 폴더에 넣기
# main.html
{% extends 'base.html' %}
{% load static %} # static을 사용하기 위해서 반드시 추가
...
<img src="{% static 'img/hanni.jpg' %}" alt="">
{% endblock %}
GNU CS 21