1.HTML에 CSS 작성
화면을 꾸며주기 위해서 HTML의 태그들에 style을 적용한다. BOOTSTRAP 및 Google Font도 link로 적용한다.
header.html
<div style="text-align: center; margin: 2rem 0; font-family: 'Noto Sans KR'">
<div >
<h1>Pragmatic</h1>
</div>
<div>
<span>nav1</span>
<span>nav2</span>
<span>nav3</span>
<span>nav4</span>
</div>
</div>
head.html
<head>
<meta charset="UTF-8">
<title>Title</title>
{# BOOTSTRAP #}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
{# GOOGLE FONT#}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
</head>
footer.html
<div style="text-align: center; font-family: 'Noto Sans KR'">
<div style="font-size: .6rem">
<span>공지사항</span>
<span>제휴문의</span>
<span>서비스 소개</span>
</div>
<div style="margin-top: 1rem;">
<h6>Pragmatic</h6>
</div>
</div>
2. CSS static 파일로 변경하기
static 형태의 css 파일로 분리해내어 편리하게 관리할 수 있도록 변경한다. HTML의 태그들에 class를 부여한다.
footer.html
<div class="pragmatic-footer">
<div class="pragmatic-button">
<span>공지사항</span> |
<span>제휴문의</span> |
<span>서비스 소개</span>
</div>
<div class="pragmatic-logo">
<h6>Pragmatic</h6>
</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>
이렇게 적용 후, 루트 디렉토리/static/ 경로로 디렉토리를 생성하고, base.css 파일을 만든다.
base.css
.pragmatic-logo {
text-align: center;
margin: 2rem 0;
font-family: 'Noto Sans KR';
}
.pragmatic-footer {
text-align: center;
margin-top: 2rem;
}
.pragmatic-header {
text-align: center;
margin: 2rem 0;
}
이후 css 파일을 연결하기 위해서 head.html 파일에 link를 걸어준다. 여기서 템플릿 언어를 이용하여 {% static 'base.css' %}로 css 파일과 연결시켜준다. 또한 {% load static %} 구문을 맨 위에 작성하여 해당 html 페이지가 static 요소를 적용받는 페이지임을 알려줘야한다.
{% load static %}
<head>
# ...중략
{# DEFAULT CSS LINK #}
<link rel="stylesheet" type="text/css" href = "{% static 'base.css' %}">
</head>
이제 정상적으로 static한 css 파일이 연결되었다.
3. Django의 static 파일 설정
: STATIC_URL, STATICFILES_DIRS, STATIC_ROOT
settings.py의 일부
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.0/howto/static-files/
STATIC_URL = 'static/'
STATICFILES_DIRS = [
BASE_DIR / "static",
]
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL
STATIC_URL 설정은 main 패키지의 settings.py에 설정되어 있다. 이것은 static 파일들이 들어있는 폴더의 위치를 django가 인식할 수 있도록 해주는 것이다. 기본값은 '/static/'이며, static 폴더의 이름을 바꿔서 참조하려면, 이 STATIC_URL 값도 변경해주어야 한다. 위에서 base.css 파일이 세팅된 것은 이 속성값으로 static 디렉토리의 위치를 참조했기 때문이다.
STATICFILES_DIRS
위 STATIC_URL에서 설정한 디렉토리 외에 추가적으로 static 파일을 스캔할 디렉토리를 지정해준다. 참조2의 내용을 보면, 기존 루트 디렉토리의 static 폴더 외에 다른 static 폴더를 만들고 STATICFILES_DIRS를 이용하여 static 파일을 불러온다.
STATIC_ROOT
실제 서버 배포 시 프로젝트의 모든 static 파일을 하나의 경로에 모아주는 역할을 한다. settings.py 에서 DEBUG = TRUE인 경우 runserver 명령어로 서버를 띄울 때는 브라우저에서 자동으로 static 파일들을 모아준다. 그러나 디버그모드가 아니라 실제 배포를 할 때는 static file을 모아주어 참조하게 만들어야 되는데, 이 역할을 STATIC_ROOT 설정이 한다.
실제로 'python manage.py collectstatic' 명령어를 입력하면 입력한 위치에 staticfiles 폴더가 생성된다.
4. 참고 : CSS의 display, size 설정
display
display의 옵션은 4개다. block, inline, inline-block, None. 여기서 다른 것들은 기본적인 것이고, None은 개발자도구에서 해당 요소가 표시는 되는데 화면상에서는 렌더링이 안되게 할 수 있는 옵션이다. visibility 속성을 hidden으로 하여 요소는 있으나 화면상에 표시 안되게 하고 싶을때 사용한다.
size
size의 옵션은 4개다. px, em, rem, %. px은 화면상의 pixel 개수로 표현하기 때문에 다른 요소의 변화에 상관없이 절대적인 값을 갖는다. 그 외 나머지는 자식 객체를 감싸고 있는 부모 객체의 크기 변화에 영향을 받는다. 그중 %는 부모 객체의 크기에 대해 상대적으로 차지하는 비율로 요소를 표현하고 싶을때 사용한다.
em, rem은 부모 객체의 font-size 등이 변할 때 그 크기에 맞춰 비례적으로 변화한다. 1em = 1rem = 16px로 기본적으로 정의된다. 여기서 주의할 점은 em은 부모 객체가 이중, 그러니까 최상단 부모 요소- 부모 요소- 자식 요소로 이루어진 경우 최상단 부모요소의 size가 변화하고, 부모 요소의 size가 변화하면 이중으로 영향을 받는다. 최상단 부모 요소의 font-size가 2배, 부모 요소의 font-size가 2배가 됐을 때, 자식 요소는 4배의 size를 갖게된다.
그러나 rem을 적용하면 바로 위 직속 부모 요소의 크기 변화에만 영향을 받는다. 보통 모든 상속 구조를 신경써가면서 size를 조절하지는 않고 직속 부모 요소의 크기 정도만 관리하는 정도로 프로그래밍을 하기 때문에 rem을 많이 사용한다.
참조
1. 작정하고 장고! Django로 Pinterest 따라만들기 : 바닥부터 배포까지-박형석님 인프런 강의
2. DataPlanet - Static 실전 / StaticFiles경로 설정 / Static_Root 사용 이유?
https://0ver-grow.tistory.com/912
