Django 네비게이션바 #10

웹개발/Django / / 2020. 12. 14. 23:05
반응형

참고

https://www.youtube.com/watch?v=X91jsJyZofw&t=125s


점점 컨텐츠가 추가되면 홈페이지를 깔끔하게 꾸미기 위해 꼭 필요한 부분이다.

navbar는 모든 페이지에서 볼수 있어야 하므로 base.html에 추가하여줍니다.

이전에 사용했던 부트스트랩을 걷어내고 하나하나 만들어볼 예정입니다.

 

순서

icon추가->font추가(아이콘 추가를 위해)->navbar.html작성->css추가->scirpt파일 추가


아이콘추가

https://www.daleseo.com/font-awesome/

여기를 참고하여 추가하고 원하는 아이콘을 찾습니다.


구글폰트 추가

https://fonts.google.com/ 로이동->원하는 폰트 선택->select this style클릭->링크복사후 html에 삽입->css에서 원하는곳에 font-family:'fontname'; 작성하여 폰트적용


blog/templates/blog/base.html 수정

이전에 사용했던 bootstrap관련 css를 제거해주고 우리가 작성할 styles.css와 아이콘과 구글폰트를 사용하기위한 css를 추가해줍니다.
1
2
3
4
5
6
<link href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">
cs


</body>밑에 나중에 토글버튼을 눌렀을때 동작을 하게만들어줄 js파일도 추가해줍니다.

1
<script src="{% static 'js/main.js' %}" type="text/javascript" defer></script>
cs



마지막으로 navbar의 위치를 잡고 include해줍니다.

1
{% include 'blog/navbar.html' %}
cs



blog/templates/blog/base.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
{% load static %}
<html>
    <head>
        <title>Django blog</title>
        <link rel="stylesheet" href="{% static 'css/bootstrap.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/styles.css' %}">
        <link rel="stylesheet" href="{% static 'css/blog.css' %}">
        <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"
        />
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">
 
    </head>
    <body>
        {% include 'blog/navbar.html' %}
        <a href="{% url 'post_new' %}" class="top-menu"><span class="glyphicon glyphicon-plus"></span></a>
        <div class="content container">
                    {% block content %}
                    {% endblock %}
        </div>
    </body>
    <script src="{% static 'js/main.js' %}" type="text/javascript" defer></script>
 
</html>

cs


이제 navbar.html을 작성해봅시다.

nav class를 만들어 안을 채워줍니다.

로고가 들어갈 부분 메뉴가 들어갈부분 아이콘이 들어갈 부분으로 나누어 작성해줍니다.

마지막으로 toogle버튼도 만들어줍니다.

defer 속성은 페이지가 모두 로드된 후에 해당 외부 스크립트가 실행됨을 명시합니다.

script를 받을때까지 기다리지않고 페이지를 먼저 보여주게 되어 사용자가 기다리는시간이 줄어듭니다.


blog/templates/blog/navbar.html 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 <nav class="navbar">
        <div class="navbar__logo">
            <i class="fas fa-apple-alt"></i>
            <a href="">Strwberry</a>
        </div>
        <div class="navbar__menu">
          <li><a href="">Home</a></li>
          <li><a href="">blog</a></li>
          <li><a href="">git</a></li>
          <li><a href="">QnA</a></li>
          <li><a href="">Farm</a></li>
        </div>
 
        <div class="navbar__icons">
            <li><i class="fab fa-twitter"></i></li>
            <li><i class="fab fa-facebook"></i></li>
        </div>
 
        <a href="#" class="navbar__toogleBtn">
            <i class="fas fa-bars"></i>
        </a>
 
 </nav>

cs


icon은 딸기가 없어서 일단 사과를 사용했습니다.

추후 변경할 예정입니다.



blog/static/css/styles.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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
:root{/*나중에 많아졌을때 한번에 바꾸기 좋음*/
    --text-color:#f0f4f5;
    --background-color:#1987cf;
    --accent-color:#e71f11;
}
 
body{
    margin:0;/*원하지않는 마진 제거*/
    font-family: 'Langar';
    font-size:25px;
}
 
a{
    text-decoration: none;/*밑줄제거*/
    color:var(--text-color);
    font-size:30px;
}
 
p{
    word-break:break-all;
    text-overflow: ellipsis;
}
.navbar{/*최상위부터 꾸며야됨*/
    display: flex;/*한줄에 나란히 들어오도록*/
    justify-content: space-between;/*중간중간에 띄워줌*/
    align-items: center;/*반대축이기때문에 align*/
    background-color: var(--background-color);
    padding:8px 12px;/*너무 양옆에 붙어잇어서*/
}
 
 
.navbar__logo{
    font-size:24;
    color:var(--text-color);
}
 
.navbar__logo i{
    color:var(--accent-color);
}
 
.navbar__menu{
    display: flex;/*한줄로*/
    list-style: none;/*리스트 점 제거*/
    padding-left: 0;/*중간으로*/
}
 
.navbar__menu li{
    padding:8px 30px;/*마진은 마우스 클릭범위가 좁아지고 padding은 넒어짐*/
}
 
.navbar__menu li:hover{/*마우스 닿았을때*/
    background-color: orange;
    border-radius: 4px;/*조금 둥글게*/
}
 
.navbar__icons{
    list-style: none;
    color:var(--text-color);
    display: flex;
    padding-left: 0;/*중간으로*/
}
 
.navbar__icons li{
    padding:8px 12px;
}
 
.navbar__toogleBtn{
    display:none;/*화면클때는 안나오게*/
    position:absolute;
    right:32px;
    font-size: 40px;
    color:var(--accent-color);
}
 
.fa-plus{
    color:#123456;
    float:right;
    font-size:50px;
}
.fa-edit{
    color:#123456;
    float:right;
    font-size:50px;
}
 
.fa-save {
    float: right;
    font-size:50px;
    background:white;
}
 
@media screen and (max-width:768px){/*화면이작아져서 배치가 깨질때*/
    .navbar{/*작아지면 열로세움*/
        flex-direction:column;
        align-items: flex-start;/*좌로붙이기*/
        padding:8px 24px;
    }
 
    .navbar__menu{/*메뉴도 다 하나하나씩 떨어지게*/
        display:none;
        flex-direction: column;
        align-items: center;/*메뉴는 가운데로*/
        width:100%;/*설정해줘야 적용됨*/
    }
 
    .navbar__menu li{
        width: 100%;
        text-align: center;
    }
 
 
    .navbar__icons{
        display:none;
        justify-content:center;
        width: 100%;
    }
 
    .navbar__toogleBtn{
        display: block;
    }
 
    .navbar__menu.active,
    .navbar__icons.active{/*active되면 보이게*/
        display:flex;
    }
}
 

cs

css설명은 위 유튜브를 보고 정리하여 주석으로 달아놓았습니다.

굉장히 잘 설명해주니 들어보면 좋을듯 합니다.


마지막으로 script를 추가줍니다.

blog/static/js/main.js 생성

1
2
3
4
5
6
7
8
9
const toggleBtn=document.querySelector('.navbar__toogleBtn');//토글 버튼 연결
const menu=document.querySelector('.navbar__menu');
const icons=document.querySelector('.navbar__icons');
 
 
toggleBtn.addEventListener('click',()=>{
    menu.classList.toggle('active');
    icons.classList.toggle('active');
});

cs


각 요소들을 컨트롤 할수 있게 됩니다.

toglle버튼이 눌러졌을때 menu와 icons들을 active상태로 만들어 줍니다.



blog/templates/blog/post_detail.html 에 수정아이콘 바꾸기

1
 <a href ="{% url 'post_edit' pk=post.pk %}"><i class="fas fa-edit"></i></a>
cs


이렇게 수정버튼도 바꾸어줍니다.


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

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

Django 로그인/회원가입 #12  (0) 2020.12.20
Django 페이징 #11  (0) 2020.12.20
Django 추가,수정 페이지 만들기 #9  (0) 2020.12.14
Django 다른페이지 추가해보기 #8  (0) 2020.12.13
Django 웹디자인(CSS) #7  (0) 2020.12.13
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기
웹개발/Django 관련 글
글 더보기

티스토리툴바