이전 포스팅에서 템플릿의 샌드위치 구조에 대해 설명했다. 정적파일 또한 템플릿과 마찬가지로 샌드위치 구조를 통해 관리해야 한다.
정적파일 관리
정적파일, 즉스태틱 파일은템플릿과 마찬가지로샌드위치 구조로 관리해야 한다.앱 디렉토리내부에static디렉토리 생성하고앱 디렉토리 이름과 일치하는 디렉토리를 추가로 생성한다. 이후 가장 안쪽 디렉토리에css, font, images를 구분하는 디렉토리를 생성하여 구조를 더욱 깔끔하게 정리한다.
📂ABC
📄manage.py
📄db.sqlite3
📂ABC
📄__init__.py
📄settings.py
📄urls.py
📄wsgi.py
📂APP1
📂static 📌정적파일 폴더 생성
📂APP1 📌샌드위치 구조 폴더 생성
📂css 📌css 폴더 생성
📄styles.css 📌css 파일(더미)
📂fonts 📌fonts 폴더 생성
📂images 📌images 폴더 생성
📄flower.jpg 📌이미지 파일(더미)
📂templates
📂APP1
📄index.html
📂migrations
📄__init__.py
📄admin.py
📄apps.py
📄models.py
📄tests.py
📄views.py
📄urls.py정적파일 적용
기존에 작성한
html 템플릿이다.
<!DOCTYPE html>
<html>
<head>
<title>제목</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div> 2023년 12월 26일 </div>
<h2>평화로운 마을의 아침</h2>
<img src="images/flower.jpg">
<p>
어느 평화로운 마을의 이른 아침, 새들의 지저귐이 부드럽게 울려 퍼지며,<br>
햇살이 창문을 통해 스며들어 온 방을 환하게 밝혀줍니다.<br>
사람들은 잠에서 깨어나 하루를 시작하고, 아이들은 학교로 가는 길에 즐겁게 뛰어놉니다.<br>
마을 곳곳에서는 사람들이 서로 인사를 나누며, 작은 가게들은 아침 준비를 시작합니다. <br>
모든 것이 평온하고, 마음은 기쁨으로 가득 차 있습니다.
</p>
</body>
</html>위 템플릿에
정적파일을 적용하기 위해서는 아래와 같이 수정하면 된다.
{% load static %} 📌static 디렉토리에 있는 정적파일을 현재 템플릿에서 사용한다고 알려주는 코드
<!DOCTYPE html>
<html>
<head>
<title>제목</title>
<meta charset="utf-8">
<link rel="stylesheet" href={% static 'APP1/css/styles.css' %}> 📌static css 파일을 적용하는 코드
</head>
<body>
<div> 2023년 12월 26일 </div>
<h2>평화로운 마을의 아침</h2>
<img src={% static 'APP1/images/flower.jpg' %}> 📌static 이미지 파일을 적용하는 코드
<p>
어느 평화로운 마을의 이른 아침, 새들의 지저귐이 부드럽게 울려 퍼지며,<br>
햇살이 창문을 통해 스며들어 온 방을 환하게 밝혀줍니다.<br>
사람들은 잠에서 깨어나 하루를 시작하고, 아이들은 학교로 가는 길에 즐겁게 뛰어놉니다.<br>
마을 곳곳에서는 사람들이 서로 인사를 나누며, 작은 가게들은 아침 준비를 시작합니다. <br>
모든 것이 평온하고, 마음은 기쁨으로 가득 차 있습니다.
</p>
</body>
</html>
정적파일을 적용하기 위해 사용된템플릿 언어는 별도의 포스팅을 통해 설명하겠다.
글로 쓰면 머리 속에 정리가 되...나?