www.youtube.com/watch?v=9aEsZxaOwRs&list=PL-51WBLyFTg2vW-_6XBoUpE7vpmoR3ztO&index=3
www.youtube.com/watch?v=kqyfEz7TNI0&list=PL-51WBLyFTg2vW-_6XBoUpE7vpmoR3ztO&index=4
이 포스팅은 다음과 같은 youtube 영상을 따라하면서 배운 내용과 학습 내용을 담은 것이다:
- Dennis Ivy - Templates & Inheritance | Getting Started | Django Framework (3.0) Crash Course Tutorials (pt 3) ()
- Dennis Ivy - Static Files & Images | Django Framework (3.) Crash Course Tutorials (pt 4)
나는 현재 Django Version 3.1.2 를 쓰고 있다. Django는 파이썬을 쓰는 오픈소스 웹 프레임워크이다. 웹사이트 만들때 주로 쓰며, 간단한 것이 큰 특징이다.
1. Making and Dealing with Templates Folder
앞으로 웹사이트에 html 파일들을 여러개 만들 것이다. 이 여러개의 html파일들을 관리해줄 폴더를 만들 것이다.
crm1
ㄴ accounts
ㄴtemplates
ㄴaccounts
ㄴ __pycyache__
ㄴ migrations
ㄴ __init__.py
ㄴ admin.py
ㄴ apps.py
ㄴ models.py
ㄴ tests.py
ㄴ views.py
ㄴ cmr1
ㄴ __pycyache__
ㄴ __init__.py
ㄴ asgi.py
ㄴ settings.py
ㄴ urls.py
ㄴ wsgi.py
ㄴ db.sqlite3
ㄴ manage.py우선 templates라는 폴더를 accounts app안에 만들어준다. 그 다음에는 templates folder 안에 accounts라는 폴더를 만든다. 그냥 templates 폴더 안에 html 파일들을 넣으면 될 것이지 왜 이렇게 하느냐? 이유는 이것이 "the python convention of doing things with templates" 이기 때문이다. 사실 나중에 새로운 app들이 추가될때도 그 app의 template들을 따로 보관하는 장소가 필요하기 때문에 app name마다 따로 분류해준다.
templates라는 폴더를 추가했기 때문에 settings.py를 바꿔줘야 한다고 말할 수도 있다. 하지만 Django는 처음부터 settings.py에 templates는 templates라는 폴더에서 들고 오라는 명령어가 있기 때문에, 따로 우리가 건드릴 필요는 없다.
다음으로는 한 예시를 들어보겠다. 예를 들어, 모든 html 파일 안에 다음과 같은 html 코드가 있을 수도 있다:
<!DOCTYPE html>
<html>
<head>
<title>CRM</title>
</head>
<body>
</body>
</html>
그렇다면 이렇게 redundant한 부분들은 어떻게 따로 빼놔서 깔끔하게 보이게끔 하고 새로운 html template에 필요한 부분만 새로 쓰면 되지 않을까? main.html 같은 곳에서 body tag 안에 다음과 같은 코드를 심어준다 (main.html이 모든 웹페이지의 근본이 되는 html이라고 생각하면 된다):
{% block content %}
{% endblock %}이제 products.html에서의 내용을 main.html의 저 두 중괄호 사이에 넣고 싶다면, 다음과 같이 쓸 수 있다:
{% extends 'accounts/main.html' %}
{% block content %}
<h1>Products</h1>
{% endblock %}
{% extends 'accounts/main.html' %}은 main.html의 {% block content %}와 {% endblock %}을 extend 시킬 수 있다는 의미이다. 따라서 이 두 {% block content %}와 {% endblock %} 사이에 내용을 써 넣으면, products.html 주소를 불러왔을 때, main.html의 body 사이에 h1 tag의 Products가 있는 것을 볼 수 있다.
2. Adding Bootstrap to the Templates
Bootstrap은 웹사이트를 쉽게 만들 수 있게 도와주는 html, css, js 프레임워크이다. 이를 통해 Dennis Ivy가 제공한 웹사이트를 더 역동적인 웹사이트로 만들 수 있다.
우선, bootstrap의 stylesheet과 script를 main.html에 붙여넣어야한다. stylesheet 코드는 <head>에, script 코드는
붙이면 stylesheet의 경우, 다음과 같은 코드가 나와야 한다:
...
<head>
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
...
script의 경우, 다음과 같은 코드가 나와야 한다:
...
<body>
{% block content %}
{% endblock %}
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
...이로써 Bootstrap을 우리 웹사이트에 적용시키는 것은 완료됐다. Bootstrap에 대해 더 자세히 알아보고 그에 알맞게 코딩을 하여 Bootstrap을 적용시킬 줄 알아야 할 것이다.
3. Static Files (CSS/JS/Images)
만약 html에 css, javascript, images를 추가하고 싶다면 어떻게 해야될까? css 와 javascript는 그래도 html에 직접 쓸 수 있으니 걱정은 없지만, image 같은 경우는 코드를 쓴다고 되는 것이 아니라 사진을 올려야되기 때문에 문제가 생기지 않나?
그래서 static 폴더를 만들어주고 그에 알맞게 settings.py에서 추가를 해줘야 한다. 우선 settings.py 설정법 부터 알아보자:
...
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
STATIC_URL = '/static/'
Settings.py의 맨 밑으로 내려가면 저런 code가 보일 것이다. 이를 다음과 같이 바꿔주면 된다:
...
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
BASE_DIR / "static"
]
STATICFILES_DIRS = [BASE_DIR / "static"] 만 추가하면 된다. Django에 staticfiles 설정 방법에 관련된 document가 있는데, 그것을 보고 하면 더 이해가 잘될 것이다.
그 후, static이라는 폴더를 만들고, 그 아래에 css, images, js 폴더를 만들면 된다:
crm1
ㄴ accounts
ㄴtemplates
ㄴaccounts
ㄴ __pycyache__
ㄴ migrations
ㄴ __init__.py
ㄴ admin.py
ㄴ apps.py
ㄴ models.py
ㄴ tests.py
ㄴ views.py
ㄴ cmr1
ㄴ __pycyache__
ㄴ __init__.py
ㄴ asgi.py
ㄴ settings.py
ㄴ urls.py
ㄴ wsgi.py
ㄴstatic
ㄴcss
ㄴmain.css
ㄴimages
ㄴjs
ㄴ db.sqlite3
ㄴ manage.py
여기서 중요한 것은 accounts 폴더 안에 만드는 것이 아닌 crm1 project 폴더의 바로 아래에 만들어야 settings.py에 써진 것처럼 파일들을 인식할 수 있다.
static/css 폴더 안에 main.css라는 폴더를 만들어 놨다. 그럼 이를 이제 어떻게 사용하면 될까?
main.html에 웹사이트 logo를 넣고 싶다고 가정해보자. 그렇다면 다음과 같이 코드를 쓰면 된다:
{% load static %}
...
<image src="{% static '/images/logo.png' %}">
...
static에서 파일을 끌어다 쓰는 모든 html 파일들에서는 {% load static %}이 포함되어 있어야한다.
