DevHyun

[DevHyun's Blog] Django&Python으로 만든 Blog에 CSS 적용하기! 본문

Web/Django&Python Blog Projecct

[DevHyun's Blog] Django&Python으로 만든 Blog에 CSS 적용하기!

D3V3L0P3R 2020. 10. 19. 17:49

장고걸스 코치들과 자원봉사자들의 수고로 번역된 글을 참고하였습니다.

tutorial.djangogirls.org/ko

 

CSS(Cascading Style Sheets)는 HTML와 같이 마크업언어(Markup Language)로 작성된 웹사이트의 외관을 꾸미기 위해 사용되는 언어입니다.

 

1. bootstrap 사용!

* Bootstrap : 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크.

* Blog/templates/blog/post_list.html

 

<!DOCTYPE html>
<html>
    <head>
        <title>DevHyun's 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">
    </head>
    <body>
        <div>
            <h1><a href="">DevHyun's 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>

 

bootstrap 적용 전(왼쪽), 적용 후(오른쪽)

2. 정적(static) 파일 사용하기 위해 Blog App 하위 디렉토리로 Static 디렉토리 생성

* 정적 파일은 CSS와 이미지 파일에 해당합니다. 이 컨텐츠는 요청 내용에 따라 바뀌는 것이 아니기 때문에 모든 사용자들이 동일한 내용을 볼 수 있습니다.

 

3. static 디렉토리의 하위 디렉토리로 css 생성

 

4. css 디렉토리에 Blog.css 파일 생성

 

5. CSS에서 Color 변경하기

* Blog/static/css/Blog.css

∨∨색상코드 참고∨∨

* www.w3schools.com/colors/colors_names.asp

 

HTML Color Names

HTML Color Names Color Names Supported by All Browsers All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors): Click here to see the 140

www.w3schools.com

 

h1 a {
    color: #191970;
}

* h1 : CSS Selector , h1요소 안에 a요소(Color, font ..etc)를 넣어 스타일을 적용

 

6. CSS를 html에 적용하기 (static 파일 로딩)

* Blog/templates/blog/post_list.html

{% load static %}
<html>
...
..
.
</html>

7. <head>와 </head> 사이에 bootstrap CSS파일 링크 다음에 아래 코드를 추가

* Blog/templates/blog/post_list.html

 

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

 

8. 왼쪽 사이드 여백 추가

* padding-left : OOpx;

 

body {
    padding-left: 15px;
}

 

9. font 변경(head)

* Blog/templates/blog/post_list.html

 

∨∨Font 참고∨∨

www.google.com/fonts

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

<!DOCTYPE html>
{% load static %}
<html>
    <head>
...
..
.
        <link href="//fonts.googleapis.com/css?family=Anton&subset=latin,latin-ext" rel="stylesheet" type="text/css">
    </head>
...
..
.

 

10. div별 class 이름 지정해서 각기 다른 css 적용하기

* Blog/templates/blog/post_list.html

...
..
.
        <div class ="page-header">
            ...
            ..
            .
        </div>
        ...
        ..
        .
        <div class ="post">
        ...
        ..
        .
        </div>
...
..
.

 

11. css 예제 코드 입력

* Blog/static/css/Blog.css

.page-header {
    background-color: #191970;
    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: 'Anton', 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;
}

 

12.  예제 css 사용하기

* Blog/templates/blog/post_list.html

...
..
.
    <body>
        <div class ="page-header">
...
..
.
        </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>
...
..
.

 

'Web > Django&Python Blog Projecct' 카테고리의 다른 글

[DevHyun's Blog] Django&Python으로 만든 Blog App 확장(extending)하기  (0) 2020.10.19
[DevHyun's Blog] Django Template 확장하기(*재사용 가능하게끔 만들기)  (0) 2020.10.19
[DevHyun's Blog] Django Template 활용하기  (0) 2020.10.19
[DevHyun's Blog] Pythonanywhere 에서 Git Project Pull 한 후 재배포 하기  (0) 2020.10.19
[DevHyun's Blog] Django ORM과 QuerySet 그리고 동적데이터 활용  (0) 2020.10.19
'Web/Django&Python Blog Projecct' Related Articles more
Comments