🌐 Django에서의 HTTP 동작 원리와 HTML, CSS 연동 구조

1. 🔁 HTTP 요청부터 응답까지의 흐름

웹은 기본적으로 클라이언트-서버 모델에 따라 동작합니다.

📦 요청 → 처리 → 응답 순서

브라우저
  |
  | (1) 요청: URL 클릭, form 제출 등
  ↓
Django 웹 서버 (views.py)
  |
  | (2) 요청 처리 및 로직 실행
  ↓
템플릿 렌더링 (HTML)
  |
  | (3) HTML 응답 생성
  ↓
브라우저
  |
  | (4) 화면 렌더링 + CSS/JS 불러오기

---

2. ⚙ Django의 내부 동작 구조

✅ 1) URL 요청

• 사용자가 브라우저에서 https://example.com/posts/를 요청하면,
• urls.py에서 해당 URL 패턴을 찾아 views.py의 특정 함수(또는 클래스)를 실행합니다.

# urls.py
path("posts/", views.posts_list, name="posts-list")

 

✅ 2) View에서 로직 처리

• View는 DB에서 데이터를 조회하거나 계산한 후,
• 템플릿 파일(HTML)과 함께 응답합니다.

# views.py
def posts_list(request):
    posts = Post.objects.all()
    return render(request, "blog/posts.html", {"posts": posts})

✅ 3) Template 렌더링

• Django의 템플릿 엔진은 .html 파일을 읽고,
• 전달받은 데이터를 반영해 HTML 코드로 변환합니다.

<!-- posts.html -->
{% for post in posts %}
  <h2>{{ post.title }}</h2>
{% endfor %}

---

3. 🎨 HTML & CSS의 역할

📄 HTML

• 구조를 담당합니다. (<div>, <h1>, <p>, <form> 등)
• Django가 render()로 반환하는 주된 콘텐츠는 HTML입니다.

🎨 CSS

• 스타일을 담당합니다.
• Django에서는 보통 static 폴더를 만들어 .css 파일을 관리합니다.

<!-- HTML 예시 -->
<link rel="stylesheet" href="{% static 'styles/main.css' %}">

🔁 브라우저는 HTML을 먼저 받고, 그 안에 연결된 CSS/JS도 추가 요청함

(1) HTML 받음 → (2) CSS/JS 경로 탐색 → (3) 정적 파일 요청 → (4) 화면 완성

---

4. 🧱 정적 파일 (Static files)의 처리

• 개발 중엔 runserver가 CSS 파일도 자동으로 서빙합니다.
• 배포 시엔 웹 서버(Nginx 등)가 직접 처리하거나 별도 정적 파일 서버를 둡니다.

# settings.py
STATIC_URL = "/static/"
STATICFILES_DIRS = [BASE_DIR / "static"]

---

📌 정리

단계내용관련 파일

단계	내용	관련 파일
요청	사용자가 URL을 요청	urls.py
처리	View에서 데이터 처리	views.py
렌더링	HTML 템플릿 렌더링	templates/*.html
스타일	CSS 파일로 꾸밈	static/*.css

 

---

📷 다이어그램 이미지 첨부