본문 바로가기
Coding/Python

[Python & Flask] 플라스크에서 static 폴더 경로 참조 하는 방법 !!

by 포스트it 2024. 2. 21.
반응형

[Python & Flask] 플라스크에서 static 폴더 경로 참조 하는 방법 !!

 

Flask에서 HTML 파일과 CSS 파일을 연결하는 일반적인 방법은 Flask의 정적(static) 파일 제공 기능을 사용하는 것입니다. Flask는 정적 파일을 제공하기 위해 static 폴더를 사용하며, 이 폴더 내의 파일들은 URL을 통해 직접 접근할 수 있습니다. HTML 파일에서 CSS 파일을 참조할 때는 Flask의 url_for 함수를 사용하여 정적 파일 경로를 생성해야 합니다.

폴더 구조 예시

your_flask_app/
│   app.py
└───templates/
│      └─your_template.html
└───static/
       └─css/
          └─style.css

CSS 파일 참조 방법

  1. HTML 파일 내에서 CSS 파일 참조: HTML 템플릿(your_template.html)에서 CSS 파일(style.css)을 참조하려면 <link> 태그의 href 속성에 url_for 함수를 사용합니다.
<!DOCTYPE html>
<html>
<head>
    <title>Your Page Title</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <!-- Your content goes here -->
</body>
</html>
  1. Flask 앱에서 템플릿 렌더링: Flask 앱(app.py)에서 render_template 함수를 사용하여 HTML 템플릿을 렌더링합니다.
# app.py
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('your_template.html')

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

문제 해결

CSS 파일을 찾지 못하는 경우 다음 사항을 확인하세요

  • 정적 폴더 구조: CSS 파일이 Flask 앱의 static 폴더 내에 적절한 위치에 있는지 확인합니다.
  • 파일 경로: url_for 함수에서 사용하는 파일 경로가 정확한지 확인합니다. 경로는 static 폴더 내부의 구조를 반영해야 합니다.
  • 브라우저 캐시: 브라우저 캐시 때문에 최신 CSS 파일이 로드되지 않을 수 있습니다. 이 경우 브라우저 캐시를 비우거나 강력 새로고침(대부분의 브라우저에서 Ctrl+F5)을 시도하세요.
  • 서버 로그: Flask 서버 로그를 확인하여 CSS 파일에 대한 요청이 제대로 이루어지고 있는지, 오류 메시지가 있는지 확인합니다.

이러한 점들을 확인하면 대부분의 CSS 파일 연결 문제를 해결할 수 있습니다.

728x90
반응형

댓글