[Django-Memo] 6. 화면 꾸미기

디자인을 할 수 없기에 화면을 그나마 이쁘게 꾸미기 위해서는 CSS를 써야하는데 이것 또한 만만한 작업이 아닙니다.

그래서 널리 알려진 bootstrap을 이용하겠습니다.

 

먼저 홈페이지 들어가 파일을 다운 받겠습니다.

https://getbootstrap.com/docs/4.6/getting-started/download/

Download

 

 

다음으로 복사할 곳을 만들어야 합니다.

프로젝트 루트 폴더에서 static 폴더를 생성하고 그 아래 css 폴더를 생성합니다.

 

 

다운 받은 파일의 압축을 풀면 아래와 같은 파일이 나오는데 그 중 "bootstrap.min.css" 파일을 복사하여 위에서 생성한 css폴더에 복사합니다.

 

 

static 폴더를 정의해야합니다. config/settings.py를 열고 STATIC_URL 하단에 아래와 같이 입력합니다.

config/settings.py

 

 

이 내용이 반영되기 위해서는 서버를 재시작해야합니다.

이제 static 파일(css, javasctipt, image) 들을 이곳에 두면 django가 찾아가게 됩니다.

 

templates/memo/memo_list.html 파일을 열고 bootstrap css 파일을 등록합니다.

templates/memo/memo_list.html

 

 

이제 모든 준비는 끝났습니다.

화면 꾸미기는 정답이 없습니다.

아래 링크 참조해서 만들었습니다.

https://www.w3schools.com/bootstrap4/default.asp

 

 

 

상단은 타이틀로 구성하고 타이틀 우측에 로그오프 상태면 로그인을 보여주고 로그인 상태면 로그인한 아이디를 보여주겠습니다.

그 하단에는 메모를 등록할 수 있는 form을 위치시키고 그 하단에는 메모 내용을 보여줍니다.

templates/memo/memo_list.html

 

이렇게 스타일을 적용하면 아래와 같이 화면이 변경됩니다.

 

 

과거 백엔드만 해서.. HTML, CSS가 익숙하지 않습니다.

잘한건지 맞는건지 모르겠네요 ㅎㅎ

 

다음으로 반복되는 HTML 부분을 따로 빼서 중복코딩이 없도록 하겠습니다.

templates/memo/memo_list.html을 열어 상단 타이틀 부분을 templates/memo/base.html 이란 이름으로 만들겠습니다.

최상단 {% load static %}는 static 폴더 불러오는 부분이고

body 태그 내 {% block content %} {% endblock %} 를 작성합니다.

이 부분이 실제 컨텐츠가 들어가는 부분입니다.

templates/memo/base.html

 

 

다음으로 templates/memo/memo_list.html을 아래와 같이 수정합니다.

최상단 {% extends 'base.html' %}은 templates/memo/base.html 부분을 넣는 부분입니다.

그 다음으로 {% block content %} ~~~ {% endblock %}을 작성하여 해당 부분이 base.html에 들어가게 되겠습니다.

templates/memo/memo_list.html

 

 

이제 다음에 만들 로그인 및 회원가입 페이지는 base.html을 import하게 되고 이로 인해 상단 타이틀 부분에 대해 중복코딩을 하거나 변경되는 부분에 대해 전체 적용되어 효율적인 관리가 가능합니다.