Flask에서 정적 폴더 만들기

Salman Mehmood 2024년2월15일

Python Python Flask Static

이 설명을 통해 정적 디렉토리 내에서 정적 자산 또는 정적 파일을 사용하는 방법을 배웁니다. 또한 사용자 정의 CSS 파일을 Flask로 가져오는 방법도 배웁니다.

Flask에서 정적 폴더 만들기

Flask 앱에는 이미지를 표시하고 사용자 정의 CSS 클래스에서 로드하고 사용자 정의 JavaScript를 사용하는 이상한 방법이 있습니다. 자, 이제 시작하겠습니다.

우리는 처음부터 시작하기 때문에 완전히 새로운 프로젝트를 만들 것입니다. Flask에서 일부 클래스를 가져와 모듈을 소문자로 작성한 다음 앱 개체를 만듭니다.

from flask import Flask, render_template

app = Flask(__name__)

index()라는 기본 홈 페이지 함수를 만들 것입니다. 개별 데코레이터의 두 가지 루트를 '/home' 및 '/'로 설정합니다.

두 개의 루트를 추가하는 목적은 단일 함수에서 둘 이상의 route()를 사용할 수 있다는 것을 보여주기 위한 것입니다.

return 키워드를 사용하여 render_template()을 반환하고 home.html 파일을 전달합니다.

@app.route("/home")
@app.route("/")
def index():
    return render_template("home.html")

앱을 실행하려면 아래 코드를 사용해야 합니다.

run() 메소드는 Flask 앱을 실행하는 데 도움이 됩니다. 디버깅을 보기 위해 debug를 True와 동일하게 전달해야 하지만 사이트를 프로덕션 수준으로 가져올 때 False를 작성하여 끌 수 있습니다.

if __name__ == "__main__":
    app.run(debug=True)

이제 모든 HTML 파일을 저장할 템플릿 폴더를 설정해야 합니다. 이를 위해 새 폴더를 만들고 templates라고 부릅니다. 그런 다음 static이라고 하는 또 다른 새 폴더를 만들어야 합니다.

이제 특정 파일을 저장할 위치를 이미 알 수 있습니다. templates 폴더로 이동하여 base.html이라는 새 파일을 만든 다음 home.html이라는 새 파일을 만듭니다.

base.html 파일 내부에 아주 기본적인 HTML 코드를 작성하고 head에 블록 제목을 설정하고 body 태그 내부에 다른 블록 내용을 추가하겠습니다.

Flask 애플리케이션은 모든 정적 파일에 대한 기본값을 설정합니다. 이 파일은 정적이라는 폴더에 저장됩니다. 즉, 이 폴더를 정적으로 만들어야 한다는 의미입니다. 이제 원하는 특정 파일 이름을 참조합니다. {{ url_for('static',filename='style.css') }}를 href 속성에 전달하고 그 주위에 큰따옴표를 넣습니다.

이런 식으로 link 태그의 Python 코드를 사용하여 static 폴더의 URL을 가져와 URL을 제공하고 정확한 파일 이름을 지정합니다.

<html>
  <head>
    <title>{% block title %}{% endblock  %}</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='style.css') }}">
  </head>
  <body>
    {% block content %}{% endblock %}
  </body>
</html>

이제 base 템플릿이 있습니다. home.html 파일 내부의 {% extends 'base.html' %} jinja 코드를 사용하여 이 base 템플릿을 확장하고 일부 블록을 사용하여 base.html 요소에 액세스해 보겠습니다.

{% extends 'base.html' %}
{% block title %}
    Home Page
{% endblock  %}
{% block content %}
    <h1> Home Page</h1>
{% endblock  %}

이제 정적 디렉토리 안에 정적 파일을 만들고 사용자 정의 CSS를 가져오는 방법에 대해 이야기하겠습니다. static 디렉토리 안에 새 CSS 파일을 만들고 style.css라고 불러야 합니다. 당신이 그것을 부르는 것은 중요하지 않습니다.

확장자 대신 파일 이름을 변경할 수 있지만 이름을 기억해야 합니다. 이제 간단하게 유지하기 위해 style.css 파일 안에 기본 스타일만 작성합니다.

CSS body 선택기를 설정하고 color 속성을 사용한 다음 crimson 색상 값을 전달합니다.

body {color: crimson;}

그리고 우리는 끝났습니다. 이제 이 응용 프로그램을 실행하는 것이 좋습니다.

from flask import Flask, render_template

app = Flask(__name__)


@app.route("/home")
@app.route("/")
def index():
    return render_template("home.html")


if __name__ == "__main__":
    app.run(debug=True)

이제 웹 브라우저를 열고 제목이 있는 홈페이지로 이동합니다.

Flask 정적 폴더 출력

작가: Salman Mehmood

Hello! I am Salman Bin Mehmood(Baum), a software developer and I help organizations, address complex problems. My expertise lies within back-end, data science and machine learning. I am a lifelong learner, currently working on metaverse, and enrolled in a course building an AI application with python. I love solving problems and developing bug-free software for people. I write content related to python and hot Technologies.