이번 포스팅에서는 부트스트랩에서 제공하는 다양한 CSS 스타일을 손쉽게 적용하는 방법에 대해 알아보겠습니다.
CDN이란 개념부터 출발하지만, 그런것보다는 실제 적용을 어떻게 시키는지 위주로 설명하겠습니다.
지금까지는?
부트스트랩의 기본 틀을 가져올 때, 아래 코드처럼 파일을 불러왔습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- Bootstrap 초기화 부분 --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> </body> </html> | cs |
만약 다른 스타일을 적용하고 싶다면 어떻게할까요?
여기에서 무료로 제공하는 테마들이 있습니다.
원하는 테마를 선택하고, bootstrap.min.css를 다운받습니다. 즉, 이렇게 다운 받은 css 파일을 프로젝트로 넣어서 적용시키는 원리입니다.
다운받은 css 파일 프로젝트에 넣기
다음 순서로 진행합니다.
- 프로젝트에 static 폴더 생성
- 폴더에 css 파일 넣기
settings.py 에서 static 폴더 넣기
위에 넣어준 css 파일을 읽기 위해서 선언하는 부분입니다. 셋팅 파일에서 다음 구문을 추가합니다.
1 2 3 4 | STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static') ] | cs |
html에서 css 파일 불러오기
가장 위에 쓴 코드에 따르면, 인터넷 주소를 매개로하여 css 파일을 불러왔습니다. 이제 이걸 로컬로 바꿔주기만 하면 됩니다.
1 2 3 4 | STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static') ] | cs |
이렇게 한 뒤 서버를 돌리면, 아래 그림처럼 선택한 테마가 적용된 것을 볼 수 있습니다.
'Developer > Django' 카테고리의 다른 글
| [Django] Form 이해 및 사용 방법 (0) | 2020.11.30 |
|---|---|
| [Django] MTV - Template 상속하기 (0) | 2020.11.28 |
| [Django] GET, POST 메소드 구현 (0) | 2020.11.26 |
| [Django] URL 연결하기 (0) | 2020.11.25 |
| [Django] 모델 테이블 분리해서 어드민 페이지에 보여주기 (0) | 2020.11.24 |
댓글