Bootstrap — 데이터를 '보기 좋은 화면'으로

지난 강까지 오면 앱은 작동합니다. 그런데 화면은 1990년대 같아요. 글자는 붙어 있고, 표에는 선이 없고, 휴대폰으로 보면 글씨가 개미만 하죠.

CSS를 처음부터 배워야 할까요? 아닙니다. Bootstrap(부트스트랩)은 전 세계에서 가장 많이 쓰는 완성된 CSS 부품 상자예요. 우리는 부품 이름(클래스)만 붙이면 됩니다.

설치는 이 한 줄이 전부입니다

<!-- base.html 의 <head> 안에 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

이 한 줄만으로 글꼴·여백·색이 전부 정돈됩니다. 그 다음은 부품을 골라 쓰는 일이에요.

👀 진짜로 보이는 예시

아래는 설명 그림이 아니라 진짜 Bootstrap 부품입니다. 이 강의 페이지도 Bootstrap 5로 만들어졌기 때문에 바로 보이는 거예요. 브라우저 창을 좁혔다 넓혀 보세요 — 카드가 저절로 줄을 바꿉니다.

이 카드 세 장을 손으로 세 번 쓴 게 아닙니다. Jinja2가 DB의 행 세 개를 받아 같은 틀로 세 번 찍어 낸 것이죠. 코드를 보면 이렇습니다.

3층 + 4층이 만나는 자리

이 강의 전체에서 가장 중요한 코드 한 조각일지도 모릅니다. DB의 행 → Jinja2 반복 → Bootstrap 카드가 한 화면에서 만납니다.

<!-- templates/products.html -->
{% extends "base.html" %}
{% block content %}

<div class="row g-3">                        <!-- 4층: 격자 -->
  {% for p in products %}                    <!-- 3층: DB 행만큼 반복 -->
  <div class="col-6 col-md-4 col-lg-3">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">{{ p.emoji }} {{ p.name }}</h5>
        <p class="card-text text-secondary">{{ "{:,}".format(p.price) }}원</p>

        {% if p.stock > 0 %}
          <span class="badge bg-success">{{ p.stock }}개 남음</span>
          <button class="btn btn-primary btn-sm w-100 mt-3">담기</button>
        {% else %}
          <span class="badge bg-danger">품절</span>
          <button class="btn btn-secondary btn-sm w-100 mt-3" disabled>담기</button>
        {% endif %}

      </div>
    </div>
  </div>
  {% endfor %}
</div>

{% endblock %}

col-6 col-md-4 col-lg-3을 읽어 볼까요? 휴대폰에서는 한 줄에 2개(6/12), 태블릿은 3개(4/12), PC는 4개(3/12). 화면 크기에 따라 알아서 바뀌는 것을 반응형(responsive)이라고 합니다.

🎮 반응형 실험실 — 창을 줄이지 않고도 확인할 수 있습니다

아래에서 화면 크기를 바꿔 보세요. 휴대폰·태블릿·데스크톱에서 이 화면이 어떻게 보이는지 브라우저 창을 건드리지 않고 확인할 수 있습니다. 그리고 아래쪽 HTML은 15강의 Jinja2가 여러분의 DB 행으로 실제로 만들어 낸 것이에요.

• 슬라이더를 768px 근처에서 천천히 움직여 보세요. 어느 순간 배치가 탁 바뀝니다 — 그 지점이 브레이크포인트입니다.
• col-md- 값을 바꾸면 "12 ÷ 몇 = 한 줄에 몇 개"가 위에 계산되어 나옵니다.
• 표로 바꾸고 화면을 375px로 줄인 뒤, table-responsive를 껐다 켜 보세요.
• g-0 과 g-5 를 비교해 보세요. 간격 하나로 인상이 완전히 달라집니다.
• 무엇을 눌러도 SQL과 파이썬은 그대로라는 점을 확인하세요. 바뀌는 건 클래스 이름뿐입니다.