장고 걸즈 튜토리얼 따라하기 11

장고 걸즈 튜토리얼 따라하기 11 - CSS

CSS란?

HTML과 같이 마크업 언어로 작성된 웹사이트의 외관을 꾸미기 위해 사용되는 언어이다.

부트스트랩

부트스트랩(Bootstrap)은 유명한 HTML, CSS의 프레임워크이다.

설치하기

HTML 파일 내 <head> 태그에 이 코드를 입력한다.


x
<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">

그리고 서버를 실행한 다음 페이지를 확인해 보면 다음과 같이 보기가 좋아졌다.

bootstrap

정적 파일

정적 파일(static files)이란 CSS와 이미지 파일에 해당되는 파일이다. 이것은 요청 내용에 따라 바뀌지 않기 때문에 모든 사용자들이 동일한 내용을 볼 수 있다.

정적 파일 저장 경로

blog 앱 안에 static 폴더를 새로 만든다.


xxxxxxxxxx
    djangogirls
    ├── blog
    │   ├── migrations
    │   ├── static
    │   └── templates
    └── mysite

장고는 앱 안에 있는 static 폴더를 자동으로 찾고 그 컨텐츠를 정적 파일로 사용할 수 있다.

CSS 파일 만들기

static 디렉토리 안에 css라는 새로운 디렉토리를 만들고 그 안에 blog.css라는 파일을 만든다.


xxxxxxxxxx
    djangogirls
    └─── blog
         └─── static
              └─── css
                   └─── blog.css

이제 코드 에디터로 blog.css 파일을 연 다음 아래 코드를 추가해서 제목의 색상을 바꿔본다.


x
h1 a {
    color: #FCA205;
}

h1 a는 CSS의 셀렉터(Selector)라고 한다. h1 요소 안에 있는 a 요소에 #FCA205의 색을 적용할 수 있다는 것이다.

또한 다음과 같은 태그가 있을 때,


<a href="https://en.wikipedia.org/wiki/Django" class="external_link" id="link_to_wiki_page">

a, h1, body와 같은 태그 뿐만 아니라 class 속성이나 id 속성에 의해 요소를 식별할 수 도 있다.

이제 만든 CSS를 HTML에 추가한다. blog/templates/blog/post_list.html 파일 맨 처음 줄에 이 라인을 추가한다.


{% load static %}

이곳에서 동적 파일을 로딩한다. 그 다음 <head> 태그 내에 부트스트랩 CSS 파일 링크 다음에 아래 코드를 추가한다.


<link rel="stylesheet" href="{% static 'css/blog.css' %}">

브라우저는 주어진 순서대로 파일을 읽기 때문에 파일이 올바른 위치에 있지 않으면 파일 코드가 부트스트랩 파일 코드를 무시할 수 도 있다. 지금까지의 HTML 파일은 아래와 같다.


{% load static %}
<html>
    <head>
        <title>Django Girls blog</title>
        <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>
    <body>
        <div>
            <h1><a href="/">Django Girls Blog</a></h1>
        </div>
        {% for post in posts %}
            <div>
                <p>published: {{ post.published_date }}</p>
                <h1><a href="">{{ post.title }}</a></h1>
                <p>{{ post.text|linebreaksbr }}</p>
            </div>
        {% endfor %}
    </body>
</html>

이제 파일을 저장하고 페이지를 확인해본다.

css_file

왼쪽 여백을 주기 위해서 아래 코드를 CSS에 입력한다.


body {
    padding-left: 15px;
}

padding_left

제목 폰트를 바꾸기 위해서 우선 blog/templates/blog/post_list.html 파일 내 <head> 태그에 아래 코드를 입력한다.


x
<link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">

이것은 Google 폰트에서 Lobster라는 글꼴을 가져온 것이다.

그리고 blog/static/css/blog.css에서 h1 a 선언 블록에서 아래와 같이 내용을 추가하고 새로고침 한다.


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

font_family

이제 제목이 포함된 div에 page-header라는 클래스 명을 붙여본다.


x
<div class="page-header">
    <h1><a href="/">Django Girls Blog</a></h1>
</div>

그리고 블로그 게시글을 나타내는 div에는 post라고 클래스 명을 붙인다.


x
<div class="post">
    <p>published: {{ post.published_date }}</p>
    <h1><a href="">{{ post.title }}</a></h1>
    <p>{{ post.text|linebreaksbr }}</p>
</div>

이제 CSS에서 여러 선택자들을 추가해본다. 클래스 선택자는 .으로 시작한다. blog/static/css/blog.css 파일에 아래 코드를 추가한다.


.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;
}

이제 글을 보여주는 HTML 코드를 다음과 같이 수정한다.


<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>

이제 파일을 저장하고 페이지를 확인한다.

final_page

장고 걸즈 튜토리얼 따라하기 13 - 어플리케이션 확장 (0)	2019.01.05
장고 걸즈 튜토리얼 따라하기 12 - 템플릿 확장 (0)	2019.01.04
장고 걸즈 튜토리얼 따라하기 10 - 장고 템플릿 (0)	2019.01.02
장고 걸즈 튜토리얼 따라하기 9 - 템플릿 동적 데이터 (0)	2018.12.27
장고 걸즈 튜토리얼 따라하기 8 - 장고 ORM과 쿼리셋 (0)	2018.12.27

BugMaker

장고 걸즈 튜토리얼 따라하기 11 - CSS

CSS란?

부트스트랩

설치하기

정적 파일

정적 파일 저장 경로

CSS 파일 만들기

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

티스토리툴바

장고 걸즈 튜토리얼 따라하기 11 - CSS

CSS란?

부트스트랩

설치하기

정적 파일

정적 파일 저장 경로

CSS 파일 만들기

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

'Python/Django' Related Articles

티스토리툴바