보통 html 문서 작성을 할 때 css, javascript 파일도 함께 작성하는 것이 흔하다.
위 파일들을 정적파일을 모아두는 폴더인 static에 저장해보자.
CSS 스타일 적용을 위한 html 코드
<head>
<meta charset="UTF-8">
<title>페이지 제목</title>
<link rel='stylesheet' href="{{ url_for('static', filename='css/style.css')}}">
</head>H1태그의 색상을 분홍색으로 지정하는 css 코드
h1{
color : pink;
}실행하면 다음과 같이 H1태그를 사용한 부분이 분홍색으로 표시된다.
이번에는 서버에서 클라이언트 쪽으로 데이터를 전송해보자.
app.py에서 render_template() 에 인수를 넣어 데이터를 전송할 수 있다.
def index():
return render_template('index.html', user="양갱", data={'interest':'CV,deeplearning','MBTI':'ESTJ' ,'blog':'whereisend.tistory.com'})Flask는 지난 글에서 확인한 에러에서 봤듯이, jinja2 템플릿 엔진을 사용한다.
변수는 {{변수명}}으로 가져올 수 있다.
딕셔너리는 {{변수명.key}}를 통해 value를 가져올 수 있다.
html에서는 다음과 같이 서버에서 전송한 데이터를 수신할 수 있다.
<body>
<h1>H1 태그 사용</h1>
이름 : {{user}}
관심사 : {{data.interest}}
MBTI : {{data.MBTI}}
블로그 : {{data.blog}}
</body>실행시켜서 주소로 접속해보면 다음 결과를 확인할 수 있다.
참고자료
https://wikidocs.net/book/4479
Uploaded by Notion2Tistory v1.1.0