Static

Static이란?

Django에서 다루는 파일의 종류는 크게 Static File, Dynamic File 두 가지가 있습니다. Static File은 미리 서버에 저장되어 있으며 서버에 저장된 그대로를 서비스해주는 파일입니다. Dynamic File은 서버의 데이터들이 어느정도 가공된 다음 서비스되는 파일입니다. Static File은 다시 static과 media 두가지로 나눌 수 있습니다. 쉽게 static은 개발할 때 미리 준비해두어 프로젝트에 미리 업로드 된 파일(css, image, javascript)이고, media는 사용자가 업로드한 파일입니다.

1. basic>static 폴더 생성

2. static 폴더 안에 css와 images 폴더 생성

3. css>project.css 생성 후 코드 작성

h1{
    color:orange;
}

4. css>images에 사진 넣기

드래그앤 드롭으로 넣으면 됩니다. 확장자랑 이름을 잘 확인해주세요.

5. basic>settings.py 설정하기

settings.py 맨 마지막 부분에 추가해주세요.

STATIC_URL = '/static/'


STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'basic', 'static')
] # static 파일들이 현재 어디에 있는지를 쓰는 곳
  # BASE_DIR(최상위 프로젝트 폴더(basic))>basic>static 폴더에 static 파일들이 있다.

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
# static 파일들이 어디로 모일 것인지를 쓰는 곳
# BASE_DIR(최상위 프로젝트 폴더(basic)) 하위에 'static'이라는 폴더를 만들어 모은다.

6. static 파일들 모으기

$ ls # 현재 위치에 manage.py가 있는지 확인
$ python manage.py collectstatic

7. mainpage.html에서 static 사용하기(image)

{% extends 'base.html' %} <!-- 제일 위에 적어줘야합니다. -->
{% load static %} <!-- html 파일에서 satic파일을 사용할거라고 알려주기 -->

{% block content %}
    <h1>2021 Dongguk Likelion 3rd session</h1>
    <a href="{% url 'first' %}">first</a>
    <a href="{% url 'second' %}">second</a>
    <img src="{% static 'images/image01.jpg' %}"> <!-- static 파일들이 있는 경로(BASE_DIR>basic>static 폴더)에서 images 폴더의 image01.jpg -->
{% endblock %}

8. base.html에서 static 사용하기(css)

static을 사용할 때는 {% load static %}를 위에 써주는 것 잊지 맙시다.

<!DOCTYPE html>
{% load static %} <!-- html 파일에서 satic파일을 사용할거라고 알려주기 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="{% static 'css/project.css' %}">  <!-- static 파일들이 있는 경로(BASE_DIR>basic>static 폴더)에서 css 폴더의 project.css를 Link style로 연결 -->
</head>
<body>
    {% include 'shared/_navbar.html' %}
    <div class="container">
        {% block content %}

        {% endblock %}
    </div>
    </body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

03.md

03.md

Static

Static이란?

1. basic>static 폴더 생성

2. static 폴더 안에 css와 images 폴더 생성

3. css>project.css 생성 후 코드 작성

4. css>images에 사진 넣기

5. basic>settings.py 설정하기

6. static 파일들 모으기

7. mainpage.html에서 static 사용하기(image)

8. base.html에서 static 사용하기(css)

Files

03.md

Latest commit

History

03.md

File metadata and controls

Static

Static이란?

1. basic>static 폴더 생성

2. static 폴더 안에 css와 images 폴더 생성

3. css>project.css 생성 후 코드 작성

4. css>images에 사진 넣기

5. basic>settings.py 설정하기

6. static 파일들 모으기

7. mainpage.html에서 static 사용하기(image)

8. base.html에서 static 사용하기(css)