Flask 7 : 정적 파일

원문 : https://flask.palletsprojects.com/en/1.1.x/tutorial/static/

---

Static Files : 정적 파일

이제 사용자 인증 기능은 뷰와 템플릿이 결합되어 정상 작동됩니다. 하지만 아직 일반 웹사이트처럼 예쁘게 보이지는 않습니다. HTML로 되어있는 템플릿에 CSS 라고 불리우는 스타일 시트를 추가해보겠습니다. 스타일 시트는 수시로 변하지 않고, 개발자가 따로 손대지 않는 이상 변하지 않아 정적 파일이라고 부릅니다.

Flask는 자동으로 static 이라는 디렉토리를 생성하고 그 안에 정적 파일들을 저장하여 템플릿과 연동시킵니다. 앞서 작성한 base.html 템플릿에 이미 style.css와의 연동 부분이 포함되어 있습니다:

{{ url_for('static', filename='style.css') }}

정적 파일에는 CSS 파일 이외에도 이미지나 JavaScript 파일 등이 포함됩니다. 정적 파일들은 모두 flaskr/static 디렉토리 내에 저장되어 url_for('static', filename='...') 처럼 불러오게 됩니다.

이 강좌에서는 CSS 작성법은 다루지 않습니다. 

flaskr/static/style.css

html { font-family: sans-serif; background: #eee; padding: 1rem; }

body { max-width: 960px; margin: 0 auto; background: white; }

h1 { font-family: serif; color: #377ba8; margin: 1rem 0; }

a { color: #377ba8; }

hr { border: none; border-top: 1px solid lightgray; }

nav { background: lightgray; display: flex; align-items: center; padding: 0 0.5rem; }

nav h1 { flex: auto; margin: 0; }

nav h1 a { text-decoration: none; padding: 0.25rem 0.5rem; }

nav ul  { display: flex; list-style: none; margin: 0; padding: 0; }

nav ul li a, nav ul li span, header .action { display: block; padding: 0.5rem; }

.content { padding: 0 1rem 1rem; }

.content > header { border-bottom: 1px solid lightgray; display: flex; align-items: flex-end; }

.content > header h1 { flex: auto; margin: 1rem 0 0.25rem 0; }

.flash { margin: 1em 0; padding: 1em; background: #cae6f6; border: 1px solid #377ba8; }

.post > header { display: flex; align-items: flex-end; font-size: 0.85em; }

.post > header > div:first-of-type { flex: auto; }

.post > header h1 { font-size: 1.5em; margin-bottom: 0; }

.post .about { color: slategray; font-style: italic; }

.post .body { white-space: pre-line; }

.content:last-child { margin-bottom: 0; }

.content form { margin: 1em 0; display: flex; flex-direction: column; }

.content label { font-weight: bold; margin-bottom: 0.5em; }

.content input, .content textarea { margin-bottom: 1em; }

.content textarea { min-height: 12em; resize: vertical; }

input.danger { color: #cc2f2e; }

input[type=submit] { align-self: start; min-width: 10em; }

다른 간단한 style.css 는 예제 코드를 참고하세요.

이제 http://127.0.0.1:5000/auth/login 로 접속해서 화면이 어떻게 변했는지 확인해보세요.

다음 : Blog Blueprint.