본문 바로가기
Python/Django

django bootstrap 적용

by usang0810 2019. 8. 14.

django project를 생성한 후에 app을 하나 생성합니다.(저는 project의 이름을 portfolio, app의 이름을 main이라고 지었습니다.)

 

project폴더안에 static이라는 폴더를 생성한 뒤 settings.py의 마지막부분을 다음과 같이 수정합니다.

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

(STATICFILES_DIRS 안에 콤마를 붙이지 않으면

ERRORS: ?: (staticfiles.E001) The STATICFILES_DIRS setting is not a tuple or list. HINT: Perhaps you forgot a trailing comma? 이런식의 에러가 발생합니다.)

 

 

 

아래의 사이트에 들어가 본인이 원하는 테마 또는 템플릿을 선택한 뒤 다운로드 합니다.(저는 Freelancer라는 테마를 선택했습니다.)

 

Free Bootstrap Themes, Templates, Snippets, and Guides

Start Bootstrap develops free to download, open source Bootstrap 4 themes, templates, and snippets and creates guides and tutorials to help you learn more about designing and developing with Bootstrap.

startbootstrap.com

 

Free Download버튼을 눌르면 zip파일이 다운로드 됩니다. 해당파일을 압축해제하면(Freelancer 테마의 경우) 아래와 같은 구조로 나옵니다. 여기서 index.html파일을 제외한 모든 파일을 방금 전 생성한 static폴더에 붙여넣습니다.

 

 

 

그리고 app에 templates라는 폴더를 생성한 뒤 그안에 index.html파일을 붙여넣습니다.

index.html파일의 맨 위에 아래와 같은 템플릿 코드를 추가합니다.

{% load staticfiles %}

 

index.html파일안의 경로를 나타내는 코드를 아래와 같이 수정합니다.

  <!-- Custom fonts for this theme -->
  <link href="{% static 'vendor/fontawesome-free/css/all.min.css' %}" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">

  <!-- Theme CSS -->
  <link href="{% static 'css/freelancer.min.css' %}" rel="stylesheet">

 

index.html의 모든 경로를 static경로를 추가하여 수정을 완료하면 서버를 실행하면 됩니다.

 

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

django app 만들기  (0) 2019.03.21
django 설치  (0) 2019.03.21