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

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

개인 Bookmark웹 만들기

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

이번 시간에 할 것

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

템플릿 만들기

1. 템플릿 만들기

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

2. base.html에 연결하기

템플릿 분리형 확장

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

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

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

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

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