CSS 파일을 분리
1. 분리 전 static 관한 설정하기
자주 변경되지 않은 파일들을 프로젝트 앱별로 관리
settings.py -> STATIC_ROOT = 'staticfiles' 추가
python manage.py collectstatic
위 명령어는 static 파일들을 한 군데로 모아 주는 역할을 함
저 명령어를 통해서 파일들을 어디로 모을 것인지를 알려주는 것이 STATIC_ROOT이다.
정확하게는 STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') 으로 표현
os.path.join :
os라는 라이브러리
os에서 제공하는 함수 중 path 경로 관련 join 함수(합친다)
BASE_DIR
(ctrl + b : 선언돼있는 이 내용으로 바로 건너뛰기)#BASE_DIR 선언 부분 #Build paths inside the project like this: BASE_DIR / 'subdir'. BASE_DIR = Path(__file__).resolve().parent.parentBASE_DIR 의미 :
__file__settings.py 파일의 상위 두 단계로 올라가면 pragmatic 폴더가 있는데 그 폴더를 BASE DIRECTORY로 하겠다는 의미.
즉 STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') 이 표현은
pragmatic이라는 프로젝트 폴더 즉 BASE_DIR 위에 추가적인 'staticfiles' 라는 폴더에 static 파일들을 다 모으겠다는 식의 작동이 됨을 의미한다.
특정 앱에 종속되어 있지 않은 프로젝트 전체에서 관리할 수 있는 static 폴더를 따로 만들려면 어떻게 할까?
2. Managing Static files
STATIC_FILES_DIR를 따로 지정 가능. staticfiles가 보통은 앱 내부에 있는 static 폴더를 찾는데 그게 아니라 임의적으로 staticfiles의 디렉토리를 추가해줘 앱에 종속되어 있지 않은 static 폴더를 따로 만들 수 있다.
settings.py에 다음 코드 추가
STATICFILES_DIRS = [
BASE_DIR / "static",
]progmatic 하위 폴더로 static 폴더 생성 후 base.css 파일 생성
footer css 분리
<!--footer.html-->
<div style="text-align:center; margin-top: 2rem;">
<div style="font-size: .6rem;">
<span>공지사항</span> |
<span>제휴문의</span> |
<span>서비스 소개</span>
</div>
<div style="margin-top: 1rem">
<h6 class="pragmatic_footer_logo">Pragmatic</h6>
</div>
</div>/*base.css*/
.pragmatic_footer_logo {
margin-top: 1rem;
font-family: 'Bebas Neue', cursive;
}style 부분을 지우고 특정 클래스 이름을 지정
그 후 따로 만들어놓은 static 파일 중 하나인 base.css 파일에
.(클래스이름){스타일 속성값들}를 지웠던 스타일 속성을 넣어줌
그러고 나서 base.css를 가져옴
static 관련한 파일들을 가져오려면 head.html 파일 최상단에 {% load static %} 이라고 작성해야 함
static 관련한 구문을 이 파일 내부에서 사용할 수 있게 됨
<head>
...
<!--DEFAULT CSS LINK-->
<link rel="stylesheet" type="text/css" href="{% static 'base.css' %}">
</head>head.html 밑부분에 DEFAULT CSS LINK를 추가해 주소를 넣어줌
링크를 추가하는데 rel="stylesheet" 사용
타입은 "text/css" 그리고 나서 href에 static에 관련 구문을 사용 가능
위와 같은 구문을 추가하면 base.css에 필요한 경로를 이 구문이 알아서 찾아서 렌더링함
실제 브라우저에게 넘겨주어 text/css라는 파일을 전체 템블릿에서 사용할 수 있게 됨
나머지 css 분리
<!-- header.html -->
<div class="pragmatic_header">
<div>
<h1 class="pragmatic_logo">Pragmatic</h1>
</div>
<div>
<span>nav1</span>
<span>nav2</span>
<span>nav3</span>
<span>nav4</span>
</div>
</div><!-- footer.html -->
<div class="pragmatic_footer">
<div class="pragmatic_footer_button">
<span>공지사항</span> |
<span>제휴문의</span> |
<span>서비스 소개</span>
</div>
<div style="margin-top: 1rem;">
<h6 class="pragmatic_logo">Pragmatic</h6>
</div>
</div>/*base.css*/
.pragmatic_logo {
margin-top: 1rem;
font-family: 'Bebas Neue', cursive;
}
.pragmatic_footer_button {
font-size: .6rem;
}
.pragmatic_footer{
text-align:center;
margin-top: 2rem;
}
.pragmatic_header {
text-align:center;
margin-top: 2rem 0;
}
기존 그대로로 스타일 태그들의 css 파일이 분리됨
Git에 저장
