CSS 의 파일을 분리하는 작업을 할것이다.
분리전 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 폴더를 따로 만들려면 어떻게 할까?
Managing Static files
STATIC_FILES_DIR 를 따로 지정을 해줄 수 있다. staticfiles 가 보통은 앱 내부에 있는 static 폴더를 찾는데 그게 아니라 임의적으로 staticfiles 의 디렉토리를 추가해주어 앱에 종속되어 있지 않은 static 폴더를 따로 만들 수 있다.
settings.py 에 다음 코드 추가
STATICFILES_DIRS = [
BASE_DIR / "static",
]
그후 static 디렉토리 생성
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: 'Lobster', 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>추가적으로 DEFAULT CSS LINK 를 추가하여 주소를 넣어줄 것이다. 링크를 추가하는데 rel="stylesheet" 그리고 타입은 "text/css" 그리고 나서 href 에 static 에 관란 구문을 사용할 수 있는데
위와 같은 구문을 추가하면 base.css 에 필요한 경로를 이 구문이 알아서 찾아서 렌더링을 헤서 실제 브라우저에게 넘겨주어 text/css 라는 파일을 우리가 전체 템블릿에서 사용할 수 있게 되는 것이다.
똑같은 결과 값을 보이는것을 확인하였다.
{% static 'base.css' %} 이게 장고가 자동적으로 다음과 같이 변경을 해서 가져다 준것이다
->href 주소 형태
href 에 들어간 주소를 어떻게 위 사진에서 볼수있듯이 href 에서 보이는 주소처럼 변환하는가
settings.py 에서 STATIC_URL 이라는 값이 있다 이게 static 인데 여기에 추가적으로 우리가 head.html 에 넣었던 {% static 'base.css' %} 를 연결히여 합친것을 장고가 브라우저에게 넘기게 된다.
나머지 css 분리
<!--header.html-->
<div class="pragmatic_header">
<div>
<h1 class="pragmatic_logo">Prgmatic</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: 'Lobster', cursive;
}
.pragmatic_footer_button {
font-size: .6rem;
}
.pragmatic_footer{
text-align:center;
margin-top: 2rem;
}
.pragmatic_header {
text-align:center;
margin: 2rem 0;
}
기존에 만들었던것과는 큰 차이가 없이 스타일 태그들의 css 파일 분리가 되었다.
커밋
