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
- css
- blog
다시 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 |
