웹사이트에서는 CSS를 통해 웹페이지의 서식이나 디자인을 관리합니다. 파이썬 플라스크에서도 CSS를 이용해서 웹페이지를 작성하고 꾸밀 수 있습니다. 이를 위해 static file이라는 개념을 알아야 합니다. 파이썬 플라스크에서 CSS를 적용하는 방법을 알아보았습니다.
이전 포스팅에서 웹 개발 프레임워크인 플라스크에 대해서 알아보고, 간단한 문장을 웹페이지에 띄워 봤습니다. CSS는 Cascading Style Sheets의 약자로, 마크업 언어가 실제 표현되는 방법을 기술한 언어입니다.
1. CSS파일 다운로드 받기
CSS 파일은 직접 만들 수도 있지만, 이미 만들어진 것을 가져다 쓸 수도 있습니다. 여기서는 W3.CSS 파일을 사용해보겠습니다. W3.CSS파일은 w3schools.com에서 다운로드할 수 있습니다. 오픈 라이선스인데요. 혹은 bootstrap도 웹페이지 개발에 많이 사용하는 CSS입니다.
2. Jinja2 템플릿
CSS를 사용하기 위해서는 HTML을 렌더링해야 합니다. render는 '(어떤 상대가 되게) 만들다'는 뜻입니다. 뒤에 코드를 보면 알겠지만, 요청을 받은 후 html템플릿을 통해 응답이 나갑니다. 그리고 이 html템플릿을 우리가 직접 만들 수 있습니다.
Flask 튜토리얼에서는 HTML을 렌더링 하지 말고 Jinja2 템플릿을 사용하라고 합니다. Flask는 Jinja2 Template을 이용하기 때문인데요. Jinja2는 Django의 템플릿을 모델로 하여 만든 파이썬용 템플릿 언어라고 합니다. 코드를 보면 html과 유사합니다. block을 사용하고 html을 상속할 수도 있습니다. 하지만, 여기서는 테스트 목적으로 이해하기 쉬운 HTML을 우선 이용하겠습니다.
Jinja2 템플릿에 대해 더 자세한 내용이 궁금하다면, 아래 홈페이지를 참조해보세요.
( 참조: Jinja2 홈페이지 바로가기 )
3. Static File
Flask에 CSS를 적용하기 위해서는 static file에 대해서 알아야 합니다. static은 고정된, 정지 상태의 등의 뜻으로 여기서도 같은 뜻으로 봐야 할지는 모르겠습니다. 아마 HTML은 렌더링 되면서 내용이 바뀌는 반면에 CSS나 JavaScript는 파일 내용이 바뀌지 않기 때문에 static file이라고 하는 것은 아닐까 예상해봅니다.
static 파일에 대한 URL을 생성하기 위해서는 url_for 함수를 사용합니다. 직접 url을 입력해도 되지만, 그러면 url이 변경될 때마다 매번 주소를 변경해줘야 합니다. url_for는 해당 이름의 함수에 해당하는 주소를 return 해 줍니다. Flask Tutorial을 참조하여, 렌더링 할 HTML이 들어간 파일과 CSS가 들어가 파일의 폴더를 아래와 같이 정의하였습니다.
static과 templates라는 폴더를 만들고, static이라는 폴더 밑에는 CSS폴더를 만들었습니다.
Recommendation 포스팅
4. 코드 작성
우선 HTML 파일을 만듭니다. head에 link에 보면 href로 css파일을 지정하는 부분이 있습니다. url_for를 이용해서 filename을 입력하면, 주소가 자동으로 바인딩됩니다.
<!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>
파이썬 코드는 아래와 같습니다. 이전 포스팅의 코드와 home함수 부분을 수정했습니다. return에 render_template함수를 이용하여, 렌더링 할 html을 지정하였습니다. subject라는 파라미터에 값을 넣어, html 코드의 {{ subject }}라는 영역에 필자가 원하는 값을 출력할 수 있도록 하였습니다.
# 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()
5. 코드 실행
이제 코드를 실행해보겠습니다. 이전 포스팅에서도 다루었지만 코드는 터미널을 이용해서 아래와 같이 실행하면 됩니다.
export FLASK_APP=2_css_test.py
flask run
아래와 같이 지정한 CSS파일의 서식대로 잘 출력되는 것을 확인할 수 있습니다.
오늘은 이렇게 파이썬 플라스크에서 CSS를 이용하는 방법에 대해 알아보았습니다. 랜더링 할 HTML템플릿을 만들어 손쉽게 CSS를 적용할 수 있었습니다.
'파이썬 > 웹사이트 개발' 카테고리의 다른 글
| 파이썬 플라스크(flask) 내부 링크 만들기 - urlfor함수 사용하기! (0) | 2022.04.12 |
|---|---|
| 파이썬 플라스크 이미지 삽입, img 태그 사용하는 법은?! (0) | 2022.04.11 |
| 파이썬애니웨어(pythonanywhere) 웹페이지 폴더 경로 설정하는 방법은?! (0) | 2022.04.10 |
| 파이썬 플라스크 웹페이지 개발 쉽게 하는 방법은?! (0) | 2022.04.08 |
| 파이썬 장고(django) 설치 및 실행하는 방법은?! (0) | 2022.01.21 |
| 파이썬 장고(django) 프로젝트 파일 구조 알아보기! (0) | 2022.01.19 |
| 마이크로소프트 애저 가입 및 API KEY 발급하기 (3) | 2022.01.18 |
| 마이크로 소프트 애저(Azure) 장고를 위한 웹앱 서비스 만들기 (0) | 2021.12.29 |
