Skip to content
This repository was archived by the owner on Nov 7, 2024. It is now read-only.

C.1. 템플릿 엔진 기초: 플러거블 HTML 레이아웃과 템플릿 렌더링

Jump to bottom
HOIWOONG JUNG edited this page Apr 1, 2021 · 26 revisions

플러거블 HTML 레이아웃과 템플릿 렌더링

소스버전

TODO

  • 불필요 소스제거
    • app.py
    • test.py
    • init.py 내부
  • index.html
    • render template
  • layout.html (extend)
  • head
    • super()
  • indent
  • 404 에러 핸들링

index.html

<!DOCTYPE html>
<!--
  Material Design Lite
  Copyright 2015 Google Inc. All rights reserved.
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
      https://www.apache.org/licenses/LICENSE-2.0
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License
-->

<!--학습용도로 제작된 HTML으로 상기 라이센스 명시가 필요하고, 무단 사용을 금합니다.-->

<html>
    <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1" />

    <!-------------------------------BLOCK TITLE----------------------------------->
    <!--TODO: 페이지별 타이틀 넣어주기-->
    <title>Kaap</title>
    <!-------------------------------//BLOCK TITLE----------------------------------->

    <!-------------------------------BLOCK HEAD----------------------------------->
    <!--TODO: 플러거블 만들기1-->
      <!--Google Icons-->
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined">
      <!--Google Font-->
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
      <!--MDL CSS-->
      <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.amber-orange.min.css"> 
      <!--MDL Dialog Polyfill CSS-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.0/dialog-polyfill.css">
      <!--Jquery CDN JS-->
      <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
      <!--MDL Dialog Polyfill JS-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.6/dialog-polyfill.min.js" integrity="sha512-qUIG93zKzcLBVD5RGRbx2PBmbVRu+tJIl+EPLTus0z8I1AMru9sQYdlf6cBacSzYmZVncB9rcc8rYBnazqgrxA==" crossorigin="anonymous"></script>
      <!--MDL JS-->
      <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    <!-------------------------------//BLOCK HEAD----------------------------------->
    </head>

    <body>
      <!-------------------------------BLOCK BODY----------------------------------->
      <!--TODO: 플러거블 만들기2-->
      <!-------------------------------//BLOCK BODY----------------------------------->
    </body>
</html>

레퍼런스

> 목차

Fastcampus 2021 ,by hidekuma

Clone this wiki locally