July 5, 2019

Python Flask - Static File

Javascript(js), Style Sheets(css) 같은 파일은 정적 파일들을 /static에서 불러 올 수 있습니다.




from flask import Flask, render_template
app = Flask(__name__)

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

/app.py




/*!
 * Bootstrap v4.1.2 (https://getbootstrap.com/)
 */
:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

*, ::after, ::before {
    box-sizing: border-box
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent
}

/static/bootstrap.css




<html>
<head>
    <title>DongDongE</title>
    <link href="{{ url_for('static', filename = 'bootstrap.css') }}" rel="stylesheet">
</head>
<body>
<div class="row history-item">
              <div class="col-md-2"><time>TEST</time></div>
              <div class="col-md-10">
                <h4>TEST<span>TEST</span></h4>
             </div>
            </div>
</body>
</html>

/templates/index.html

{{ url_for('static', filename = '파일명') }} 형태로 url_for() 함수를 사용하여, Static 파일을 링크로 불러 올 수 있습니다.




[static file]