CSS 이용하여 배경색깔 바꾸기
<기본 코드>
main.py
from flask import Flask, render_template
app= Flask(__name__)
@app.route("/")
def home():
return render_template("index.html")
if __name__ =="__main__":
app.run(debug=True)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Olivia</title>
</head>
<body>
<h1>올리비아입니다.</h1>
</body>
</html><실행화면>
여기에 배경색깔을 보라색으로 만드는 css 코드를 추가한다.
여기서 주의해야 할 점이 있다.
css파일은 정적파일이다.
따라서, 저장 위치를 static 폴더 안에 넣어야
flask의 규칙을 따를 수 있다.
style.css
body {
background-color: purple;
}index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Olivia</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>올리비아입니다.</h1>
</body>
</html><실행화면>
강력한 새로고침
이번에는 노란색깔로 배경색을 바꿔보자.
그런데 코드를 수정하여 실행해보아도 변경사항이 적용되지 않은 경우가 있다.
그 이유는,
크롬이 image, stylesheet와 같은 static files과 JavaScript를 캐시하기 때문이다.
캐시하는 까닭은 인터넷 속도의 효율성 때문이다.
만약 같은 날 같은 웹사이트를 방문해도 정적 파일은 바뀌지 않을 확률이 크다.
매번 방문할 때마다 대용량 파일을 굳이 계속해서 다운로드하지 않도록
브라우저는 해당 웹사이트의 정적 파일을 캐시하는 것이다.
캐시 된 파일을 모두 제거하고, 최근의 웹사이트의 화면을 보려면,
강력한 새로고침을 하면 된다.
shift + 새로고침 버튼
'웹개발 > Flask' 카테고리의 다른 글
| flask, Jinja 템플레이팅 언어, API 결합, title(), <>, 변수 (0) | 2022.11.17 |
|---|---|
| flask, Jinja, 진자, 템플레이팅 언어, templating language, {{ }}, 예제 (0) | 2022.11.17 |
| 플라스크를 활용한 웹개발, static file, 정적 파일, flask 이미지 파일 안보일 때, URL 주소 일괄 바꾸기 (0) | 2022.11.12 |
| 플라스크를 활용한 웹개발, rendering files, rendering template (0) | 2022.11.11 |
| flask 연습하기, 숫자 맞추기 (0) | 2022.11.11 |