멋쟁이 사자처럼 at 한국교통대학교 7기

2019 KNUT X LIKE LION #7

코스 전체목록

닫기

정적 파일

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

 

 

 

 

실행

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

 

 

 

 

댓글

댓글 본문
  1. 박재성
    정말 쉽고 자세한 설명 최곱니다. ㅠㅠ
  2. 카라멜팝콘
    좋은 강의 감사합니다!
버전 관리
KNUT X LIKE LION
현재 버전
선택 버전
graphittie 자세히 보기