Byeonguk Kim

안녕하세요. 29살의 조금은 늦은 나이로 새롭게 개발자로 시작하는 신입 개발자입니다. 포트폴리오 [https://deaguowl.github.io]

Django 07. Bookmark 템플릿 만들기 및 base.html에 연동시키기

03 May 2019 » Django

2019.05.03 북마크 프로젝트의 템플릿 만들기 및 base.html에 연동시키기

개인 Bookmark웹 만들기

  • 웹사이트를 통해 개인 북마크를 설정할 수 있다.
    • 북마크에는 url 주소와 사이트명이 들어간다.
    • 해당 사이트에 대한 설명과 작성일자가 자동으로 생성된다.
  • 메인 페이지에서 해당 북마크에 대한 리스트를 보여준다.
    • 메인페이지에서 북마크 추가하기 버튼으로 추가할 수 있다.
    • 해당 북마크를 클릭하면 상세페이지로 이동한다.
    • 상세페이지에서 수정 및 삭제를 할 수 있다.
    • base.html과 연동하여 쉽게 구현할 수 있도록 한다.

이번 시간에 할 것

  • 템플릿 만들기
  • base.html에 연결하기
  • 템플릿 꾸미기
    • 부트스트랩 활용

템플릿 만들기

1. 템플릿 만들기

  • bookmark 아래에 templates 폴더 만들기
  • templates 아래에 bookmark 폴더 만들기
  • 그 아래에 html 파일들 생성해주기
  • 이후 많은 앱들이 생기는 경우 서로 겹치는 문제를 해결하기 위해 templates 아래에 bookmark폴더를 다시 만들고 html파일 생성

590CF98A-B512-47DE-B9F0-593788F31DD2

2. base.html에 연결하기

템플릿 분리형 확장

  • 매번 있어야하는 내용을 지속적으로 넣어주기가 귀찮음
  • 앱 별로는 각각의 템플릿에 필요하나 전체 앱에 있어야하는 것은 전체 루트위로 뺀다.
  • 전체 프로젝트 아래에 layout을 만들고 아래에 base.html을 만든다.
  • 내가 원하는 부분부분 나누어 놓는다.(by block)
    • bookmark 템플릿들은 base.html을 확장받아 사용한다.
  • settings templates
    • base.html을 찾을 수 있도록 경로를 지정해준다.
    • DIR에 추가적으로 등록해놓는다. (directorys)
      • os.path.join(베이스디렉토리의 layout 폴더를 등록해놓는다.)
    • base.html을 부트스트랩을 디자인 할 것이다.

3797052E-BBF5-4F7F-9D27-C5ED880B0FDD

  1. layout 디렉토리를 만들고 그 아래에 base.html을 만듭니다.
  2. layout 경로를 찾을 수 있도록 setting에 templates 경로를 지정해줍니다.

3. Bootstrap 적용하기

  1. 부트스트랩을 적용하면 누구나 손쉽게 웹사이트 디자인을 할 수 있습니다.
  2. Bootstrap · The most popular HTML, CSS, and JS library in the world. 에 접속합니다.
  3. base.html 파일에 부트스트랩을 사용하기 위해 필요한 css 및 javascript 링크를 넣습니다.
    1. css 파일은 head의 마지막에 위치
    2. javascript 파일은 body의 마지막에 위치
#css 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 

#javascript

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  1. 부트스트랩에서 마음에 드는 navbar를 가지고 옵니다.

    1. Navbar · Bootstrap

950BEEB6-C57F-42DD-A23D-BAEB19DA1A8F

  1. 마음에 드는 포맷을 찾으면 해당 포맷을 적용할 html에 넣어줍니다.
    1. 지금은 base.html에 넣어줍니다.(body tag내 위치)
    2. 파일들을 적절하게 수정하고 클릭시 연결할 링크를 연결해줍니다.
      1. <a href = “ “ > 내 위치
      2. url ‘bookmark:index’ 등과 같이 연결
    3. block content를 만들어서 다른 템플릿에서 추가할 수 있도록 구성합니다.

21BCAAC7-3E89-48CC-87D2-F7510382814D

  • 상단 링크 구성을 Home과 북마크 생성하기로 구성
  • 아래쪽에 { block content } { endblock } 을 구성

다음 시간에는 상세 페이지들을 하나씩 구성해보겠습니다.