[파이썬 스터디] Flask 서버로 올린 html 웹사이트에 css 적용하기

 

한창 사이트 구축 세팅을 하다가 localhost로 서버를 올리고 나니 css가 전혀 적용이 안되는 문제를 발견했어요.

이유는 flask 라이브러리는 디자인 관련된 css, js, img 파일들을 templates가 아닌 static이라는 폴더에 넣어야 하는데 그게 안되어 있었던 거죠.

 

수정 절차들을 기록해 봅니다!

 

 

1. flask local 서버 만들기

from flask import Flask
app = Flask(__name__)

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

if __name__ == '__main__':  
   app.run('0.0.0.0', port=5000, debug=True)

위에서 'port'에 입력하는 숫자는 로컬 사이트의 접속 주소를 의미합니다.

 

 

2. templates 폴더 만들고 html 파일 업로드하기

준비된 파일들을 전부 업로드 해주세요.

 

 

3. static 폴더 만들고 이미지 관련 폴더와 파일들 업로드하기

css, img, js 폴더들을 모두 업로드 해주세요.

 

 

4. html 파일에서 이미지 관련 경로들 전부 수정하기

[예시]
변경 전 소스 코드
<script src="./js/jquery.min.js"></script>

변경 후 소스 코드
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>

html 파일에서 이미지나 js를 참조하고 있다면 경로들을 전부 수정해주어야 합니다.

위 코드와 같이 대괄호 안에 있는 소스를 활용하면 되고, 'filename'의 경로를 수정해주면 돼요.

저는 수시로 파이썬 서버를 돌려보면서 에러가 나오는 부분이 있는지 체크하면서 수정했어요.

 

 

5. local 서버 접속해서 잘 나오는지 확인하기

경로 수정 작업이 완료되었다면 인터넷 주소창에 'localhost:5000'을 입력해서 잘 되었는지 확인해주면 됩니다!