Django 웹디자인(CSS) #7

웹개발/Django / / 2020. 12. 13. 16:30
반응형

참고

https://tutorial.djangogirls.org/ko/css/


앞서 구조만 잡힌 페이지가 아닌 우리가 보던 페이지처럼 화려하게 만들어주기 위해선

CSS와 javascript를 활용하면 된다.


웹을 처음 배우던 때에는 백엔드로 구현하는 기능들이 더 중요하게 생각했었다.

하지만 최근 다양한 플랫폼(Django등)이 나오고 간단한 홈페이지를 만들어보고 운영하기 그렇게 어렵지 않은 시대가 되었다. 게시판과 로그인 시스템등은 이미 많은 자료들이 나와있고 간단하게 구현할 수 있는 시스템으로 바뀌고 있다.


이제는 간단한 홈페이지의 완성도를 결정하는것은 디자인에서 나온다고 생각한다. 엔지니어들이 본다면 이런 디자인보다는 트래픽을 잘처리하고 보안이 뛰어나고 다양한 기능을 구현해 내는것이 좋아보일것이다. 일반인들이 보기에는 어떨까? 대부분 이런 디테일한 부분을 신경쓰기 보다는 디자인을 보고 더욱 찾게되고 흥미를 가질 가능성이 높다. django로 대충 기반이 만들어지면 css와 javascript를 공부하여 처음목적했던 딸기 관련 홈페이지를 만들어 갈 생각이다.


서론이 길었지만 요약하자면 디자인도 매우 중요하다는 것이다.


처음엔 CSS파일을 적용 봅시다.

백엔드를 쉽게 구성하는 프레임워크이 생겼듯이 프론트엔드를 구성하는 경우도 쉽게 꾸며볼수 있게 구성해 놓은 프레임워크가 있습니다.부트스트랩이다.

https://getbootstrap.com/



blog/templates/blog/post_list.html에 추가

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div>
    <h1><a href="/">Django Blog</a></h1>
</div>
<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>
 
{% 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 %}

cs

이렇게 링크를 통해 불러 올수도 있지만 내가 따로 css파일을 만든다면 정적파일을 만들고

불러와서 사용해야 한다.


blog앱에 css파일을 만들고 html파일에 불러옵시다.

우리는 mysite/settings.py에서 정적파일을 불러올 위치를 정해놨었습니다.


STATIC_URL = 'static/' 

STATIC_ROOT = os.path.join(BASE_DIR, 'static')


불러오지 못할시 STATIC_URL = '/static/'으로 수정

blog폴더에 static폴더를 추가하고 그밑에 css폴더를 추가한뒤 blog.css 파일을 만들어줍니다.


h1의 a태그의 색을 오랜지색으로 바꿉니다.


blog/static/css/blog.css 생성

1
2
3
h1 a {
    color: #FCA205;
}
cs

CSS 파일에서는 HTML 파일에 있는 각 요소들에 스타일을 정의할 수 있어요. 요소를 식별하는 첫 번째 방법은 요소 이름을 사용하는 것입니다. HTML 섹션에서 태그로 기억할 수 있습니다. a,h1,body와 같은 것은 모두 요소 이름의 예입니다. 또 class 속성이나 id 속성에 의해 요소를 식별합니다. 클래스와 ID는 요소에 직접 부여한 이름이에요. 클래스는 요소 그룹을 정의하고 ID는 특정 요소를 가리킵니다.



blog/templates/blog/post_list.html 수정하여 css파일 불러오기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{% load static %}
<html>
    <head>
        <title>Django 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 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>

cs


달라진점


{% load static %}

static파일을 로드해주는 코드입니다.


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

css파일을 불러옵니다.

부트스트랩을 불러오는 밑에 추가해주어야 적용됩니다. 가장 마지막에 로드된 css파일이 우선권을 가집니다.



Djangogirls에서 제공하는 html과 css파일을 적용하여 예쁘게 만들어 봅시다.



blog/static/css/blog.css 수정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.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;
}
 

cs


blog/templates/blog/post_list.html 수정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{% load static %}
<html>
    <head>
        <title>Django 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' %}">
        <link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
 
    </head>
    <body>
        <div class="page-header">
            <h1><a href="/">Django Blog</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>
 

cs


글꼴과 배경색 글자색등을 바꾸어 조금은 그럴듯 하게 바뀐모습을 볼 수 있습니다.

css가 적용되지 않는다면 캐시를 정리한 후 다시시도해 보시기 바랍니다.


css공부하는곳

https://www.codecademy.com/tracks/web

반응형
저작자표시 비영리 변경금지

'웹개발 > Django' 카테고리의 다른 글

Django 추가,수정 페이지 만들기 #9  (0) 2020.12.14
Django 다른페이지 추가해보기 #8  (0) 2020.12.13
Django 템플릿 동적데이터 #6  (0) 2020.12.13
Django ORM 쿼리셋 #5  (0) 2020.12.13
Django urls #4  (0) 2020.12.13
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기
웹개발/Django 관련 글
글 더보기

티스토리툴바