Static

heeyoung_1023·2026년 3월 6일

Static 파일의 역할


🤔 Static이란?

Static = 정적 = 변하지 않는 파일들

서버에서 내용이 바뀌지 않는 파일들을 모아두는 곳


📁 Static 폴더 안에 들어가는 것들

static/
  css/
    style.css       ← 디자인 (색상, 크기, 레이아웃)
  js/
    script.js       ← 동작 (버튼 클릭, 애니메이션)
  images/
    logo.png        ← 이미지
    background.jpg

🆚 Static vs Dynamic 차이

Static (정적)              Dynamic (동적)
──────────────────────────────────────────
style.css                 Todo 목록
  → 항상 똑같음             → DB에 따라 바뀜

logo.png                  사용자 이름
  → 항상 똑같음             → 로그인마다 바뀜

🔗 HTML에서 사용하는 방법

{% load static %}   ← 맨 위에 선언 필수

<!-- CSS -->
<link rel="stylesheet" href="{% static 'css/style.css' %}">

<!-- JS -->
<script src="{% static 'js/script.js' %}"></script>

<!-- 이미지 -->
<img src="{% static 'images/logo.png' %}">

💡 Static이 없으면?

Static 없음                Static 있음
──────────────────────────────────────
❌ 흰 배경                 ✅ 예쁜 디자인
❌ 스타일 없음             ✅ CSS 적용
❌ 기능 없음               ✅ JS 동작
❌ 이미지 없음             ✅ 이미지 표시

📦 Todo 프로젝트에서 예시

static/
  css/
    style.css    ← Todo 목록 예쁘게 꾸미기
  js/
    todo.js      ← 완료 버튼 클릭 시 동작
  images/
    check.png    ← 완료 체크 아이콘

쉽게 말해 웹사이트의 옷(디자인)과 행동(기능)을 담당하는 파일들 이에요!

profile
개발언어를 배우는 과정 기록

0개의 댓글