스타일시트(CSS)를 이용한 화면 꾸미기

장고(Django)에서 스타일시트(CSS)를 이용한 화면 꾸미기는 웹페이지를 보기 좋게 만드는 데 필수적입니다. 장고는 정적 파일(static files)을 관리하는 기능을 제공하며, 이를 통해 CSS 파일을 프로젝트에 연동할 수 있습니다. 아래는 단계별로 스타일시트를 활용하여 화면을 꾸미는 방법을 설명드립니다.

🔷 1. CSS란?

CSS(Cascading Style Sheets)는 웹 문서의 디자인과 레이아웃을 정의하는 언어입니다. HTML이 웹페이지의 뼈대를 만들면, CSS는 그 뼈대에 색, 크기, 여백, 정렬 등의 옷을 입히는 역할을 합니다.

🔷 2. 장고에서 CSS 적용 절차

✅ (1) static 디렉터리 만들기

앱 디렉터리 안에 static 폴더를 만듭니다.

myapp/
  ├── static/
  │   └── myapp/
  │       └── style.css

myapp 폴더명은 앱 이름과 같게 맞춰주는 것이 관례입니다.

✅ (2) settings.py 설정 확인

# settings.py
STATIC_URL = '/static/'

※ 보통 기본값으로 설정되어 있으므로 변경할 필요는 없습니다.

✅ (3) 템플릿에서 static 태그 로드

템플릿 파일(.html) 상단에 {% load static %} 선언을 반드시 해야 합니다.

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="{% static 'myapp/style.css' %}">
    <title>나의 장고 웹페이지</title>
</head>
<body>
    <h1>환영합니다!</h1>
    <p>장고 스타일 적용 예제입니다.</p>
</body>
</html>

🔷 3. CSS 작성 예시 (style.css)

body {
    background-color: #f5f5f5;
    font-family: 'Nanum Gothic', sans-serif;
    color: #333333;
    margin: 40px;
}

h1 {
    color: #0055aa;
    border-bottom: 2px solid #cccccc;
    padding-bottom: 10px;
}

p {
    font-size: 18px;
    line-height: 1.6;
}

🔷 4. 개발 서버에서 static 파일 확인

개발 중에는 runserver로 실행하면 Django가 자동으로 static 파일을 제공합니다:

python manage.py runserver

단, 배포할 때는 static 파일을 별도로 수집해야 합니다. (예: python manage.py collectstatic)

✅ 정리

항목	설명
static 디렉터리	앱 내부 또는 프로젝트 내부에 생성
{% load static %}	템플릿에서 정적 파일을 사용하기 위한 선언
{% static '경로' %}	정적 파일(CSS, JS, 이미지) 경로 지정
CSS 파일	스타일 꾸미기를 담당

저작자표시 (새창열림)

'컴퓨터 활용 > 노년에 즐기는 코딩' 카테고리의 다른 글

자동 렌더링 메서드, 'as_p' (2)	2025.07.19
부트스트랩(Bootstrap)을 꼭 이용해야 할까요? (3)	2025.07.18
장고(Django)에서 URL 별칭(name) (2)	2025.07.16
리눅스 서버에서 타임존(Timezone) 설정 (0)	2025.07.15
전자책 관리 도구, Calibre(캘리버)와 '문화공감 여름학교' (1)	2025.07.14

실버를 위한 스마트교육

스타일시트(CSS)를 이용한 화면 꾸미기