[Django #5] CSS

이번장에서는 약간의 styling이랑 design에 신경써볼것이다.

python으로 제공된 web framework가 있는것처럼 CSS framework들도 있다.

많은 CSS framework 중에서도 boostrapt이라는 css가 가장 유명하지만 이번기회에는 Materialize CSS 를 써볼것이다.

사용하기위해서 두가지 방법이 있는데 (hostedversion을 쓸지, 아니면 local에 다운받아서 고쳐쓸지...)할수있는데

일단 간단한 host에 있는걸 그냥 써보자.

CSS를 쓰려면 그 위치를 head tags에 추가해야한다.

Materialize CSS framework가 제공해주는 javascript도 같이 추가해주자.

mysite/main/templates/main/home.html head tags:

<head>
    {% load static %}
    <!-- Prism CSS -->
    <link href="{% static "tinymce/css/prism.css" %}" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!-- Compiled and minified JavaScript for Materialize CSS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>

이제 css에서 제공하는 cards 기능이 적용되는지 아래 코드를 추가해서 확인해보자:

  <div class="row">
    <div class="col s12 m6">
      <div class="card blue-grey darken-1">
        <div class="card-content white-text">
          <span class="card-title">Card Title</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>

이제 이것을 row tags 안에 우리의 loop를 추가해보자:

  <div class="row">
    {% for tut in tutorials %}
        <div class="col s12 m6">
          <div class="card blue-grey darken-1">
            <div class="card-content white-text">
              <span class="card-title">Card Title</span>
              <p>I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
              <a href="#">This is a link</a>
              <a href="#">This is a link</a>
            </div>
          </div>
        </div>
    {% endfor %}
  </div>

그리고 우리의 card의 title과 내용을 바꾸자.

  <div class="row">
    {% for tut in tutorials %}
        <div class="col s12 m6">
          <div class="card blue-grey darken-1">
            <div class="card-content white-text">
              <span class="card-title">{{tut.tutorial_title}}</span>
              <p>{{tut.tutorial_published}}</p>
              <p>{{tut.tutorial_content|safe}}</p>
            </div>
          </div>
        </div>
    {% endfor %}
  </div>

다음과 같이 바꼈다:

python tutorials

이렇게 간단히 CSS를 사용하는법을 알아봤는데 이에 관련된 자료는 더 찾아보면 엄청 나올것이다.

card size를 우리의 window 환경에 맞게 바꾸는걸 추천한다.

class="col s12 m6" 의 뜻은 card가 차지하는 크기의 뜻으로 small screen(mobile)에 맞춰져 있다. 12column(최대이다)

medium screen에는 card당 6 columns, 그래서 card가 2개 들어올수있고.

hoverable 옵션도 줄수잇다.

<div class="card blue-grey darken-1 hoverable">

published 내용은 좀 작게 설정하자

<p style="font-size:70%">Published {{tut.tutorial_published}}</p>

이제 메뉴 안내판 같은 navigation을 만들건데 이것은 모든 페이지에 적용되어야 할 사항이다.

모든 html에 이를 만드는것보다 Django에서는 extends와 includes기능이 있다.

extend라고 쓰면 미리 만들어둔 페이지의 코드가 이쪽에 replace되어 적용된다.

덮어쓸 내용

mysite/main/templates/main/header.html 을 일단 만들어두자:

<head>
    {% load static %}
    <!-- Prism CSS -->
    <link href="{% static "tinymce/css/prism.css" %}" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
  {% block content %}
  {% endblock %}
</body>

<!-- Prism JS -->
<script src="{% static "tinymce/js/prism.js" %}"></script>

이제 이 내용을 덮어쓰게끔 mysite/main/templates/main/home.html 을 아래와 같이 고치자:

{% extends 'main/header.html' %}

{% block content %}
  <div class="row">
    {% for tut in tutorials %}
        <div class="col s12 m6">
          <div class="card blue-grey darken-1 hoverable">
            <div class="card-content white-text">
              <span class="card-title">{{tut.tutorial_title}}</span>
              <p style="font-size:70%">Published {{tut.tutorial_published}}</p>
              <p>{{tut.tutorial_content|safe}}</p>
            </div>
          </div>
        </div>
    {% endfor %}
{% endblock %}

이제 header파일을 적용하면 모든 extends라고 적힌 html에 적용된다.

그럼 header에 nav bar을 만들어보자

navbar: Materialize CSS Navbar

여길 참고해서 만들면

  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">Logo</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>

이제 이를 body에 적용하면 최종 header.html file은 아래와 같다:

<head>
    {% load static %}
    <!-- Prism CSS -->
    <link href="{% static "tinymce/css/prism.css" %}" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>


<body>
  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">Logo</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>
  {% block content %}
  {% endblock %}
</body>

<!-- Prism JS -->
<script src="{% static "tinymce/js/prism.js" %}"></script>

python tutorials

nav bar에 클릭하면 하이퍼링크 내용을 수정

<head>
    {% load static %}
    <!-- Prism CSS -->
    <link href="{% static "tinymce/css/prism.css" %}" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>


<body>
  <nav>
    <div class="nav-wrapper">
      <a href="/" class="brand-logo">Tutorials</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="/">Home</a></li>
        <li><a href="https://discord.gg/sentdex">Community</a></li>
        <li><a href="/login">Login</a></li>
        <li><a href="/register">Register</a></li>
      </ul>
    </div>
  </nav>
  {% block content %}
  {% endblock %}
</body>

<!-- Prism JS -->
<script src="{% static "tinymce/js/prism.js" %}"></script>

아직 링크 내용은 안만들었지만 곧 만들게 될것이다.

로컬로 다운로드해서 색같은거나 테마를 바꿔서 내 로컬 css를 가져오게끔 할수있다.

<link rel="stylesheet" href="{% static "main/css/materialize.css" %}">

'Backup > Django' 카테고리의 다른 글

[Django #7] Messages (0)	2019.02.05
[Django #6] User Registration (1)	2019.02.04
[Django #4] Views and Templates (0)	2019.02.03
[Django #3] Admin and Apps (1)	2019.02.02
[Django #2] Models (0)	2019.02.02

내가 보려는 기술 블로그

[Django #5] CSS

'Backup > Django' 카테고리의 다른 글

티스토리툴바

[Django #5] CSS

'Backup > Django' 카테고리의 다른 글

'Backup/Django' Related Articles

티스토리툴바