본문 바로가기
Pyhon/Django

[Pyhon/Django] 장고 기초#011. 장고 CSS(Cascading Style Sheets)

봉봉봉92 2022. 1. 2.

CSS(Cascading Style Sheets)

css는 마크업 언어(HTML과 같은)에서 웹 브라우저에 출력되는 html 파일의 외관을 꾸미는 역할을 합니다. 장고의 CSS는 기존 CSS와 차이점이 없지만, 다음 문서 진행을 위해서 CSS 작업을 선행해야 합니다. 이 문서에서도 CSS에 대한 내용을 다루지는 않고, 참고 튜토리얼을 단순히 따라서 진행하겠습니다. 이 문서에서는 장고 프로젝트에서 정적 파일을 로드하는 방식만 이해하면 충분하기 때문입니다.

튜토리얼에서는 부트스트랩(http://bootstrapk.com/) 프레임워크 3.2.0 버전을 사용합니다. post_list.html 파일에서 다음 head 태그 이하를 추가합니다.

<html>
​​​​<head>
​​​​​​​​<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
​​​​​​​​<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
​​​​</head>
</html>

다음으로 정적 파일(CSS)을 관리하기 위해서 static 디렉토리를 생성하고, 그 아래 css 디렉토리와 blog.css 파일을 이어서 생성합니다. 현재까지 디렉토리 트리는 다음과 같습니다.

  • helloWorld
    •  blog
      • migrations
      • templates
      • static
        • css
          • blog.css

다시 post_list.html 파일을 열어 다음과 같이 수정합니다. 첫 번째 라인 {% load static %}은 현재 html 문서에서 정적 파일을 로드하는 것이고, 추가된 link 태그는 blog.css 스타일 시트를 포함합니다.

{% load static %}
<html>
​​​​<head>
​​​​​​​​<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
​​​​​​​​<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
​​​​​​​​<link rel="stylesheet" href="{% static 'css/blog.css' %}">
​​​​</head>
</html>

튜토리얼을 계속 따라 진행하면 CSS에 대한 내용만 포함하고 있으므로, 최종 시안에 대한 내용만 적용하고 마무리 하겠습니다(앞서 소개했듯이 장고 프로젝트에서 정적 파일을 로드하는 방식만 이해하면 충분하기 때문입니다). 최종적으로 post_list.html과 blog.css 내용은 다음과 같습니다.

우선 post_list.html 파일입니다. 아래 내용을 그대로 복사하여 붙여넣습니다.

{% load static %}
<html>
​​​​<head>
​​​​​​​​<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
​​​​​​​​<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
​​​​​​​​<link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
​​​​​​​​<link rel="stylesheet" href="{% static 'css/blog.css' %}">
​​​​</head>
​​​​<body>
​​​​​​​​<div class="page-header">
​​​​​​​​​​​​<h1><a href="/">Blog post list</a></h1>
​​​​​​​​</div>
​​​​​​​​<div class="content container">
​​​​​​​​​​​​<div class="row">
​​​​​​​​​​​​​​​​<div class="col-md-8">
​​​​​​​​​​​​​​​​​​​​{% for post in posts %}
​​​​​​​​​​​​​​​​​​​​​​​​<div class="post">
​​​​​​​​​​​​​​​​​​​​​​​​​​​​<div class="date">
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​<p>published: {{ post.published_date }}</p>
​​​​​​​​​​​​​​​​​​​​​​​​​​​​</div>
​​​​​​​​​​​​​​​​​​​​​​​​​​​​<h1><a href="">{{ post.title }}</a></h1>
​​​​​​​​​​​​​​​​​​​​​​​​​​​​<p>{{ post.text|linebreaksbr }}</p>
​​​​​​​​​​​​​​​​​​​​​​​​</div>
​​​​​​​​​​​​​​​​​​​​{% endfor %}
​​​​​​​​​​​​​​​​</div>
​​​​​​​​​​​​</div>
​​​​​​​​</div>
​​​​</body>
</html>

다음으로 blog.css 파일입니다. 마찬가지로 아래 내용을 그대로 복사하여 붙여넣습니다.

body {
​​​​padding-left: 15px;
}

h1 a {
​​​​color: #FCA205;
​​​​font-family: 'Lobster';
}

.page-header {
​​​​background-color: #ff9400;
​​​​margin-top: 0;
​​​​padding: 20px 20px 20px 40px;
}

.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
​​​​color: #ffffff;
​​​​font-size: 36pt;
​​​​text-decoration: none;
}

.content {
​​​​margin-left: 40px;
}

h1, h2, h3, h4 {
​​​​font-family: 'Lobster', cursive;
}

.date {
​​​​color: #828282;
}

.save {
​​​​float: right;
}

.post-form textarea, .post-form input {
​​​​width: 100%;
}

.top-menu, .top-menu:hover, .top-menu:visited {
​​​​color: #ffffff;
​​​​float: right;
​​​​font-size: 26pt;
​​​​margin-right: 20px;
}

.post {
​​​​margin-bottom: 70px;
}

.post h1 a, .post h1 a:visited {
​​​​color: #000000;
}v

만약 스타일 시트가 제대로 적용되지 않으면, 다음 두 가지를 확인합니다.

  • 서버를 재시작합니다.
  • settings.py에서 STATIC_URL(STATIC_URL = '/static/')과 STATIC_ROOT(STATIC_ROOT = os.path.join(BASE_DIR, 'static')) 설정 값을 확인합니다.

다음 사진과 같이 요청(http://127.0.0.1:8000/) 결과로 css가 적용된 html 문서를 렌더링하면 정상적으로 진행한 것입니다.

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

[Pyhon/Django] 장고 기초#013. 장고 애플리케이션 확장  (0) 2022.01.02
[Pyhon/Django] 장고 기초#012. 장고 템플릿 확장(Template extending)  (0) 2022.01.02
[Pyhon/Django] 장고 기초#010. 장고 쿼리셋과 템플릿을 이용한 동적 HTML 문서 작성  (0) 2022.01.02
[Pyhon/Django] 장고 기초#009. 장고 ORM 쿼리셋(Queryset)  (0) 2022.01.01
[Pyhon/Django] 장고 기초#008. 장고 템플릿(Template) & HTML  (0) 2022.01.01

'Pyhon/Django' 관련글

티스토리툴바