장고:네비게이션 바 만들기: 두 판 사이의 차이

학교의 모든 지식. SMwiki
둘러보기로 이동 검색으로 이동
시각위키텍스트
(새 문서: {{장고}} == 개요 == 전체 페이지에서 보여지는 메뉴바가 필요할 때가 있다.(혹은 섹션별로) 가장 기본이 되는 html파일이나 섹션의 html 파일...)
 
편집 요약 없음
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">
|}

2021년 3월 19일 (금) 21:53 판

장고! 웹 프레임워크! 틀:장고

  1. 장고:개요
  2. 장고:웹페이지설계
    1. 장고:앱
    2. 장고:url
    3. 장고:model
      1. 장고:DB
      2. 장고:모델 필드
      3. 장고:모델의 변경
    4. 장고:view
      1. 장고:클래스형 뷰, 제네릭 뷰
      2. 장고:view 각종 기능
    5. 장고:template
    6. 장고:static. 정적파일 사용하기
      1. 장고:CSS 사용하기
      2. 장고:JS 사용하기
      3. 장고:글꼴 사용
      4. 장고:부트스트랩
    7. 장고:media. 미디어 파일 사용하기
  3. 장고:관리자페이지
  4. 장고:settings.py
  5. 장고:기능구현
    1. 장고:회원관리
    2. 장고:유저
    3. 장고:커스텀 유저
    4. 장고:소셜로그인
    5. 장고:입력받기
    6. 장고:저장된 내용 활용하기
    7. 장고:변수 내보내기
    8. 장고:글쓰기
    9. 장고:페이징(페이지나누기)
    10. 장고:답변쓰기(댓글쓰기)
    11. 장고:추천,즐겨찾기
    12. 장고:새글(최신글) 나타내기
    13. 장고:썸머노트 설치
    14. 장고:네비게이션 바 만들기
    15. 장고:검색기능
    16. 장고:카테고리 만들기
    17. 장고:사진 올리기
    18. 장고:파일 업로드
    19. 장고:이메일app 만들기
    20. 장고:매직 그리드
  6. 장고:웹서비스
    1. 장고:Git
    2. 장고:리눅스에 올리기
    3. 장고:우분투에 올리기(nginx 사용)
    4. 장고:도커로 올리기
  7. 장고:팁

개요

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

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

방법

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

body 상단에 들어가게끔 넣어준다.

<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>

각각의 요소는 html코드로 꾸며주면 된다.

자바스크립트 파일

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


이외 팁

의도 설명 방법
네비게이션 바를 상단 고정 nav 태그의 클래스 안에 fixed-top을 넣는다. <nav class="... fixed-top">
처음엔 상단고정이 아니었다가 스크롤을 내리면 상단고정 네비게이션 바를 본문 안에 넣으면 중간부터 네비게이션 바가 된다. <nav class="... sticky-top">
원본 주소 "https://smwiki.info/index.php?title=장고:네비게이션_바_만들기&oldid=3491"