Day 056

30766 단어 udemypythonFlaskhtmlFlask

Udemy Python Bootcamp Day 056

Rendering HTML/Static files

Rendering HTML Files with Flask

To render an HTML file as a template, The first thing is that remember that Flask is a framework and not a library. So it will put certain restrictions and requirements on your code so that it will actually work.
And in this case, which is known as our templates, must be inside a folder called templates. That's where Flask is gonna look for it when we try to render it.

server.py

from flask import Flask, render_template

app = Flask(__name__)


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


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

awesome.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Awesome's Personal Site</title>
  </head>
  <body>
    <table cellspacing="20">
      <tbody><tr>
        <td><img src="awesome.png" alt="awesome picture"></td>
        <td><h1>Awesome Kim</h1>
        <p><em>Web Developer in <strong><a href="https://en.wikipedia.org/wiki/South_Korea">South Korea</a></strong>.</em></p>
        <p>I am studying Computer Science and want to be a developer.</p></td>
      </tr>
    </tbody></table>
          <hr>
    <h3>Work Experience</h3>
    <table cellspacing="10">
      <thead>
        <tr>
          <th>Dates</th>
          <th>Work</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>2018-2021</td>
          <td>Credit Union in Korea</td>
        </tr>
        <tr>
          <td>2017-2018</td>
          <td>Starbucks in UK</td>
        </tr>
      </tbody>
      <tfoot>

      </tfoot>

    </table>
    <hr>
    <h3>Skills</h3>
      <table cellspacing="10">
        <tr>
          <td>Python</td>
          <td>★★★</td>
        </tr>
        <tr>
          <td>HTML</td><td>★</td>
        </tr>
        <tr>
          <td>Make Coffee</td>
          <td>★★★★★</td>
        </tr>
        <tr>
          <td>Make Beverage</td>
          <td>★★★★★</td>
        </tr>
      </table>
  </body>
</html>



Serving Static Files using Flask

Our templates have to be inside a folder called templates, Flask will look for all your static files likw your images or your CSS files inside a folder called static.

When you create a FLask Application, you'll need to create it with the templates forder and the static folder. And you put all your static files your CSS files or your videos inside that folder and your file path is relative to that folder.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Awesome</title>
    <link rel="stylesheet" href="static/styles.css">
</head>
<body>
    <h1>I'm Awesome</h1>
</body>
</html>

styles.css

body {
    background-color: plum
}



How to Use Website Templates to Speed Up Web Development

...
    <link rel="stylesheet" href="static/css/styles.css">
    <link rel="icon" href="static/favicon.ico">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fredoka&family=Hubballi&family=Indie+Flower&family=Sacramento&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class="top-container">
      <img class="top-tulip" src="static/images/tulip2.png" alt="tulip-img">
      <h1>I'm Awesome.</h1>
      <h2>a web developer</h2>
      <img class="bottom-tulip" src="static/images/tulip.png" alt="tulip-img">
    </div>
    <div class="middle-container">
      <div class="profile">
        <img class="my-image" src="static/images/awesome.png" alt="me">
...

Using Website Templates

https://html5up.net/
위 사이트에서 templates 다운로드 해서 수정하여 아래와 같이 포트폴리오 만들면 좋음 :)

수정할때는 Chrome console창에 document.body.contentEditable=true와 같이 적고 페이지에서 수정한 다음 저장해서 python프로젝트 파일안으로 삽입하면 됨.
(근데 아래 프로젝트를 위와 같은 방법으로 하려고 하니까 뭔가 잘 안됐음.. 그래서 그냥 pycharm에서 수정함..)

Final Project - Name Card Website Template

스트림을 하나의 데이터로 바꾸는 연산자
[백준] 4256번 - 트리 Python, Java

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage