지금까지 템플릿에 테이터를 표현함으로써 동적인(컨텐츠 내용에 따라 바뀌는) html파일 을 만들었다. 외관의 디자인을 해주기위해 css 를 사용하는데 감사하게도 html과 css의 프레임워크인 부트스트랩이 존재한다.
부트스트랩 사용하기
부트스트랩 설치하기
부트스트랩을 사용하기 위해서는 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">그러면 폰트와 폰트의 색상이 바뀐 것을 확인 할 수 있다.
정적파일 다루기
정적파일이란 컨텐츠에 따라 달라지지 않는 즉, 사용자에게 모두 동일하게 적용되는 파일을 의미한다.
blog안에 static디렉토리,그안에 css디렉토리를 만들어 blog.css를 만든다.
예제로 간단하게 폰트의 색상을 바꾸는 것으로 css파일을 작성한다.
각 요소들에 대해서 구현할 수 있으며 class 나 id로 구별 할 수 있으므로 자세한건 css를 따로 배워보자
/* blog/static/css/blog.css */
h1 a{
color: greenyellow
}
그후 css파일을 html에 연결시키기 위해서 html가장 상단에 {% load static %}을 추가해주고
head 부분에 <link rel="stylesheet" href="{% static 'css/blog.css' %}"> 를 추가해주면 css가 적용된다.
첫번째는 settings.py에 정의된 Static파일 관련 환경변수와 메소드들을 로드하기 위한 구문( static이라는 이름의 메소드를 호출에 필요)이며
두번째는 'myapp/mypage.css'파일을 전달하여 실제 정적파일 경로를 찾을수 있게 한다.
https://www.tuwlab.com/ece/26424 참조
<!-- blog/templates/blog/post_list.html -->
{% load static %}
<html>
<head>
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
<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">
<title>nyanguk의 Django 튜토리얼</title>
</head>
<body>
<div>
<h1> <a href="">nyanguk의 블로그</a></h1>
</div>
<div>
{% for post in posts %}
<div>
<p>created: {{ post.created_date }}</p>
<h1><a href="">{{ post.title }}</a></h1>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
</div>
</body>
</html>
짠! 이쁜 연두색이 적용된 것을 확인 할 수 있다!
CSS파일 완성시키기
튜토리얼을 끝냈으니 본격적으로 블로그 꾸미기에 돌입!
폰트 추가
https://fonts.google.com/ 에 접속해서 언어를 korean으로 설정한뒤 맘에드는 스타일을 클릭한다음 select this style을 누르면 html을 위한 링크와 css를 위한 명령어(font-family)를 제시해준다.
배경색이나 글자색 또는 margin을 통해 만든html,css 을 보면 아래와 같다.
<!-- blog/templates/blog/post_list.html -->
{% load static %}
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Yeon+Sung&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
<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">
<title>nyanguk의 Django 튜토리얼</title>
</head>
<body>
<div class = title-1>
<h1> <a href="">nyanguk의 블로그</a></h1>
</div>
<div class = post>
{% for post in posts %}
<div>
<p>created: {{ post.created_date }}</p>
<h1><a href="">{{ post.title }}</a></h1>
<p>{{ post.text|linebreaksbr }}</p>
<div class="line">
<p>---------------------------------------------------------------------</p>
</div>
</div>
{% endfor %}
</div>
</body>
</html>
/* blog/static/css/blog.css */
.title-1 {
background-color: yellow;
color: black;
margin-top: 20px;
margin-bottom: 30px;
font-family: 'Do Hyeon', sans-serif;
}
.post h1 a{
color: blueviolet;
font-family: 'Do Hyeon', sans-serif;
}
.post p{
color: blue;
margin-left: 30px;
margin-bottom: -5px;
font-family: 'Yeon Sung', cursive;
}
.line p{
margin-left: 0px;
color: crimson;
}위 코드를 적용한 나의 블로그는 아래와 같이 완성되었다.
매우매우 허접하지만 첫 걸음이라고 생각해주시길.....
'Django' 카테고리의 다른 글
| Django 어플리케이션 확장하기 (0) | 2021.01.20 |
|---|---|
| Django 템플릿 확장하기 (0) | 2021.01.20 |
| Django 템플릿 (0) | 2021.01.19 |
| Django 템플릿과 데이터베이스 연결 (0) | 2021.01.18 |
| Django ORM(Querysets) (0) | 2021.01.18 |
