[Flask] 파일 분리 (HTML, CSS, JS)

1. HTML 분리하기

기본적으로 Templates 안에 같이 있어야 됨. (Templates 내에서 폴더 구분 가능)

<!-- HTML 파일 분리 -->
<nav class="navbar">
	{% include 'nav/nav.html' %}
</nav>

ex)
{% include 'header.html' %}
{% include 'nav.html' %}
{% include 'article.html' %}
{% include 'footer.html' %}

<!-- nav.html -->
<div class="container-fluid" style="justify-content: space-between; flex-wrap: nowrap; min-width: 1000px">
    <!-- Brand Logo -->
    <div>
        <a class="navbar-brand">
            <img style='width:100px;'
                    src="https://www.instagram.com/static/images/web/mobile_nav_type_logo-2x.png/1b47f9d0e595.png">
        </a>
    </div>
</div>

 

 

2. CSS 분리하기

url_for를 이용하여 분리

<!-- CSS 분리 -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">

# CSS 파일
body { 
    font-family: 'Noto Sans KR', sans-serif; 
}

 

3. JS 분리하기

url_for를 이용하여 분리

<!-- JS 파일 분리하기 --> 
<script src="{{url_for('static', filename='includeHTML.js')}}"></script>

// js 파일
function includeHTML() { 
    //...
    a = document.getElementsByTagName("hi");
    //...
}