09 CSS 및 Static 파일 연결 | ✅ 편저: 코담 운영자

Django 웹 프로그래밍 강좌 9강 - CSS 및 Static 파일 연결 (Django 5.2 기준)

강의 영상:

이 강의는 Django 공식 문서의 2.2 튜토리얼 내용을 바탕으로 진행되며, Django 5.2 버전에 맞춰 정적 파일 처리 방식을 설명합니다.

📚 공식문서 주소: https://docs.djangoproject.com/ko/5.2/howto/static-files/

---

1. 정적 파일(Static files)이란?

웹사이트에서 사용자에게 시각적으로 보이는 요소는 대부분 정적 자원입니다:

• HTML: 구조
• CSS: 스타일
• JavaScript: 인터랙션
• 이미지 파일(JPG, PNG 등)

이러한 리소스들을 장고에서는 "정적 파일"이라고 부릅니다.

정적 파일은 서버로부터 사용자 브라우저로 직접 전송되는 파일입니다.

---

2. Django에서 static 파일 기본 구조

장고에서는 앱 단위로 static 파일을 구성합니다. 기본 구조는 다음과 같습니다:

polls/
├── static/
│   └── polls/
│       ├── css/
│       │   └── style.css
│       └── images/
│           └── example.png

• static/ 디렉토리는 각 앱 내에서 생성 가능
• 앱 이름으로 네임스페이스화하여 충돌을 방지합니다
• Django는 네임스페이스 구조(static/앱이름/) 사용을 권장합니다

앱 이름과 동일한 디렉토리 하위에 정리하면 프로젝트 규모가 커져도 정리가 쉬워집니다

---

3. CSS 파일 작성 및 연결

CSS 파일 작성 예 (polls/static/polls/css/style.css):

body {
    background-color: #f9f9f9;
    font-family: sans-serif;
}

a {
    color: #007bff;
    text-decoration: none;
}

템플릿에서 static 파일 불러오기

{% load static %}
<link rel="stylesheet" href="{% static 'polls/css/style.css' %}">

• {% load static %}: 템플릿 상단에서 선언해야 정적 태그 사용 가능
• {% static '...' %}: 파일 경로를 URL로 변환해주는 템플릿 태그

개발 환경에서는 DEBUG = True 설정일 때 static 파일이 자동으로 제공됩니다

---

4. 이미지 파일 활용

이미지도 static 파일로 동일하게 처리합니다.

예시 디렉토리 구조:

polls/static/polls/images/logo.png

템플릿에서 이미지 출력:

<img src="{% static 'polls/images/logo.png' %}" alt="Logo">

• 템플릿에서 경로가 정확히 지정되지 않으면 이미지가 표시되지 않으므로 주의해야 합니다

---

5. 전역 static 디렉토리와 STATICFILES_DIRS 설정

앱 외부에도 공통 static 파일을 두고 싶을 때는 settings.py에 다음과 같이 설정합니다:

STATICFILES_DIRS = [
    BASE_DIR / "static",
]

• static/ 디렉토리를 프로젝트 루트에 생성하고, 공통 CSS/JS/이미지를 여기에 넣을 수 있습니다
• 이 설정이 없으면 앱 내부 static 디렉토리만 처리됩니다

전역 static 디렉토리는 polls/static/ 같은 앱 내부 구조와 별도로 동작합니다

---

6. 실무에서의 static 파일 관리

배포 시:

• 모든 static 파일은 collectstatic 명령어로 한곳에 모아야 합니다:

python manage.py collectstatic

• STATIC_ROOT 설정에 따라 모은 파일을 배포 서버나 CDN에 업로드합니다
• WhiteNoise, nginx, CloudFront 등을 통해 정적 파일을 고속으로 서빙

STATIC_ROOT = BASE_DIR / "staticfiles"

DEBUG = False일 때 static 파일은 자동 제공되지 않으며 반드시 collectstatic 후 서빙 설정이 필요합니다

---

마무리 요약

• HTML/CSS/JS/이미지 등은 모두 Django에서 static 파일로 관리
• 앱 내부 또는 프로젝트 전역으로 static 파일 분리 가능
• 템플릿에서는 {% load static %}, {% static '경로' %} 사용
• CSS나 이미지가 안 보일 경우 경로 오류 또는 static 설정 확인 필요
• 배포 환경에서는 collectstatic 및 정적 파일 서빙 설정 필수

---

다음 강의 예고

10강에서는 Django의 Admin 기능을 더 커스터마이징하여 보다 유연하게 관리 화면을 구성하는 방법을 알아봅니다.

감사합니다.