"장고 네비게이션 바 만들기"의 두 판 사이의 차이
둘러보기로 가기
검색하러 가기
(새 문서: == 개요 == 웹페이지 전체를 관통하는 네비게이션 바를 만든다. == 사전작업 == === base탬플릿에 추가 === = 부트스트랩을 사용해 만들기 = ==...) |
(→사전작업) |
||
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> | ||
[[분류:장고 기능구현(초급)]] | [[분류:장고 기능구현(초급)]] |
2021년 11월 23일 (화) 13:48 기준 최신판
1 개요[편집 | 원본 편집]
웹페이지 전체를 관통하는 네비게이션 바를 만든다.
2 사전작업[편집 | 원본 편집]
2.1 base탬플릿에 추가[편집 | 원본 편집]
이 작업은 취향에 따라 해도 되고, 안해도 되고...
base 탬플릿에 네비게이션바 코드를 넣으면 너무 길어지기도 하고... 관리하기 번거롭다. 때문에 더 세분화 하여 관리하기 위해 따로 navbar.html 파일을 만들고, base.html 안의 적당한 장소에 다음의 코드를 넣는다.
{% include "navbar.html" %}
3 부트스트랩을 사용해 만들기[편집 | 원본 편집]
3.1 사전준비[편집 | 원본 편집]
장고 부트스트랩 문서를 참조하자.
3.2 만들기[편집 | 원본 편집]
다음과 같은 형태로 navbar.html을 작성한다.
부트스트랩 문서를 참고하여 색을 변경하는 등의 변화를 줄 수 있다.
네비게이션 메뉴는 li 태그 안에 작성하고, 홈버튼은 가장 처음의 a태그 안에 작성된다.
<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>