Flask 웹 서버 만들기

Flask로 웹개발: #4 레이아웃(1) - base 와 css

TitediosKW 2024. 7. 19. 19:00
반응형


이번 포스팅에서는 Flask 쇼핑몰 프로젝트의 프론트엔드 부분을 구현하는 방법을 다루겠습니다. HTML과 CSS를 사용하여 쇼핑몰의 기본 레이아웃을 만들고, 사용자 경험을 개선하기 위한 디자인 요소를 추가해 보겠습니다.

html과 css를 모르신다면 복사만 하시고 적당히 눈으로만 보시면 되겠습니다. 보시고 편하게 이런저런게 있구나 정도 생각하시면 되고 이후에 기회가 닿는다면 html과 css에 대해서 공부하시면 됩니다.

1. 프로젝트 구조

다시 한번 저희의 프로젝트 구조를 살펴보겠습니다. 

flask_ecommerce/
├── app.py
├── create-product.py
├── env.yaml
├── instance
│   ├── products.db
│   └── project.db
├── __pycache__
│   └── app.cpython-39.pyc
├── README.md
├── static
│   └── css
│       └── styles.css
└── templates
    ├── base.html
    ├── cart.html
    ├── index.html
    └── product.html


html 파일과 css 파일은 각각 templates/ 폴더와 static/ 폴더 아래에 만들어 두었습니다. 그러면 만들어둔 html파일과 css파일을 작성해 보겠습니다.

2. HTML 파일 생성

base.html (위치: templates/base.html)

모든 페이지의 공통 레이아웃을 정의하는 템플릿입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask mini E-commerce</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
    <nav>
        <a href="{{ url_for('index') }}">Home</a>
        <a href="{{ url_for('cart') }}">Cart ({{ session.get('cart', [])|length }})</a>
    </nav>
    <div class="container">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

3. CSS 파일 생성

style.css (위치: static/css/style.css)

스타일링을 위한 CSS 파일입니다.

body {
    font-family: Arial, sans-serif;
    padding: 20px;
}

nav {
    margin-bottom: 20px;
}

nav a {
    margin-right: 10px;
    text-decoration: none;
    color: #007BFF;
}

nav a:hover {
    text-decoration: underline;
}

.container {
    max-width: 800px;
    margin: 0 auto;
}

결론

이번 포스팅에서는 Flask 쇼핑몰 프로젝트의 HTML과 CSS 부분을 구현했습니다. 아직은 구현할 html이 남았습니다. 오늘 작성한 html과 css는 다음에 작성할 html의 기초가 되는 레이아웃으로 index.html 등을 구현할 때 오늘 작성한 base.html을 참조할 것입니다.

한 가지 말씀드릴 것이 있습니다. 제가 이 포스팅을 작성하는 목적은 Flask를 활용하는 방법입니다. 그에 따라 html과 css의 디자인은 최소한으로만 작성할 예정입니다. 다만 걱정은 보시기에 홈페이지가 너무 단순하고 예쁘지는 않을 것입니다. html과 css에 대해서는 다음에 다루는 것으로 하고 여기서는 저와 함께 Flask에 집중해 보시면 좋겠습니다.

감사합니다!

반응형