13.Django(장고) - ecommerce 프로젝트 - static의 이해

1.스태틱(static) 디렉터리

config\settings.py

(... 생략 ...)

STATIC_URL = 'static/'
STATICFILES_DIRS = [
    BASE_DIR / 'static',
]

(... 생략 ...)

BASE_DIR / 'static'은 ~ecommerce\static 디렉터리를 의미한다. 따라서, 다음과 같이 static 디렉터리를 생성

2.스타일시트 적용해 보기

이제 style.css 파일을 다음과 같이 새로 작성한다.

[파일명: ~static\style.css]

textarea {
    width:100%;
}

input[type=submit] {
    margin-top:10px;
}

3.템플릿에 스타일 적용

이제 작성한 스타일시트 파일을 질문 상세 템플릿에 적용한다.
templates\boards\post_detail.html

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
<h1>{{ question.subject }}</h1>
(... 생략 ...)

템플릿에서 스타일시트와 같은 스태틱 파일을 사용하려면, 템플릿의 최상단에 {% load static %} 태그를 먼저 삽입해야 한다. 이를 통해 {% static ... %}와 같은 템플릿 태그를 사용할 수 있다

예제

{% load static %} : static 모듈을 임포트 한다.
{% static 'jquery-3.6.0.min222.js' %} : jquery 정적 파일 주소를 동적으로 가져온다.

4.이미지 파일적용 시켜 보기

아래의 이미지를 넣고

주소를 아래와 같이 하여 확인

https://blog.naver.com/pjok1122/221607153665
https://velog.io/@joje/%EC%9E%A5%EA%B3%A0%EC%97%90%EC%84%9C-static-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EB%8B%A4%EB%A3%A8%EB%8A%94-%EB%B0%A9%EB%B2%95