Bootstrap으로 nav만들기

티스토리 뷰

Web/Bootstrap

Bootstrap으로 nav만들기

HAN_PY 2020. 3. 24. 08:40

HAN_PY의 모든 글은 실습 위주입니다.

아래 코드 보면 head 부분에 긴거 한줄을 넣고

body 부분에 긴거 세줄을 붙여 넣으면 자동으로 bootstrap을 할 수있다.

nav란 navigation bar의 약자로 홈페이지에서 상단에 있는 메뉴들의 집합체라고 이해하면 된다.

어렵게 개념 설명 없이 코드 풀이를 통해 알아보자.

bootstrap을 쓴다고 css를 안쓰지는 않는다. 단지 bootstrap은 우리가 빠르게 코딩하게 도와주는 도구일뿐이다.

ㅇㄹㄹㄹ

실습

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <nav class="d-flex px-3 sticky-top bg-dark justify-content-between align-items-center">
    <div class="text-light font-weight-bold">
      HAN_PY
    </div>
    <ul class="d-flex list-unstyled mb-0">
      <li class="mx-3"><a href="#" class="text-decoration-none">소개</a></li>
      <li class="mx-3"><a href="#" class="text-decoration-none">커뮤니티</a></li>
      <li class="mx-3"><a href="#" class="text-decoration-none">정보</a></li>
    </ul>
  </nav>
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter

http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

css

1
2
3

nav {
  height: 80px;
}

cs

기본적은 html 구조는 nav 아래 div와 ul을 형제로 만들고 ul 내부에 li를 만들어서 배치 했다.

굳이 리스트로 만들어 배치한 이유는 나중에 수정을 용이하게 하기 위함이다.

<nav class="d-flex px-3 sticky-top bg-dark justify-content-between align-items-center">

하나씩 풀어보면

display: flex;

padding을 왼쪽오른쪽에 16px씩 주고

sticky-top은 상위 요소(여기선 body)의 상단부에 고정.(fixed-top과 비슷)

bg-dark 는 background배경 색을 어두운 검정

justify-content: between; 수평 정렬은 양쪽 벽에 배치

align-items: center; 수직 정렬을 중앙

이라는 뜻이다.

<div class="text-light font-weight-bold">

text-light는 문자색을 white로 한다.

font-weight-bold는 폰트 굵기를 bold로 한다.

<ul class="d-flex list-unstyled mb-0">

d-flex는 display: flex;로 지정한다는 이야기다.

list-unstyled 은 ul안에 li를 보면 글 앞 동그라미가 생기는 것을 없애준다.

mb-0는 작성하다보면 생기는 margin-bottom 을 초기화 시켜 준거다.

<li class="mx-3"><a href="#" class="text-decoration-none">소개</a></li>

mx-3 은 margin 왼쪽 오른쪽 둘다 16px

text-decoration: none은 링크 문자는 누를때 밑줄이 생기는데 그걸 없애준다.

최종 nav

bootstrap 공식문서 들어가서 documentation-components-navbar 들어가면 아래 사이트가 나온다.

https://getbootstrap.com/docs/4.5/components/navbar/

Navbar

Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

getbootstrap.com

지금까지는 base.html에 navbar를 추가했는데 그렇게 되면 코드가 너무 길어 진다. 따라서 navbar, footer를 나눠서 따로 html으로 관리를 하자.

_nav.html의 위치는 base.html 위치와 같다

templates/_nav.html

templates/base.html

그리고 base.html에서 {% include '_nav.html' %} 을 추가해 주면 된다.

윗 부분은 초기 nav.

아래는 bootstrap에서 가져온 nav

base.html에서 로그인과 로그아웃을 nav로 옮기고 extends로 가져옴 + message프레임 워크도 추가

templates/base.html

~
~
~
    {% include '_nav.html' %}
    {% if messages %}
        {% for message in messages %}
        <div{% if message.tags %} class="alert alert-{{ message.tags }}"{% endif %}>{{ message }}</div>
        {% endfor %}
    {% endif %}
    <div class="container mt-3">
        {% block body %}
        {% endblock %}
    </div>   
~
~
~

templates/_nav.html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="/articles/">커뮤니티</a>
  <button class="navbar-toggler" 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" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
        {% if request.user.is_authenticated %}
            <li class="nav-item">
                <span class="navbar-text">{{ request.user.username }}, 님 환영합니다.
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'accounts:logout' %}">로그아웃</a>
            </li>
        {% else %}
            <li class="nav-item">
                <a class="nav-link" href="{% url 'accounts:login' %}">로그인</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'accounts:signup' %}">회원가입</a>
            </li>
        {% endif %}

    </ul>
  </div>
</nav>

'Web > Bootstrap' 카테고리의 다른 글

실습)카드만들기_Bootstrap_badge 2단계 (0)	2020.03.24

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

AI Platform / Web

티스토리 뷰