Python Web Bootstrap

26531 단어 pythonFlaskvscodebootstrapFlask

메인 접속화면이 bi Hi~~!!! 만 출력되는 것은 너무 허전해서 index 페이지를 꾸며보려 합니다.

오랜만에 보는 main.py 파일입니다.

기존에 bi Hi~~!!! 를 출력했던 @app.route('/')부분에서 다른 루트와 마찬가지로 index.html 로 render_template 해주겠습니다.

index.html 은 Bootstrap 을 이용해서 꾸며줄겁니다.

Bootstrap

부트스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크입니다.
하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동합니다.
다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와줍니다.

Bootstrap CDN

부트스트랩의 CSS와 자바스크립트를 CDN으로 지원합니다.

합쳐지고 최소화된 최신 CSS
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
부가적인 테마
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
합쳐지고 최소화된 최신 자바스크립트
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

Bootstrap 공식 홈페이지에서 예제를 확인해 볼 수 있습니다.

이 외에도 다양한 예제가 구비되어 있습니다. 더 많은 예제는 홈페이지에서 확인해 주세요!

위 사진의 예제를 선택하여

F12 개발자 도구를 열어 HTML 코드를 가져옵니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Main</title>
    <script>
        function goto_page(target) {
            var target = window.location.href + target
            window.location.href = target
        }
    </script>
</head>
<body>
    <div class="container">
      <div class="card-deck mb-3 text-center">
        <div class="card mb-4 shadow-sm">
          <div class="card-header">
            <h4 class="my-0 font-weight-normal">Calculator</h4>
          </div>
          <div class="card-body">
            <button type="button" class="btn btn-info" onclick="goto_page('calc')">Go to Bi-Calculator</button>
          </div>
        </div>
        <div class="card mb-4 shadow-sm">
          <div class="card-header">
            <h4 class="my-0 font-weight-normal">Old-Lotto</h4>
          </div>
          <div class="card-body">
            <button type="button" class="btn btn-warning" onclick="goto_page('lotto')">Go to Bi-Lotto</button>
          </div>
        </div>
        <div class="card mb-4 shadow-sm">
          <div class="card-header">
            <h4 class="my-0 font-weight-normal">New-Lotto</h4>
          </div>
          <div class="card-body">
            <button type="button" class="btn btn-primary" onclick="goto_page('lotto2')">Go to Bi-Lotto</button>
          </div>
        </div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <style>
        .btn {
            width:100%;
            height: 50px;
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 100px;
        }
    </style>
</html>

불필요한 코드를 제거하고, 제가 사용할 부분만 남겨두고 활용하여 페이지를 꾸몄습니다.

<script>
        function goto_page(target) {
            var target = window.location.href + target
            window.location.href = target
        }
</script>

<script> 에 원하는 target으로 URL이 생성되고 호출하는 goto_page(target)` 함수를 만들어 주었습니다.

<button type="button" class="btn btn-info" onclick="goto_page('calc')">Go to Bi-Calculator</button>
<button type="button" class="btn btn-warning" onclick="goto_page('lotto')">Go to Bi-Lotto</button>
<button type="button" class="btn btn-primary" onclick="goto_page('lotto2')">Go to Bi-Lotto</button>

<body> 에 생성해준 button을 클릭할 때 goto_page(target) 함수를 호출합니다.

goto_page 함수로 인해코드를 반복하지 않고 target만 변경해 주어 간결하게 호출이가능합니다.

Bootstrap 외에도 W3, materializecss, D3.js, naver open source 등 참고할 수 있는 예제가 많이 있습니다.

[React] Node 서버와 React 연동하기
[JS] 자바스크립트 중급강좌 (feat. 코딩앙마) - 변수(var, let, const)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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