군붕이의 메모장

[Django] Static 폴더 설정하기 본문

웹 개발/백엔드

[Django] Static 폴더 설정하기

초보군붕이 2021. 2. 21. 11:21
반응형

디렉토리 구조

├─django_noobgg
│  └─__pycache__
├─static
│  └─summonor
│      ├─css
│      └─js
├─summonor
│  ├─migrations
│  │  └─__pycache__
│  └─__pycache__
└─templates
    └─summonor

settings.py

import os

# static 폴더의 최상위 URL 경로 - noob.gg/static/
STATIC_URL = '/static/'

# static 파일이 위치한 경로를 지정
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

 

index.html

<!-- static 로딩 -->
{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Noob.GG</title>

    <!-- static/summonor/css 폴더 내 style.css 불러오기 -->
    <link rel="stylesheet" href="{% static 'summonor/css/style.css' %}">
</head>
<body>
    <h1>Welcome to Noob.GG</h1>

    <!-- static/summonor/js 폴더 내 script.css 불러오기 -->
    <script src="{% static 'summonor/js/script.js' %}"></script>
</body>
</html>

 

script.js

let h1 = document.querySelector('h1');

h1.style.color = 'red';

 

style.css

h1 {
    border: 1px solid black;
}

 

결과화면

JS, CSS 파일이 정상적으로 적용된 모습

반응형
저작자표시

'웹 개발 > 백엔드' 카테고리의 다른 글

[Nest.js] Nest.js에서 사용자 인증 처리하기 with Passport  (0) 2023.03.12
Node.js AWS S3 이미지 업로드하기 feat. AWS-SDK v3  (0) 2023.02.27
[Django] Ubuntu 18.04 에서 mysqlclient 설치오류 해결방법  (0) 2021.07.18
[Django] Static 태그 내에서 변수를 사용하는 방법  (0) 2021.03.21
[Django] templates 폴더 경로 설정하기  (0) 2021.02.21
'웹 개발/백엔드' Related Articles more