정적 파일

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로 불러올 수 있습니다.

실행

서버를 돌려봅시다.
이제 블로그 홈 화면이 완성되었습니다.

댓글