<네비게이션 기능 추가하기>
tomatoWorld 홈버튼과 우측 상단에 메뉴 버튼이 생겼다.
반응형 웹 : 큰 창으로 확인하면, log-in 버튼을 볼 수 있다.
메뉴 버튼이 반응하려면, 부트스트랩 자바스크립트 파일, 제이쿼리 파일이 필요하다.
* 제이쿼리 : 자바스크립트 라이브러리
JavaScript가 뭔가요? - Web 개발 학습하기 | MDN (mozilla.org)
HTML : 웹 컨텐츠의 구조와 의미를 정의하고 부여함. 마크업 언어.
CSS : Cascading Style Sheets 배경색, 폰트 등 레이아웃을 지정하여 HTML 컨텐츠를 꾸며주는 스타일 규칙 언어.
JavaScript : 동적인 부분을 담당하는 스크립트 언어
<body>
<!--basic templates-->
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<a class="navbar-brand" href="{% url 'pybo:index' %}">tomatoWorld</a>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse"
data-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-grow-0" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">log-in</a>
</li>
</ul>
</div>
</nav>
{%block content%}
{%endblock%}
</body>부트스트랩 자바스크립트, 제이쿼리 추가
<!--jQuery JS-->
<script src="{% static 'jquery-3.6.0.min.js' %}"></script>
<!--Bootstrap JS-->
<script src="{% static 'bootstrap.min.js' %}"></script>log-in 기능을 위해
네비게이션 바를 따로 html 파일을 만들어준다.
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<a class="navbar-brand" href="{% url 'pybo:index' %}">tomatoWorld</a>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse"
data-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-grow-0" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">log-in</a>
</li>
</ul>
</div>
</nav>
네비게이션 버튼을 누르면 log-in 바가 내려온다.
끝!
<게시판 페이지 기능>
step 1. 테스트 케이스 추가
장고의 Paginator 클래스를 이용하면
게시판 페이징 관련 기능 이용할 수 있다.
from django.core.paginator import Paginator
<템플릿 필터 만들기>
왜 이러는지 모르겠다.
<참고>
Do it! 점프 투 장고(박응용)
'Computer Science > BackEnd' 카테고리의 다른 글
| 프로그램 소개 사이트 개발 #1 | 웹 개발에 대한 이해, 기획 (0) | 2022.01.09 |
|---|---|
| 웹 개발 로드맵 (0) | 2022.01.05 |
| [7.5] Do it! 점프 투 장고 (0) | 2021.07.05 |
| [6.27] 웹 개발이란? with MDN Web Docs (0) | 2021.06.27 |
| [6.26] 장고 예제 맛보기 Django 튜토리얼 (0) | 2021.06.26 |