bootstrap을 이용하여 django의 웹페이지를 쉽게 만들기

2024년 10월 26일

Bootstrap의 이점

간편한 디자인 구현

Bootstrap은 오픈 소스 프론트엔드 프레임워크로, 미리 디자인된 다양한 컴포넌트와 스타일을 제공합니다1.
이를 활용하면 전문적인 디자인 지식 없이도 깔끔하고 현대적인 웹페이지를 만들 수 있습니다.

반응형 웹 디자인

Bootstrap은 기본적으로 반응형 디자인을 지원하여 다양한 디바이스와 화면 크기에 자동으로 적응합니다3.

시간 절약

기본적인 HTML과 CSS 코딩 시간을 크게 줄일 수 있어 개발 속도가 향상됩니다.

Django와 Bootstrap 통합

정적 파일 설정

Bootstrap 파일을 다운로드하거나 CDN 링크를 사용합니다.
Django 프로젝트의 static 폴더에 Bootstrap 파일을 추가합니다.
settings.py에서 STATIC_URL과 STATICFILES_DIRS를 설정합니다1.

템플릿 적용

Django 템플릿에 {% load static %} 태그를 추가하여 정적 파일을 로드합니다.
Bootstrap CSS와 JS 파일을 링크합니다.
Bootstrap 클래스와 컴포넌트를 활용하여 페이지를 디자인합니다2.

1. Bootstrap 설치 및 설정

1.1 Bootstrap CDN 추가

base.html 템플릿에 Bootstrap CSS와 JS 파일을 추가합니다:

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock %}</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    {% block content %}
    {% endblock %}

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

2. Bootstrap 컴포넌트 활용 예시

2.1 네비게이션 바 만들기

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="/">My Site</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/about">About</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

2.2 게시글 목록 페이지 만들기

{% extends 'base.html' %}

{% block content %}
<div class="container mt-5">
    <h1 class="mb-4">게시글 목록</h1>
    
    <div class="row">
        {% for post in posts %}
        <div class="col-md-4 mb-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">{{ post.title }}</h5>
                    <p class="card-text">{{ post.content|truncatewords:30 }}</p>
                    <a href="{% url 'post_detail' post.id %}" class="btn btn-primary">자세히 보기</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}

2.3 로그인 폼 만들기

{% extends 'base.html' %}

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">로그인</h4>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label for="username" class="form-label">아이디</label>
                            <input type="text" class="form-control" id="username" name="username">
                        </div>
                        <div class="mb-3">
                            <label for="password" class="form-label">비밀번호</label>
                            <input type="password" class="form-control" id="password" name="password">
                        </div>
                        <button type="submit" class="btn btn-primary">로그인</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

3. Bootstrap 그리드 시스템 활용

3.1 반응형 레이아웃 만들기

<div class="container">
    <div class="row">
        <!-- 큰 화면에서는 3개 칼럼, 중간 화면에서는 2개 칼럼, 작은 화면에서는 1개 칼럼 -->
        <div class="col-lg-4 col-md-6 col-12">
            <div class="card mb-4">
                <div class="card-body">
                    <h5>Content 1</h5>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12">
            <div class="card mb-4">
                <div class="card-body">
                    <h5>Content 2</h5>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12">
            <div class="card mb-4">
                <div class="card-body">
                    <h5>Content 3</h5>
                </div>
            </div>
        </div>
    </div>
</div>

4. Bootstrap 유틸리티 클래스 활용

4.1 마진과 패딩

<!-- 마진 추가 -->
<div class="mt-5">위쪽 마진 5단위</div>
<div class="mb-3">아래쪽 마진 3단위</div>
<div class="ms-2">왼쪽 마진 2단위</div>
<div class="me-2">오른쪽 마진 2단위</div>

<!-- 패딩 추가 -->
<div class="p-3">모든 방향 패딩 3단위</div>
<div class="pt-2">위쪽 패딩 2단위</div>

4.2 텍스트 스타일링

<p class="text-primary">파란색 텍스트</p>
<p class="text-center">가운데 정렬</p>
<p class="fw-bold">굵은 텍스트</p>
<p class="text-truncate">긴 텍스트를 줄임표로 처리...</p>

5. Django Form과 Bootstrap 통합

5.1 Django Form 스타일링

# forms.py
from django import forms

class MyForm(forms.Form):
    title = forms.CharField(
        widget=forms.TextInput(attrs={'class': 'form-control'})
    )
    content = forms.CharField(
        widget=forms.Textarea(attrs={'class': 'form-control'})
    )

5.2 템플릿에서 form 렌더링

<form method="post">
    {% csrf_token %}
    {% for field in form %}
    <div class="mb-3">
        <label for="{{ field.id_for_label }}" class="form-label">
            {{ field.label }}
        </label>
        {{ field }}
        {% if field.errors %}
        <div class="alert alert-danger mt-1">
            {{ field.errors }}
        </div>
        {% endif %}
    </div>
    {% endfor %}
    <button type="submit" class="btn btn-primary">제출</button>
</form>

이렇게 Bootstrap을 활용하면 깔끔하고 반응형인 웹페이지를 쉽게 만들 수 있습니다. Bootstrap의 다양한 컴포넌트와 유틸리티 클래스를 활용하면 디자인 작업 시간을 크게 줄일 수 있습니다.

상희 김

검색엔진최적화, 인바운드마케팅, 유튜브최적화 전문