본문 바로가기
강의/Django

LikeLion Second Session - wordcount, bootstrap - 2

by 왕큰새 2020. 7. 21.
728x90

 

Bootstrap

세계에서 가장 인기있는 프론트 라이브러리, CSS와 자바스크립트 파일들로 이루어져있다.

웹 규격을 위한 프레임워크. 웹개발을 더 편하고, 빠르게 진행할 수 있도록 도와준다.

안정적이고, 반응형 웹 지원, 편리한 장점 부트스트랩은 설치를 하는 개념이 아닌, css와 자바스크립트를 통해 – 소스를 끌어와 사용하는 것 CDN 기반으로 부트스트랩을 어떻게 사용할 수 있는지만 알면 충분하다.

HTML 헤드 태그 안에 부트스트랩 CSS만 추가해주면 된다.

이후에 추가적으로 부트스트랩 자바스크립트를 전체 바디 태그가 닫히기 전,

스크립트 태그 내에 감싸 넣어준다. 부트스트랩 4의 경우 jquery와 popper.js를 필요로 하므로 이 부분도 잊지않고 세팅해준다.

 

https://getbootstrap.com/docs/4.5/getting-started/introduction/

 

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.

getbootstrap.com

위의 주소로 들어간다.

 

www.getbootstrap.com  -> Documentation -> Getting started 로 들어가도 된다.

오른쪽 상단 Copy 눌러서 복사한다.

 

 

home.html 안 head 태그 내 하단에 붙여넣기

 

마찬가지로 copy 

 

home.html 안 body 태그 내 하단에 붙여넣기 하자.

 

bootstrap 을 사용하기 위한 기본 설정이 끝났다. 

 

html을 좀 더 이쁘게 만들어보자.

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">word count</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">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">about</a>
                </li>

    </nav>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
    </script>
</body>

</html>

1편에서 썻던 <h1> word count </h1> 지우고

 

navbar 를 삽입하고 저장하자.

 

 

navbar 는 어떻게 찾아 써요 ? 검색하거나 bootstrap 강의란을 보자.

 

 

아까보다는 낫다.

 

우리는 문장을 입력 받아서 단어를 세는 프로젝트를 할 것 이기 때문에

 

입력창, 전송 버튼이 필요하다. 뚝딱 만들자

 

  <form aciton="">

        <div class="form-group">
            <label for="exampleFormControlTextarea1">
                <h1>word count</h1>
            </label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" style="width:300px"></textarea>
        </div>
        <input type="submit" class="btn btn-dark" value="전송!">

    </form>

navbar 밑에 넣어주자.

 

그런후 , 우리는 우리가 만들었다는 것을 자랑했다는 페이지를 하나 만들 것이다.

 

templates 폴더에 about.html 이라는 html을 하나 만들자.

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1> 만든이 : 멋쟁이 사자처럼 8기 홍길동</h1> 
</body>

</html>

 

그리고 views.py 작성

 

 

그런 다음 urls.py 로 연결해주자.

 

 

맨앞의 about/ 의 의미는

 

네이버 웹툰 을 예로 들자면

 

www.naver.com/웹툰  

이런 식으로 이동을 한다 그렇다면 우리도

 

우리의페이지/about

 

이런식으로 도메인을 정하겠다는 의미이다.

 

 

서버를 켜고, 

 

주소를 입력하고, 확인해보자

 

잘 나온다 . 

 

그럼 근데 우리가 만든 navbar 는 어떡해?

 

base.html 이라는 파일을 templates 폴더에 만들어보자.

 

그런 후, home.html 에 

 

home.html

<form aciton="">

    <div class="form-group">
        <label for="exampleFormControlTextarea1">
            <h1>word count</h1>
        </label>
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" style="width:300px"></textarea>
    </div>
    <input type="submit" class="btn btn-dark" value="전송!">
</form>

이 코드만 남겨두고 ,

나머지는 base.html 로 복사 붙여넣기 하자

 

base.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">word count</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">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">about</a>
                </li>

    </nav>


    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
    </script>
</body>

</html>

 

 

위의 세 코드를 위치에 맞게 넣어주자.

참고로 {% %} 는 장고 문법을 사용하겠다는 의미이다

{% extends 'base.html' %}

{%block content%}

{%endblock%}

 

home.html 

{% extends 'base.html' %}
{%block content%}
<form aciton="">

    <div class="form-group">
        <label for="exampleFormControlTextarea1">
            <h1>word count</h1>
        </label>
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" style="width:300px"></textarea>
    </div>
    <input type="submit" class="btn btn-dark" value="전송!">
</form>
{%endblock%}

 

 

base.html 에도 위치에 맞게 넣어주자.

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">word count</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">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">about</a>
                </li>

    </nav>
    {%block content%}
    {%endblock%}



    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
    </script>
</body>

</html>

 

 

{% extends 'base.html' %} : base.html을 기본으로 가져온다는 의미이다.

 

 

{% block content %} 와 {% endblock %} : 이 사이에 있는 내용을 content라고 하고

이 부분이 base.html에 있는 {% block content %} 와 {% endblock %} 사이에 들어간다고 생각하면 된다.

 

 

about.html

<!DOCTYPE html>
{% extends 'base.html' %}
{%block content%}
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1> 만든이 : 멋쟁이 사자처럼 8기 홍길동</h1>

</body>

</html>
{%endblock%}

 

여기에도 작성해주자. 

 

그런다음 페이지를 확인해보자 .

이제 우리는 저 세 줄의 코드만 알맞은 위치에 넣어주면 Navbar를 사용할 수 있게 되었다.

 

'강의 > Django' 카테고리의 다른 글

LikeLion Second Session - wordcount, bootstarp - 3  (0) 2020.07.21
LikeLion Second Session - wordcount, boostrap - 1  (0) 2020.07.21
LikeLion Second Session- MTV Pattern  (0) 2020.07.21

관련글

티스토리툴바