30분만에 간단한 정적 페이지 만들기

readbetweenthelines

Apr 4, 2017·8 min read

 

도메인 URL ‘/’ 으로 요청하면 home.html 을 보여주고 ‘/about’ 으로 요청하면 about.html 을 보여주는 간단한 페이지를 작성할 것입니다.

다음과 같은 개발 환경을 준비합니다.

• python3
• pip3
• PyCharm Editor

virtualenv 설치

virtualenv 는 시스템 독립적인 파이썬 개발환경을 만드는 도구입니다. virtualenv 로 프로젝트용 샌드박스를 생성하고 개발환경을 실행합니다.

> pip3 install virtualenv
> virtualenv flaskapp
> cd flaskapp
> source bin/activate

여기에 안전하게 Flask 를 설치합니다.

(flaskapp) > pip3 install flask

이제 에디터를 사용할 일이 많으므로 PyCharm 으로 위에서 생성한 flaskapp 디렉토리에 프로젝트를 생성합니다. app 디렉토리를 생성하고 하위 디렉토리와 파일을 다음과 같이 생성합니다.

브라우저 주소창에 도메인 URL을 타이핑하면, routes.py가 실행되고 Flask는 templates 디렉토리에서 템플릿을 찾고 HTML 페이지를 생성해 다시 브라우저로 보내는 방식으로 작동합니다.

Flask는 Jinja2 템플릿 엔진을 사용합니다. 템플릿으로 사용할 layout.html을 작성합니다.

> vi app/templates/layout.html
<!DOCTYPE html>
<html>
  <head>
    <title>Flask App</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
  </head>
  <body>
    <header>
      <div class="container">
        <h1 class="logo">Flask App</h1>
      </div>
    </header>
    <div class="container">
      {% block content %}
      {% endblock %}
    </div>
  </body>
</html>

layout.html 을 상속받아 사용할 home.html 을 작성합니다.

> vi app/templates/home.html
{% extends "layout.html" %}
{% block content %}
  <div class="jumbo">
    <h2>Hello Flask App<h2>
    <h4>'/' 요청 처리에 대한 페이지입니다.<h4>
  </div>
{% endblock %}

layout.html 의 ‘block content’ 와 ‘endblock’ 에 home.html 의 ‘block content’ 와 ‘endblock’ 의 내용으로 출력됩니다.

layout.html 에 css/main.css 파일을 링크했는데 css 파일도 작성합니다.

> vi static/css/main.css
body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #444;
}

header {
  background-color: #2B2B2B;
  height: 35px;
  width: 100%;
  opacity: .9;
  margin-bottom: 10px;
}

header h1.logo {
  margin: 0;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  float: left;
}

header h1.logo:hover {
  color: #fff;
  text-decoration: none;
}

.container {
  width: 940px;
  margin: 0 auto;
}

div.jumbo {
  padding: 10px 0 30px 0;
  background-color: #eeeeee;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}

h2 {
  font-size: 3em;
  margin-top: 40px;
  text-align: center;
  letter-spacing: -2px;
}

h3 {
  font-size: 1.7em;
  font-weight: 100;
  margin-top: 30px;
  text-align: center;
  letter-spacing: -1px;
  color: #999;
}

도메인 URL ‘/’ 에 대한 매핑은 routes.py 을 열어 home() 함수에 연결시킵니다.

> vi app/routes.py
from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def home():
    return render_template('home.html')

if __name__ == '__main__':
    app.run(debug=True)

app.run() 에서 서버를 구동합니다.

이제 서버를 실행하여 127.0.0.1:5000으로 접속하여 결과를 확인해보겠습니다.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

(flaskapp) > cd app
(flaskapp) > python routes.py

about.html 도 작성합니다.

> vi app/templates/about.html
{% extends "layout.html" %}
{% block content %}
  <h2>About</h2>
  <p>'/about' 요청 처리에 대한 페이지입니다.</p>
{% endblock %}

도메인 URL ‘/about’ 에 대한 매핑을 routes.py 에 추가합니다.

> vi app/routes.py
...
@app.route('/about')
def about():
    return render_template('about.html')
...

브라우저 주소창에 127.0.0.1:5000/about 으로 접속하면 추가한 페이지가 잘 보입니다. 서버를 를 다시 실행할 필요없이 브라우저에서 새로고침만 하면 됩니다.

이제 오른쪽 상단에 home, about 에 대한 네비게이션 링크를 추가합니다.

> vi app/templates/layout.html
...
<h1 class="logo">Flask App</h1>
<strong><nav>
  <ul class="menu">
    <li><a href="{{ url_for('home') }}">Home</a></li>
    <li><a href="{{ url_for('about') }}">About</a></li>
  </ul>
</nav></strong>
...

메뉴용 css 도 추가합니다.

> vi app/static/css/main.css
...
.menu {
  float: right;
  margin-top: 8px;
}

.menu li {
  display: inline;
}

.menu li + li {
  margin-left: 35px;
}

.menu li a {
  color: #999;
  text-decoration: none;
}

브라우저에서 새로고침(맥용 크롬에서는 Cmd+Shift+R)해서 추가한 메뉴를 확인합니다.

다음에는 RESTful 처리와 ORM 사용 방법을 살펴보겠습니다.

이제 산책하러 가야겠습니다.

참고

• https://code.tutsplus.com/ko/tutorials/an-introduction-to-pythons-flask-framework--net-28822

[출처] https://medium.com/@feedbotstar/python-flask-%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-41c7c6e97d08