5번째 줄: |
5번째 줄: |
| | | |
| === base탬플릿에 추가 === | | === base탬플릿에 추가 === |
| + | 이 작업은 취향에 따라 해도 되고, 안해도 되고... |
| + | |
| + | base 탬플릿에 네비게이션바 코드를 넣으면 너무 길어지기도 하고... 관리하기 번거롭다. 때문에 더 세분화 하여 관리하기 위해 따로 navbar.html 파일을 만들고, base.html 안의 적당한 장소에 다음의 코드를 넣는다.<syntaxhighlight lang="html+django"> |
| + | {% include "navbar.html" %} |
| + | </syntaxhighlight> |
| | | |
| = 부트스트랩을 사용해 만들기 = | | = 부트스트랩을 사용해 만들기 = |
10번째 줄: |
15번째 줄: |
| === 사전준비 === | | === 사전준비 === |
| [[장고 부트스트랩]] 문서를 참조하자. | | [[장고 부트스트랩]] 문서를 참조하자. |
| + | |
| + | === 만들기 === |
| + | 다음과 같은 형태로 navbar.html을 작성한다. |
| + | |
| + | 부트스트랩 문서를 참고하여 색을 변경하는 등의 변화를 줄 수 있다. |
| + | |
| + | 네비게이션 메뉴는 li 태그 안에 작성하고, 홈버튼은 가장 처음의 a태그 안에 작성된다.<syntaxhighlight lang="html+django"> |
| + | <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom"> |
| + | <a class="navbar-brand" href="{% url 'index' %}">지난지난이</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="{% url 'pool:list' %}">문제은행</a> |
| + | </li> |
| + | |
| + | <li class="nav-item "> |
| + | <a class="nav-link" href="{% url 'invitation:invitation' %}">청첩장</a> |
| + | </li> |
| + | |
| + | <li class="nav-item "> |
| + | <a class="nav-link" href="{% url 'utility:main' %}">Utility</a> |
| + | </li> |
| + | </ul> |
| + | </div> |
| + | </nav> |
| + | </syntaxhighlight> |
| [[분류:장고 기능구현(초급)]] | | [[분류:장고 기능구현(초급)]] |