Python with Django : 장고 웹 프로그래밍 static(정적) 설정하기(4)

저번 글에서는 클라이언트 사이트를 어떻게 꾸밀건지에 대한 것과 html 소스를 세분화하는 작업(템플릿 상속)에 대해 배워보았습니다. 이번 글에서는 templates(html 파일들을 관리하는 폴더)와 같이 css, fonts, img, js 파일들을 관리할 수 있는 static 폴더를 생성해보도록 하겠습니다.

1. static 폴더 생성

- templates : index, teamInfo 등과 같이 html 문서들을 관리하는 폴더

- static : html 문서들을 제외한 css, fonts, img, js 등 나머지 문서들을 관리하는 폴더

다른 블로그분들이 정리한 내용을 보면 보통 templates와 static폴더는 APP 안에서 관리하시던데 저도 동일하게 APP안에 templates 폴더와 static폴더를 이동하도록 하겠습니다. 

 

원래 fin이라는 APP 밖에 있었던 templates과 static폴더를 fin APP 안으로 옮겼습니다. 그리고 static폴더 안에는 css 문서들을 관리할 수 있는 css폴더도 같이 생성하였습니다.

 

2. static폴더를 settings.py에 설정하기

static폴더를 생성하였으면 우리는 이제 settings.py에서 static file의 위치를 지정해주는 작업을 해야합니다. [STATICFILES_DIRS]는 fin(APP) 안에 [static] 디렉토리가 있고, 이 디렉토리 안에 static file들을 지정해 놓았다라고 알려주는 내용입니다.

[STATIC_ROOT]는 여러 APP(현재는 fin만 있지만 fin말고 다른 APP도 있는경우) 안에 static 폴더들이 각각 있을 경우 이것을 [STATIC_ROOT]에 설정되어있는 [static] 디렉토리에 모을 것이라는 내용입니다.

 

3. static file 모아주는 명령어 실행

(dJangoVenv) C:\dev\Python\finpmProject>python manage.py collectstatic

저는 비록 fin이라는 APP뿐이지만 collectstatic 명령어를 써보도록 하겠습니다. CMD창에 해당 명렁어를 실행했을 때 사진과 같이 나오면 정상적으로 처리가 된 것입니다. 만약 정상적으로 처리되었다면, Project ROOT에 [static] - [admin]이라는 폴더가 새로 생성된 것을 확인할 수 있습니다. 또한 fin APP에 있던 css파일도 같이 collection된 것을 확인할 수 있네요!

 

4, static 활용하기

<!-- teamInfo.html -->
{% extends 'base.html' %}
{% block content %}
<style>
.tableline {border:1px solid #908d8d;display: table;width:100%;}
.tablerow {display:table-row;}
.tablecell_h {display: table-cell;padding:5px 20px;height:37px;background-color: #eaeaea;border-bottom:1px solid #908d8d;border-right: 1px solid #908d8d;text-align:center;font-weight: bold;}
.tablecell_he {display: table-cell;padding:5px 20px;height:37px;background-color: #eaeaea;border-bottom:1px solid #908d8d;text-align:center;font-weight: bold;}
.tablecell {display: table-cell;padding:5px 20px;height:37px;border-bottom:1px solid #908d8d;border-right: 1px solid #908d8d;text-align:center;}
.tablecell_e {display: table-cell;padding:5px 20px;height:37px;border-bottom:1px solid #908d8d;text-align:center;}
.tablecell_last {display: table-cell;padding:5px 20px;height:37px;border-right: 1px solid #908d8d;text-align:center;}
.tablecell_laste {display: table-cell;padding:5px 20px;height:37px;text-align:center;}
.tablecell a:visited {color:#474747;}
.tablecell_e a:visited {color:#474747;}
.tablecell_last a:visited {color:#474747;}
.tablecell_laste a:visited {color:#474747;}
.tablecell a:link {text-decoration: none;}
.tablecell_e a:link {text-decoration: none;}
.tablecell_last a:link {text-decoration: none;}
.tablecell_laste a:link {text-decoration: none;}
.tablebank {height:37px;}
.tablemodule1 {height:37px;}
</style>
<div class="container" style="width:100%;">
  <div style="width:1024px;height:400px;margin:0 auto;">
      <div style="margin:0 21 0 22px">
          <h1 style="margin-top:30px;">Project Management Page</h1>
          <div class="toptextarea">
              <span style="color:crimson;">* 해당 홈페이지는 파이썬 공부를 위한 테스트용 홈페이지입니다. </span>
          </div>
          <!-- Table Layout -->
          <div style="margin-top: 20px;">
            <div class="tableline">
                <div class="tablerow">
                    <div class="tablecell_h" style="width:130px;">팀명</div>
                    <div class="tablecell_h" style="width:180px;">팀닉네임</div>
                    <div class="tablecell_h" style="width:180px;">팀멤버수</div>
                    <div class="tablecell_h" style="width:130px;">비고</div>
                </div>
                {% for team in teams %}
                <div class="tablerow">
                    <div class="tablecell" style="width:130px;">{{ team.team_nm }}</div>
                    <div class="tablecell" style="width:180px;">{{ team.team_nick }}</div>
                    <div class="tablecell" style="width:180px;">{{ team.team_mems_cnt }}</div>
                    <div class="tablecell" style="width:130px;">{{ team.bigo }}</div>
                </div>
                {% endfor %}
            </div>
          </div>
          <!-- Table Layout -->
          <iframe id="downframe" style="width:1px;height:1px;visibility: hidden;"></iframe>
      </div>
  </div>
</div>
{% endblock %}

정적(static) 파일들을 관리할 수 있는 [static]폴더도 생성했겠다 이제는 직접 사용을 해보도록 하겠습니다. 제가 이 [static]폴더를 만든 이유는 바로 teamInfo.html과 같이 html 안에 있는 style들을 따로 빼기 위함인데요. style에 관련된 소스들을 다 정리해보도록 하겠습니다.

 

1) base.html에 style 소스 빼내기

우선 [fin] - [static] - [css] 폴더 안에 cotent.css 라는 css 문서를 하나 만들겠습니다.

 

{% extends 'base.html' %}
{% block content %}
<div class="container" style="width:100%;">
  <div style="width:1024px;height:400px;margin:0 auto;">
      <div style="margin:0 21 0 22px">
          <h1 style="margin-top:30px;">Project Management Page</h1>
          <div class="toptextarea">
              <span>* 해당 홈페이지는 파이썬 공부를 위한 테스트용 홈페이지입니다. </span>
          </div>
          <!-- Table Layout -->
          <div style="margin-top: 20px;">
            <div class="tableline">
                <div class="tablerow">
                    <div class="tablecell_h" style="width:130px;">팀명</div>
                    <div class="tablecell_h" style="width:180px;">팀닉네임</div>
                    <div class="tablecell_h" style="width:180px;">팀멤버수</div>
                    <div class="tablecell_h" style="width:130px;">비고</div>
                </div>
                {% for team in teams %}
                <div class="tablerow">
                    <div class="tablecell" style="width:130px;">{{ team.team_nm }}</div>
                    <div class="tablecell" style="width:180px;">{{ team.team_nick }}</div>
                    <div class="tablecell" style="width:180px;">{{ team.team_mems_cnt }}</div>
                    <div class="tablecell" style="width:130px;">{{ team.bigo }}</div>
                </div>
                {% endfor %}
            </div>
          </div>
          <!-- Table Layout -->
          <iframe id="downframe" style="width:1px;height:1px;visibility: hidden;"></iframe>
      </div>
  </div>
</div>
{% endblock %}

.tableline {border:1px solid #908d8d;display: table;width:100%;}
.tablerow {display:table-row;}
.tablecell_h {display: table-cell;padding:5px 20px;height:37px;background-color: #eaeaea;border-bottom:1px solid #908d8d;border-right: 1px solid #908d8d;text-align:center;font-weight: bold;}
.tablecell_he {display: table-cell;padding:5px 20px;height:37px;background-color: #eaeaea;border-bottom:1px solid #908d8d;text-align:center;font-weight: bold;}
.tablecell {display: table-cell;padding:5px 20px;height:37px;border-bottom:1px solid #908d8d;border-right: 1px solid #908d8d;text-align:center;}
.tablecell_e {display: table-cell;padding:5px 20px;height:37px;border-bottom:1px solid #908d8d;text-align:center;}
.tablecell_last {display: table-cell;padding:5px 20px;height:37px;border-right: 1px solid #908d8d;text-align:center;}
.tablecell_laste {display: table-cell;padding:5px 20px;height:37px;text-align:center;}
.tablecell a:visited {color:#474747;}
.tablecell_e a:visited {color:#474747;}
.tablecell_last a:visited {color:#474747;}
.tablecell_laste a:visited {color:#474747;}
.tablecell a:link {text-decoration: none;}
.tablecell_e a:link {text-decoration: none;}
.tablecell_last a:link {text-decoration: none;}
.tablecell_laste a:link {text-decoration: none;}
.tablebank {height:37px;}
.tablemodule1 {height:37px;}

.toptextarea {color:crimson;}

 

그리고 teamInfo.html 안에 있던 <style></style> 코드들을 잘라내기 한 다음 아까 만들었던 content.css 안에 붙여넣기 합니다.

 

2) base.html에 해당 css소스 연결하기

{% load static %}
    <!-- HEAD START -->
    <head>
        <meta charset="utf-8">
        <title>Project Management Page</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="{% static 'css/content.css' %}">
      </head>

css소스를 나눈다고 해서 자동으로 반영되는 것이 아니라 이제 static을 연결해주 작업이 필요합니다. {% load static %}은 [static] 설정한 것들을 해당 html 문서로 불러 들이는 것을 의미합니다. 그 다음 <link rel="stylesheet" href="{% static 'css/content.css' %}">은 [static]에 있는 파일 중 어떤 것을 적용하는지에 대한 경로를 설정하는 것을 의미합니다.

* 참고 : 제가 참고해서 보는 블로그는 분리한 html 문서에 바로 load static을 넣어 처리하고 있었습니다. 근데 저는 이제  teamInfo.html이 아닌 base.html에 load static을 넣었죠. 제가 이렇게 넣은 이유는 teamInfo.html은 단순히 content만 사용할 html이기 때문입니다. 저도 아직 파이썬 & 장고를 배워가고 있는 입장이기에 이것이 정확하게 맞다라고 말씀드릴 순 없지만 우선 저는 이렇게 진행해보도록 하겠습니다. 훗날 이것이 잘못되었다면 아마 해당 내용을 바꿀 수도 있습니다.

 

3) 서버 실행해서 확인하기

(dJangoVenv) C:\dev\Python\finpmProject>python manage.py runserver

css가 잘 적용되는지 이제 체크해봅시다. python manage.py runserver 명령어를 입력 후 사이트에 들어가 확인해보니 정상적으로 잘 적용되는 것을 확인할 수 있었습니다.