Flask 이용한 웹사이트 제작기 (6) - static file 추가

2023.07.21 - [Flask] - Flask 이용한 웹사이트 제작기 (5) - 기본 template 구현

Flask 이용한 웹사이트 제작기 (5) - 기본 template 구현

 

 

전 단계에서 기본적인 계정 시스템과, 그것을 이용할 수 있는 뷰를 만들었다. 다만 보기에 너무 심심해 보이니 css파일을 추가하고, 그것을 바탕으로 blog view까지 한 번 추가해 보자.

 

 

---

- static files

 

 

먼저, 이전에 우리가 추가했던 base.html에 보면 css파일 경로를 이미 추가해 뒀었다.

 

 

이렇게.

static 폴더를 만들고, 거기에 style.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; }

 

그 후 flask를 다시 실행시킨 후, 

http://127.0.0.1:5000/auth/login

로 접속하면

 

 

오... 그래...

완전히 없는 것 보다는 나은, 뭔가 ui가 있구나~ 라는 생각이 들 만한 view가 뜬다.

 

 

그리고 끝!

이 부분은 이전 글에 같이 넣을걸 그랬다... 엄청나게 짧구만..

 

 

 

 

2023.07.23 - [Flask] - Flask 이용한 웹사이트 제작기 (7) - blog blueprint 추가

Flask 이용한 웹사이트 제작기 (7) - blog blueprint 추가