장고:네비게이션 바 만들기 - 편집 역사

Sam: /* 이외 팁 */

2021-03-19T12:56:23Z

이외 팁

← 이전 판		2021년 3월 19일 (금) 12:56 판
32번째 줄:		32번째 줄:
	<br />		<br />

	== 이외 팁 ==		==이외 팁==
	{\| class="wikitable"		{\| class="wikitable"
	!의도		!의도
40번째 줄:		40번째 줄:
	\|네비게이션 바를 상단 고정		\|네비게이션 바를 상단 고정
	\|nav 태그의 클래스 안에 fixed-top을 넣는다.		\|nav 태그의 클래스 안에 fixed-top을 넣는다.
			본문의 상단 일부가 바에 가려져 보이지 않는다.
	\|<nav class="... fixed-top">		\|<nav class="... fixed-top">
	\|-		\|-

2021년 3월 19일 (금) 12:53에 Sam님의 편집

2021-03-19T12:53:58Z

← 이전 판		2021년 3월 19일 (금) 12:53 판
1번째 줄:		1번째 줄:
	{{장고}}		{{장고}}

	== 개요 ==		==개요==
	전체 페이지에서 보여지는 메뉴바가 필요할 때가 있다.(혹은 섹션별로)		전체 페이지에서 보여지는 메뉴바가 필요할 때가 있다.(혹은 섹션별로)

	가장 기본이 되는 html파일이나 섹션의 html 파일에 작성한다.		가장 기본이 되는 html파일이나 섹션의 html 파일에 작성한다.<br />
	<br />

	== 방법 ==		==방법==
	부트스트랩을 이용하면 간단하게 작성이 가능하다.		부트스트랩을 이용하면 간단하게 작성이 가능하다.

28번째 줄:		27번째 줄:
	</syntaxhighlight>각각의 요소는 html코드로 꾸며주면 된다.		</syntaxhighlight>각각의 요소는 html코드로 꾸며주면 된다.

	=== 자바스크립트 파일 ===		===자바스크립트 파일===
	부트스트랩에선 화면이 작아지면 자동으로 구성요소들을 없애고 메뉴버튼을 만든다. 그런데, 이 메뉴버튼이 작동하려면 자바스크립트 파일이 필요해.		부트스트랩에선 화면이 작아지면 자동으로 구성요소들을 없애고 메뉴버튼을 만든다. 그런데, 이 메뉴버튼이 작동하려면 자바스크립트 파일이 필요해.

			<br />

			== 이외 팁 ==
			{\| class="wikitable"
			!의도
			!설명
			!방법
			\|-
			\|네비게이션 바를 상단 고정
			\|nav 태그의 클래스 안에 fixed-top을 넣는다.
			\|<nav class="... fixed-top">
			\|-
			\|처음엔 상단고정이 아니었다가 스크롤을 내리면 상단고정
			\|네비게이션 바를 본문 안에 넣으면 중간부터 네비게이션 바가 된다.
			\|<nav class="... sticky-top">
			\|}

Sam: 새 문서: {{장고}} == 개요 == 전체 페이지에서 보여지는 메뉴바가 필요할 때가 있다.(혹은 섹션별로) 가장 기본이 되는 html파일이나 섹션의 html 파일...

2020-11-02T14:58:19Z

새 문서: {{장고}} == 개요 == 전체 페이지에서 보여지는 메뉴바가 필요할 때가 있다.(혹은 섹션별로) 가장 기본이 되는 html파일이나 섹션의 html 파일...

새 문서

{{장고}}

== 개요 ==
전체 페이지에서 보여지는 메뉴바가 필요할 때가 있다.(혹은 섹션별로)

가장 기본이 되는 html파일이나 섹션의 html 파일에 작성한다.
<br />

== 방법 ==
부트스트랩을 이용하면 간단하게 작성이 가능하다.

body 상단에 들어가게끔 넣어준다.<syntaxhighlight lang="html">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">

<a class="navbar-brand" href="{% url '앱이름:home' %}">나타낼택스트</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="알아서 주소링크">나타낼택스트</a></li>
</ul>
</div>
</nav>
</syntaxhighlight>각각의 요소는 html코드로 꾸며주면 된다.

=== 자바스크립트 파일 ===
부트스트랩에선 화면이 작아지면 자동으로 구성요소들을 없애고 메뉴버튼을 만든다. 그런데, 이 메뉴버튼이 작동하려면 자바스크립트 파일이 필요해.