파이썬 Django Static Files CSS 파일을 프로젝트에 추가

파이썬 Django Static Files CSS 파일을 프로젝트에 추가 - My Tennis Club

당신의 컴퓨터에 5명의 멤버들이 있는 my_tennis_club 프로젝트를 갖게 될 것이다:

all_members.html

{% extends "master.html" %}

{% block title %}
  My Tennis Club - List of all members
{% endblock %}

{% block content %}

  <p><a href="/">HOME</a></p>

  <h1>Members</h1>

  <ul>
    {% for x in mymembers %}
      <li><a href="details/{{ x.id }}">{{ x.firstname }} {{ x.lastname }}</a></li>
    {% endfor %}
  </ul>
{% endblock %}

views.py

from django.http import HttpResponse
from django.template import loader
from .models import Member

def members(request):
  mymembers = Member.objects.all().values()
  template = loader.get_template('all_members.html')
  context = {
    'mymembers': mymembers,
  }
  return HttpResponse(template.render(context, request))

def details(request, id):
  mymember = Member.objects.get(id=id)
  template = loader.get_template('details.html')
  context = {
    'mymember': mymember,
  }
  return HttpResponse(template.render(context, request))

def main(request):
  template = loader.get_template('main.html')
  return HttpResponse(template.render(request))

이 프로젝트에 스타일시트를 추가하여 mystaticfiles 폴더에 넣으려고 한다:

my_tennis_club
    manage.py
    my_tennis_club/
    members/
    mystaticfiles/
        mystyles.css

CSS 파일의 이름은 당신이 선택한 것이고, 우리는 이 프로젝트에서 그것을 mytyles.css라고 부른다.

CSS 파일을 열고 다음을 삽입한다:

my_tennis_club/mystaticfiles/mystyles.css:

body {
background-color: violet;
}

파이썬 Django Static Files Master Template 수정

이제 css 파일이 있으므로 다음 단계는 이 파일을 마스터 템플릿에 포함하는 것이다:

마스터 템플릿 파일을 열고 다음을 추가한다:

my_tennis_club/members/templates/master.html:

{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="{% static 'mystyles.css' %}">
</head>
<body>

{% block content %}
{% endblock %}

</body>
</html>

파이썬 Django Static Files Settings 점검

settings.py 파일에 루트 디렉터리의 mystaticfiles 폴더에 대한 참조와 함께 STATICFILES_DIRS 목록이 포함되어 있고 STATICFILES_ROOT 폴더를 지정했는지 확인한다:

my_tennis_club/my_tennis_club/settings.py:

.
.
STATIC_ROOT = BASE_DIR / 'productionfiles'

STATIC_URL = 'static/'

#Add this in your settings.py file:
STATICFILES_DIRS = [
BASE_DIR / 'mystaticfiles'
]
.
.

파이썬 Django Static Files Static Files 수집

정적 파일을 변경할 때마다 collectstatic 명령을 실행하여 변경 내용을 적용해야 한다:

py manage.py collectstatic

프로젝트 초기에 명령을 실행한 경우 Django는 다음과 같은 질문을 표시한다:

You have requested to collect static files at the destination
location as specified in your settings:

C:\Users\Your Name\myworld\my_tennis_club\productionfiles

This will overwrite existing files!
Are you sure you want to do this?

Type 'yes' to continue, or 'no' to cancel:

'yes'를 입력한다. 그러면 정적 파일에서 수행된 모든 변경 사항이 업데이트되고 다음 결과가 나타난다:

1 static file copied to 'C:\Users\Your Name\minverden\my_tennis_club\productionfiles', 132 unmodified.

이제 프로젝트를 실행하면 다음과 같다:

py manage.py runserver

사용자 컴퓨터에서 모든 단계를 수행한 경우 사용자 자신의 브라우저에서 결과를 확인할 수 있다:
브라우저 창에서 주소 표시줄에 127.0.0.0.1:8000/members/를 입력한다.

아래 그림과 같이 화면에 표시가 될 것이다.

파이썬 Django Static Files collectstatic 활용예제

파이썬 Django Static File 스타일을 향상시켜보자

위의 예제에서는 프로젝트에 스타일시트를 포함하는 방법을 보여주었다.

보라색 웹 페이지로 끝났지만 CSS는 단순히 배경 색상을 변경하는 것 이상의 작업을 수행할 수 있다.

우리는 스타일을 더 많이 하고 싶고, 결국 다음과 같은 결과를 얻고 싶다:

먼저 mystyles.css 파일의 내용을 다음과 같이 바꾼다:

my_tennis_club/mystaticfiles/mystyles.css:

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
body {
  margin:0;
  font: 600 18px 'Source Sans Pro', sans-serif;
  letter-spacing: 0.64px;
  color: #585d74;
}
.topnav {
  background-color:#375BDC;
  color:#ffffff;
  padding:10px;
}
.topnav a:link, .topnav a:visited {
  text-decoration: none;
  color: #ffffff;
}
.topnav a:hover, .topnav a:active {
  text-decoration: underline;
}
.mycard {
  background-color: #f1f1f1;
  background-image: linear-gradient(to bottom, #375BDC, #4D70EF);
  background-size: 100% 120px;
  background-repeat: no-repeat;
  margin: 40px auto;
  width: 350px;
  border-radius: 5px;
  box-shadow: 0 5px 7px -1px rgba(51, 51, 51, 0.23);
  padding: 20px;
}
.mycard h1 {
  text-align: center;
  color:#ffffff;
  margin:20px 0 60px 0;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  background-color: #ffffff;
  background-image: linear-gradient(to right, #375BDC, #4D70EF);
  background-size: 50px 60px;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: transform .25s;
  border-radius: 5px;
  box-shadow: 0 5px 7px -1px rgba(51, 51, 51, 0.23);
  padding: 15px;
  padding-left: 70px;
  margin-top: 5px;
}
li:hover {
  transform: scale(1.1);
}
a:link, a:visited {
  color: #375BDC;
}
.main, .main h1 {
  text-align:center;
  color:#375BDC;
}

파이썬 Django Static File 템플릿 파일 수정

또한 템플릿을 몇 가지 변경해야 한다:

Master.html

모든 페이지에 동일한 상단 내비게이션이 설치되기를 원하므로 상단 내비게이션을 master.html에 삽입한다:

my_tennis_club/members/templates/master.html:

{% load static %}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="{% static 'mystyles.css' %}">
  <title>{% block title %}{% endblock %}</title>
</head>
<body>

<div class="topnav">
  <a href="/">HOME</a> |
  <a href="/members">MEMBERS</a>
</div>

{% block content %}
{% endblock %}

</body>
</html>

Details.html

debits.html에서는 div 요소에 멤버 세부 정보를 넣고 멤버에게 다시 링크를 제거한다. 왜냐하면 그것은 이제 마스터 템플릿의 탐색의 일부이기 때문이다.

my_tennis_club/members/templates/details.html:

{% extends "master.html" %}

{% block title %}
  Details about {{ mymember.firstname }} {{ mymember.lastname }}
{% endblock %}

{% block content %}
  <div class="mycard">
    <h1>{{ mymember.firstname }} {{ mymember.lastname }}</h1>
    <p>Phone {{ mymember.phone }}</p>
    <p>Member since: {{ mymember.joined_date }}</p>
  </div>
{% endblock %}

Main.html

main.html 템플릿에서 HTML 코드의 일부를 div 요소에 넣을 것이다:

my_tennis_club/members/templates/main.html:

{% extends "master.html" %}

{% block title %}
  My Tennis Club
{% endblock %}

{% block content %}
  <div class="main">
    <h1>My Tennis Club</h1>

    <h3>Members</h3>

    <p>Check out all our <a href="members/">members</a></p>
  </div>
{% endblock %}

Static Files 수집

static mystyles.css 파일에서 일부 변경을 수행했으므로 변경 내용을 적용하려면 collectstatic 명령을 실행해야 한다:

py manage.py collectstatic

이제 프로젝트를 실행하면 다음과 같다:

py manage.py runserver

결과가 어떻게 나타날지 알 수 있다:

이번 글에서는 파이썬 Django 스타일을 프로젝트에 추가하여 향상된 스타일을 보여주는 과정을 실습하였다.

꼭 손으로 눈으로 머리로 익히며 실습하기를 바란다.
모두 화이팅입니다.!!!

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지

'파이썬 > 파이썬기본문법' 카테고리의 다른 글

파이썬 Django PostgreSQL AWS 계정 만들기 (0)	2024.03.17
파이썬 Django PostgreSQL 개요 (0)	2024.03.16
파이썬 Django Static Files 추가 (0)	2024.03.14
파이썬 Django QuerySet - order_by() (0)	2024.03.13
파이썬 Django QuerySet filter (2)	2024.03.12

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

enjoyCoding

파이썬 Django Static Files CSS 파일을 프로젝트에 추가

파이썬 Django Static Files CSS 파일을 프로젝트에 추가 - My Tennis Club