02. flask html, css, js 구조 만들고 적용하기

이번에는 flask에서 html, css, js를 적용해보자

​

우선 flask 프로젝트를 만들지 않았다면

01. vscode에서 python flask 시작하기

 

이 글을 참고해서 flask 프로젝트를 만들자!

​

​

​

---

01. flask html 렌더링

플라스크는 templates 폴더에서 템플릿을 찾는다

따라서 templates 폴더안에 html 을 넣어준다

그 후 render_template를 import 하고

특정 페이지를 렌더링 할 때에는 아래 코드를 사용한다

return render_template('페이지')

 

 

실행 후 login으로 접속하면 html 페이지가 뜬다!

​

만약 폴더 안에 있는 html을 렌더링 하고 싶다면

폴더 구조에 따라 렌더링 페이지를 적어주면 된다!

 

---

02. flask 정적파일

flask에서 정적파일(JS, CSS)를 사용하려면 static 폴더를 만들어야한다

static 파일의 이름만 같으면 되고 나머지는 상관 없다!

​

​

css 를 먼저 적용해보자

​

login.css

​

login.html

해당 코드를 login.html 에 적는다

<link href="{{ url_for('static', filename='css/login.css') }}" rel="stylesheet">

css가 적용된 것을 볼 수 있다

​

​

js 도 같은 방식으로 적용하면 된다

<script src="{{ url_for('static', filename='js/login.js') }}" > </script>

​