[웹개발] - Jinja2 사용방법 (Feat. Python Flask)

[웹개발] - Jinja2 사용방법 (Feat. Python Flask)

---

■ app.py 코드 구현

@app.route('/', methods=["GET"])
def function_name():
    give_data = "String"
    return render_template("index.html",use_jinja=give_data)

 

함수 안에 'give_data'라는 변수를 생성한 다음, 데이터를 넣어준 다음, render_template를 이용하여, 'index.html'을 불러오는것과 동시에, 'use_jinja'에 'give_data'값을 넣어 'index.html'에서 사용할 수 있도록 만들어줍니다.

■ index.html 코드 구현

<p>{{ use_jinja }}</p>

서버에서 받은 값을 HTML에 보여주기 위해서는 '{{ }}' 중괄호 두개를 작성한 다음, 서버에서 지정한 변수값을 작성해주시면 됩니다. 위에서는 'use_jinja'라고 작성을 했기 때문에, '{{ use_jinja }}'로 작성을 하였습니다. 그리고 서버를 올려서 브라우져에서 확인을 하면 'String'단어가 보입니다. 

■ CSS, JS에서도 사용이 가능합니다. - 인라인에서만 가능

# app.py 코드
@app.route('/', methods=["GET"])
def function_name():
    give_data = 100
    return render_template("index.html",use_jinja=give_data)

<!-- HTML 내부 CSS 코드 -->
#jinja {
    background-color: black;
    width: {{ use_jinja }}px;
    height: {{ use_jinja }}px;
}

HTML안에 작성된 CSS, JS에서도 사용이 가능합니다. Jinja기능을 잘 활용하면, 좀 더 쉽게 HTML내부를 컨트롤 할 수 있을듯 합니다.