django - CSS

1. static 디렉토리 만들기

(venv)prompt> mkdir static

/*--- 생략 ---*/

STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR/'static']

• 프로젝트 루트에 스태틱 디렉토리를 만들고난후 config/settings.py 에 스태틱 디렉토리 경로를 추가해준다. 
• static 또한 url이나 template 과 마찬가지로 pybo 앱 디렉토리 하단에 만들면 config/setting.py 수정없이 바로 쓸수 있다.
  하지만 이 방법은 앞의 url이나 template 과 마찬가지 이유로 프로젝트 관리를 불편하게 만든다. 
• static 디렉토리에는 img / javascript / css 등이 저장되고 관리된다. (마치 그래픽작업의 Assets 폴더 같은 느낌?)

 

2. 간단한 style.css파일을 만들어 넣자

textarea {
   width: 100%;
}

input[type=submit] {
   margin-top:10px;
}

 

 

3. pybo/question.html 파일에 style.css 파일을 적용해보자. 

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}"/>
<h1>{{ question.subject }}</h1>

/*--- 생략 ---*/

 

 

4. Bootstrap 적용

• 여기서 적용한 부트스트랩 버젼은 4.5.3버젼이다.
• 아래는 Qeustion_list.html

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}"/>
<div class = "container my-3">
  <table class="table">
    <thead>
    <tr class="thead-dark">
      <th>번호</th>
      <th>제목</th>
      <th>작성일시</th>
    </tr>
    </thead>
    <tbody>
    {% if question_list %}
    {% for question in question_list %}
    <tr>
      <td>{{ forloop.counter }}</td>
      <td>
        <a href="{% url 'pybo:detail' question.id %}">
          {{ question.subject }}
        </a>
      </td>
      <td>{{ question.create_date }}</td>
    </tr>
    {% endfor %}
    {% else %}
    <tr>
      <td colspan="3">질문이 없습니다.</td>
    </tr>
    {% endif %}
    </tbody>
  </table>
</div>

 

• 그리고 Question_list.html에도 부트스트랩을 적용해본다.
• 좀 더 깔끔해진 결과물을 확인할 수 있다.

{% load static %} 
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}"/>
<div class="container my-3">
   <h2 class="border-bottom py-2">{{ question.subject }}</h2>
   <div class="card my-3">
      <div class="card-body">
         <div class="card-text" style="white-space: pre-line;">
            {{ question.content }}
         </div>
         <div class="d-flex justify-content-end">
            <div class="badge badge-light p-2">
               {{ question.create_date }}
            </div>
         </div>
      </div>
   </div>
   <h5 class="border-bottom my-3 py-2">
      {{ question.answer_set.count }}개의 답변이 있습니다.
   </h5>
   {% for answer in question.answer_set.all %}
   <div class="card my-3">
      <div class="card-body">
         <div class="card-text" style="white-space: pre-line;">
            {{ answer.content }}
         </div>
         <div class="d-flex justify-content-end">
            <div class="badge badge-light p-2">
               {{ answer.create_date }}
            </div>
         </div>
      </div>
   </div>
   {% endfor %}
   <form action="{% url 'pybo:answer_create' question.id %}" method="POST" class="my-3">
      {% csrf_token %}
      <div class="form-group">
         <textarea name="content" id="content" class="form-control" rows="10"></textarea>
      </div>
      <input type="submit" value="답변 등록" class="btn btn-primary">
   </form>
</div>

 

 

 

위 문서는 이지스퍼블리싱에서 출간한 박응용님의 "점프투 장고"를 제가 공부하면서 요약한 내용입니다.
게시한 내용은 공부를 하면서 저만 알아볼 수 있게 요약한 부분들도 많으므로 부족한 내용은
직접 책을 구입하셔서 보시면 좋을 것 같습니다.