210816 장고 : 핀터레스트 11강 (static 설정 및 css 파일 분리)

11강

스타일같은 것을 따로 분리 
스태틱= 정적 css나 js , font 여타 다른 자주 변경 되지 않는 에셋들 파일들을 스태틱이라한다.
프로젝트와 앱별로 따로 관리한다.
STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

os : library
path : 경로관련한 모듈
join : 합친다
BASE_DIR : settings file에서 상위경로를 따라가면 파더 폴더를 베이스 디렉토리로 하겠다.
그래서 결론은 staticfiles에 다 모으겠다.

footer 정보를 (class로 만들어줌)
 base.css에 폰트정보넣고 헤드에서 스태틱을 불러와서 {% load static %} 
base.html에 넣음{% load static %}  

<---base.css--->

 .pragmatic_logo {
    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;
}

<---footer.html--->
<div class="pragmatic_footer">

        <div class="pragmatic_footer_button">
            <span>제휴문의</span>  |
            <span>연락처</span>    |
            <span>서비스 소개</span>
        </div>
        <div style="margin-top: 1rem;">
            <h5 class="pragmatic_logo">Pragmatic</h5>
        </div>

    </div>

<---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>