파이썬 플라스크(flask)에서 CSS 사용하기!

2019. 4. 19. 06:30

이전 포스팅에서 웹개발 프레임워크인 플라스크에 대해서 알아보고, 간단한 문장을 웹페이지에 띄워보았다. 하지만 실제 웹페이지에서는 CSS를 통해 서식이나 디자인을 관리한다. CSS는 Cascading Style Sheets의 약자로, 마크업 언어가 실제 표현되는 방법을 기술한 언어라고 한다.

오늘은 파이썬 플라스크에서 CSS를 사용하는 방법에 대해서 알아보고자 한다.


플라스크_CSS



CSS 파일은 직접 만들 수도 있지만, 이미 만들어진 것을 가져다 쓸 수도 있다. 여기서는 W3.CSS 파일을 사용해보도록 하겠다. W3.CSS파일은 아래주소에서 다운 받을 수 있고, 오픈 라이센스이다.


무료_CSS_다운

( W3.CSS 다운받으러 가기 )


CSS를 사용하기 위해서는 HTML을 렌더링해야 한다. render는 '(어떤 상대가 되게) 만들다'는 뜻이다. 뒤에 코드를 보면 알겠지만, 요청을 받은 후 html템플릿을 통해 응답이 나간다. 그리고 이 html템플릿을 우리가 직접 만들 수 있다.

Flask 튜토리얼에서는 HTML을 렌더링하지 말고 Jinja2 템플릿을 사용하라고 한다. Flask는 Jinja2 Template을 이용하기 때문이다. Jinja2는 Django의 템플릿을 모델로하여 만든 파이썬용 템플릿 언어라고 한다. 코드를 보면 html과 유사하다. block을 사용하고 html을 상속할 수도 있다. 하지만, 여기서는 테스트 목적으로 이해하기 쉬운 HTML을 우선 사용하도록 하겠다.


진자2_템플릿

( Jinja2 템플릿 언어 예시 )


Jinja2 템플릿에 대해 더 자세한 내용이 궁금하다면, 아래 홈페이지를 참조하도록 하자.
( 참조: Jinja2 홈페이지 바로가기 


Flask에 CSS를 적용하기 위해서는 static file에 대해서 알아야 한다. static은 고정된, 정지 상태의 등의 뜻으로 여기서도 같은 뜻으로 봐야 할 지는 모르겠다. 아마 HTML은 렌더링 되면서 내용이 바뀌는 반면에 CSS나 JavaScript는 파일 내용이 바뀌지 않기 때문에 static file이라고 하는 것은 아닐까 예상해본다.

static 파일에 대한 URL을 생성하기 위해서는 url_for 함수를 사용한다. 직접 url을 입력해도 되지만, 그러면 url이 변경될 때마다 매번 주소를 변경해줘야 한다. url_for는 해당 이름의 함수에 해당하는 주소를 return 해준다.


Flask Tutorial을 참조하여, 렌더링할 HTML이 들어간 파일과 CSS가 들어가 파일의 폴더를 아래와 같이 정의하였다.


플라스크_폴더구조

( Flask 폴더구조 )


static과 templates라는 폴더를 만들고, static이라는 폴더 밑에는 CSS폴더를 하나 더 만들었다.


실제 코드는 어렵지 않다. 우선 HTML파일을 만들어야 한다.

1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html>
<html>
  <head>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/w3.css') }}">
  </head>
  <body>
  <div class="w3-container w3-center">
    <h2>{{ subject }}</h2>
  </div>
  </body>
</html>
 
cs


head에 link에 보면 href로 css파일을 지정하는 부분이 있다. url_for를 이용해서 filename을 입력하면, 주소가 자동으로 바인딩된다.


파이썬 코드는 아래와 같다. 이전 포스팅의 코드와 home함수 부분이 수정되었다. return에 render_template함수를 이용하여, 렌더링할 html을 지정하였다. subject라는 파라미터에 값을 넣어, html코드의 {{ subject }}라는 영역에 필자가 원하는 값을 출력할 수 있도록 하였다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# coding = utf-8
 
from flask import Flask, render_template
 
 
app = Flask(__name__)
 
@app.route("/")
def home():
    return render_template('home.html', subject="안녕하세요. 반갑습니다.")
 
if __name__ == "__main__":
    app.run()
 
cs


이제 코드를 실행해보자. 이전 포스팅에서도 다루었지만 코드는 터미널을 이용해서 아래와 같이 실행하면 된다.

> export FLASK_APP=2_css_test.py

> flask run


아래와 같이 지정한 CSS파일의 서식대로 잘 출력되는 것을 확인할 수 있다.

플라스크_출력결과

( 플라스크 실행 결과 )



오늘은 이렇게 파이썬 플라스크에서 CSS를 이용하는 방법에 대해 알아보았다. 랜더링할 HTML템플릿을 만들어 손쉽게 CSS를 적용할 수 있었다. 


플라스크가 동작하는 구조에 대해 알고 싶다면, 아래 포스팅을 참조해보자.
( 참조: 파이썬 웹개발 플라스크로 쉽게 하기 )

오픈API를 사용하면 다양한 재미있는 일들을 해 볼 수 있다. 파이썬을 활용한 오픈API 사용이 궁금하다면 아래 글을 참조해보자.
(참조: 오픈API를 활용한 사례는 어떤 것들이 있을까?)


댓글()