본문 바로가기

컴퓨터 프로그래밍/Django

[Django] media root에 이은 static root 설정과 css분리 방법 정리!

반응형

안녕하세요 시란입니다. 

이전 포스팅에서 media root 와 media 컨텐츠에 대해서 공부 같이 했었죠?

 

이번 시간에는 static root 와 static 설정 방법을 알아보겠습니다. 

 

 

 

먼저 static files, static설정이 왜 필요할까요?

 

우선 아래 코드를 보실께요. 

 

html 과 css 그리고 script로 완전 보기 힘들어요. 

이렇게 한번에 html에 구겨넣는것도 물론 괜찮아요. 

프로그램은 잘 돌아갑니다. 

 

다만 수정할 부분이 생기거나 전체적인 틀을 수정해야된다거나 등의 문제가 발생시에는 

다시 하나하나 스크롤 내려가면서 봐야되는 불편함이 생깁니다. 

 

만약 기능별로 html 과 css, 그리고 script도 나눌수 있다면 편하게 기능별로 수정하기 편하겠죠?

 

 

먼저 settings.py에 들어갑니다.

저번 포스팅 기억나시죠?

MEDIA_ROOT = BASE_DIR / "../templates/jpg/"
MEDIA_URL = "/"

이렇게 설정했었잖아요.?

 

참고로 저의 BASE_DIR는 와 template의 폴더 레벨은 0단계 차이에요

 

0단계 레벨 차이에요. 만약 한단계 아래 있거나 했다면, 

그냥 template라고 설정되어있었을 꺼에요.

하지만 현재는 study 폴더와 template폴더는 0단계 레벨 차이이기 때문에 template폴더 내부로 들어가려면 

../template/ ~~~ 로 표기해야됩니다. :) 여러분의 프로젝트 설정에 맞게 설정하시면 됩니다. 

 

그리고 static도 마찬가지로 이렇게 작성합니다.

STATIC_URL = "static/"
STATIC_ROOT = BASE_DIR / "../templates/"

 

이렇게 BASE_DIR/ "../templates/

라고 쓴다면 그 뒤 css폴더인지 html 폴더인지 쉽게 선택 가능하겠죠?

 

그리고 나서 STATICFLIES_DIR 설정을 아래와 같이 settings.py 에 써줍니다. 

django 에게 이런 폴더 경로를 쓸꺼다 알려주는거죠. 


STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'templates'),
]

 

자 이렇게 해서 세팅이 완료되었습니다. 

 

그러면 한번 테스트를 해볼까요?

html 파일 맨 위에 {% load static %} 이라고 불러줍시다. 

<!doctype html>
{% load static %}

 

그리고 나서 css불러올 부분 (<HEAD> 부분이겠죠?)에 이렇게 작성해줍니다. 

<title>siranstagram </title>
<link rel="stylesheet" href="{% static "css/instagram.css" %}">

</head>

 

이렇게 하면 정상적으로 css가 불러와졌음을 확인할 수 있답니다.

 

 

지금까지 static 파일 불러오기에 대해서 알아보았습니다. 

다른 블로그 글들의 경우 이런 시행착오에 대해서 적어놓은 내용을 찾기 힘들더라고요.

그래서 저같은 경우는 제가 직접 해보고 시행착오를 겪고 해결방법을 적고 있답니다. 

 

저와 같은 초보 프로그래머들이 쉽게 알수있게 포스팅을 작성하고 있습니다. 

앞으로도 노력해서 높은곳으로 갈 수 있도록 정진하겠습니다. 

감사합니다. 

 

반응형