html 파일 + css 파일
- 지난 토픽까지 진행하면서 부트스트랩을 이용하여 다음과 같은 블로그 홈 화면을 구성해보았습니다.
- 하지만 이 부트스트랩 html은 css 파일을 별개로 가져서 이를 따로 관리해줄 필요가 있다고 하였습니다.
static file
- 정적 파일은 영어로 하면 'static file' 입니다.
굳이 번역을 하자면 정적(움직이지 않는) 파일이 되겠습니다.
즉, 우리가 페이지를 만들 때 쓰임이 정해져있는 파일들이기 때문에 개발하는 단계에서 이러한 파일들을 관리하는 것입니다.
css 파일, jpg 등 이미지 파일 또는 javascript 파일 같은 것 등이 정적 파일이 될 수 있습니다.
이와 반대되는 개념이 media 파일입니다.
media file
- 'media file'은 'static file'과는 다르게 사용자가 업로드하는 파일입니다.
따라서 이는 개발하는 단계에서 관리할 수 없는 파일들이기 때문에 따로 분류하여 관리하게 됩니다.
- 이번 토픽에서는 'media file'에 대해서는 다루지 않습니다.
static file 디렉토리 생성
- 이제 PyCharm으로 돌아와서 직접 관리를 해보도록 하겠습니다.
- 우리는 'blogapp' 안에서 static file을 관리할 것입니다.
[blogapp]에서 오른쪽 클릭을 합니다. [blogapp]-[New]-[Directory]를 눌러줍니다.
다음과 같이 디렉토리 생성창이 뜹니다. 'static'이라고 입력하고 [OK]버튼을 누릅니다.
- 다음과 같이 [blogapp] 안에 [static] 디렉토리가 생성되었습니다.
- 이제부터 우리는 [static] 디렉토리 안에서 정적 파일들을 관리할 것입니다.
- 지금 우리가 관리해야 할 파일은 css 파일입니다.
- 보통 css 파일들은 하나의 디렉토리로 묶어서 관리하므로 다시 [css] 디렉토리를 만들겠습니다.
[static] 디렉토리에서 오른쪽 클릭을 합니다. [static]-[New]-[Directory]를 클릭합니다.
디렉토리 생성창이 뜨면 css를 입력하고 [OK]버튼을 누릅니다.
- 최종적으로 [blogapp]안에 [static] 디렉토리가 생성되었고, 그 안에 [css] 디렉토리가 생성되었습니다.
- 저번 토픽에서 진행하였던 폴더로 이동합니다.
[cover.css] 파일을 복사합니다.([Ctrl}+[C])
[css]디렉토리를 선택 후 오른쪽 클릭합니다. [Paste]를 눌러 붙여넣기 합니다.
다음 창이 뜨면 [OK] 버튼을 누릅니다.
- [css] 디렉토리 밑에 [cover.css] 파일이 생긴 것을 볼 수 있습니다.
settings.py
- 이제 [static] 디렉토리를 생성하였으니 이것을 시스템에 알려주는 작업을 해야합니다.
[firstProject]에 [settings.py]를 클릭합니다.
- [settings.py] 맨 아래 라인에 다음과 같이 입력합니다.
- 이 작업은 [static file]의 위치를 지정해주는 작업입니다.
- [STATICFILES_DIRS]는 우리가 생성한 [blogapp] 안에 [static] 디렉토리에 'static file'들을 지정해놓았다는 것을 알려주기 위함입니다.
- [STATIC_ROOT]는 장고에서는 하나의 장고 프로젝트에서 흩어져있는 'static file'들을 한 곳으로 모으는데, 이것은 프로젝트 디렉토리에서 [static] 디렉토리에 모을 것이라는 의미입니다.
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'blogapp', 'static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
- 작업이 끝났으면 터미널을 열어 static file들을 한 곳으로 모아주는 명령어를 입력해야 합니다.
[Alt]+[F12]를 눌러 터미널을 열어 명령어를 입력합니다. python manage.py collectstatic
- 다음과 같이 뜨면 성공입니다.
- 프로젝트 탐색기로 가서 보면 [static] 폴더가 새로 생성된 것을 볼 수 있습니다.
index.html
- 이제 마무리 단계입니다.
- [index.html]를 수정하겠습니다.
[blogapp]-[templates]-[index.html]파일을 엽니다.
우리가 저번 토픽에서 완성한 부트스트랩 폴더로 이동합니다. [index.html]을 누른 뒤 마우스 오른쪽 클릭합니다. [연결 프로그램]-[Visual Studio Code]를 열고 내용을 복사합니다.
다시 PyCharm으로 돌아와서 [index.html]에 붙여넣기 합니다.
- 그리고 일단 다음과 같이 수정하여 줍니다.
{% load static %}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'css/cover.css' %}">
</head>
- 첫번째 라인의 의미는 우리가 'static'으로 설정한 것을 html 문서로 불러 들이는 의미입니다.
- 4번째 라인의 의미는 불러들인 'static' 파일 중 어떤 것을 적용할 지에 대해 경로를 설정하는 의미입니다.
- 하지만 지금까지 배운 html 태그는 꺽쇠 기호<>로 묶여 있었지만, 위에서 사용한 {% %}는 그렇게 생기지 않았습니다.
- 이는 장고에서 특별히 사용하는 템플릿(template) 언어입니다.
장고의 템플릿 문법을 사용하면 html 문서에서 다양한 작업이 이루어질 수 있습니다.
지금은 일단 장고 템플릿에 대한 설명은 미뤄두고 구현에 집중하여 진행하겠습니다.
- 장고 템플릿에 대한 내용은 장고 강의 중 다음 토픽인 템플릿 토픽에서 볼 수 있습니다.
https://opentutorials.org/course/3718/24665
- 어쨋든, {% %}는 장고 템플릿 태그이고, 이것을 사용하여 우리는 'static' 파일들을 html로 불러올 수 있습니다.
실행
- 서버를 돌려봅시다.
- 이제 블로그 홈 화면이 완성되었습니다.
