06 / 14

글 카드 만들기

velog 첫 화면은 글 카드가 쭉 깔려 있죠. 카드 하나를 손으로 만들어요. templates/index.html의 <main> 안을 이렇게 바꾸세요.

templates/index.html

  <main>
    <h1>내 블로그</h1>
    <article class="card">
      <a href="/posts/1">
        <img class="thumb" src="/static/thumb1.svg" alt="">
        <div class="body">
          <h2>FastAPI 첫 서버 띄우기</h2>
          <p>uvicorn 한 줄이면 끝. 흰 화면에 Hello World가 뜨는 순간부터 시작.</p>
          <span class="date">2026년 10월 10일</span>
        </div>
      </a>
      <div class="foot">
        <span>by <b>sfadfe</b></span>
        <span>♥ 518</span>
      </div>
    </article>
  </main>

처음 보는 태그들

<article> 글 하나. 의미만 있고 모양은 없어요.
<img src="..."> 이미지. src가 파일 위치예요. 닫는 태그가 없어요.
<div> 아무 의미 없는 상자. 묶어 두고 싶을 때 써요.
<h2> 두 번째 크기 제목. <h1>부터 <h6>까지 있어요.
<span> 줄 안에서 일부분만 감쌀 때. <b>는 굵게.
class="card" 이름표예요. 다음 단계에서 CSS가 이 이름으로 찾아요.

실행하면

이미지가 깨져 보여요. 정상이에요. static/thumb1.svg 파일은 미리 넣어 뒀는데 서버가 아직 static 폴더를 열어 주지 않았어요. 다음 단계에서 고쳐요.

카드 제목을 눌러 보세요. /posts/1로 가는데 서버에 그 주소가 없어서 404가 떠요. 2단계에서 본 그 404예요. 11단계에서 만들어요. 오른쪽 주소칸 왼쪽 화살표로 돌아오면 돼요.

이 단계 전체 코드

app.py

from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates

app = FastAPI()
templates = Jinja2Templates(directory="templates")


@app.get("/", response_class=HTMLResponse)
def home(request: Request):
    return templates.TemplateResponse(request, "index.html")

templates/index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>crack.log</title>
</head>
<body>
  <header>
    <a href="/">crack.log</a>
  </header>
  <main>
    <h1>내 블로그</h1>
    <article class="card">
      <a href="/posts/1">
        <img class="thumb" src="/static/thumb1.svg" alt="">
        <div class="body">
          <h2>FastAPI 첫 서버 띄우기</h2>
          <p>uvicorn 한 줄이면 끝. 흰 화면에 Hello World가 뜨는 순간부터 시작.</p>
          <span class="date">2026년 10월 10일</span>
        </div>
      </a>
      <div class="foot">
        <span>by <b>sfadfe</b></span>
        <span>♥ 518</span>
      </div>
    </article>
  </main>
</body>
</html>

이전 완료, 다음 단계로