본문 바로가기
개인 프로젝트/LikeLion-kku

LikeLion_kku 강의 페이지(html,bootstarp,css)

by 왕큰새 2020. 7. 15.
728x90

나는 이두희씨가 만든 "멋쟁이 사자처럼"의 건국대학교(글로컬)의 동아리에 운영진으로 활동하고 있는데,

코로나 바이러스 때문에 항상 수업을 온라인으로 진행했었는데, 방학을 맞으면서 오프라인으로 활동을 하게 되어

좀더 본격적으로 활동을 활성화시키기 위해 강의 사이트를 만들어 보면 좋겠다. 라는 생각을 하게 되어 

이 강의 페이지를 만들게 되었다.

 

메인 화면

메인 페이지.. 별거 없다

오직 강의 정보를 올리기 위한 사이트를 만드는 것이 내 목적이였어서, 기능은 몇개 없지만

템플릿을 쓰지 않고 부트스트랩, python , html, css, django 를 이용해 만들고, aws elastic beanstalk 를 이용, 배포까지 한점에 있어서 매우 뿌듯했다.

 

메인 화면의 템플릿

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>LikeLion</title>


    {%load static%}
    <link rel="stylesheet" href="/static/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/static/css/thema.css">
    <link rel="stylesheet" href="/static/css/custom.css">


    </link>

</head>

<body class="block">
    <div class="flex-grow-1 d-flex flex-column">
        <div class="toggles">
            <div class="container-fluid fixed-top bg-custom check-contrast">
                <div class="row">
                    <div class="col-xl-9 col-lg-11 container-alt mx-auto">
                        <nav class="navbar navbar-expand-xl navbar-dark toggles-ignore text-light px-0 py-1"
                            id="topnav">
                            <a class="navbar-brand mr-2 mb-1" href="{%url 'home'%}"
                                title="Bootstrap theme builder"><span><b>Like</b>lion</span></a>
                            <div class="navbar-nav d-none d-xl-block">
                                <a class="nav-link pl-0 mr-1" href="{%url 'home'%}" rel="nofollow">
                                    for kku
                                </a>
                            </div>
                            <button class="navbar-toggler" type="button" data-toggle="collapse"
                                data-target=".navbar-dual">
                                <span class="navbar-toggler-icon"></span>
                            </button>
                            <div class="collapse navbar-collapse navbar-dual">
                                <div class="navbar-nav small text-uppercase ml-auto">
                                    <a class="nav-link" href="{%url 'home'%}">
                                        Lecture
                                    </a>
                                    <a class="nav-link font-weight-bold" href="#" data-toggle="modal">
                                        About
                                    </a>
                                </div>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>

        </div>


        {% block content %}
        {%endblock%}
    </div>


    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <!-- Bootstrap Js CDN -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</body>

</html>

 

메인 화면은 html은 이런식으로 구성되어 있고, 반응형을 위해 boostrap grid를 이용..했으나..

스마트폰으로 보면 내가 원하는대로 화면이 구성되지 않았다..

bootstrap이 참 쓰기는 쉬운데 잘 쓰기는 어려운 것 같다.

중간중간 보이는 { % % } 이런 것들은 django 문법을 쓴 것인데, 

 

django url 

"{%url 'home'%}"

이것의 의미는 내가 작성한 urls.py 에 path를 지정해놓았는데, name을 home 이라고 지은 path로 링크를 누르면

이동하라는 의미 이다.

 

 

django block content

{%block content%} 
{%endblock%}

이 부분은 내가 다른 곳에서 이 main화면을 구성하는 html , 내가 만든 main template 이라고 볼수도 있겠다. 

이것을 다른 html에 끌어와 사용할 수 있는데, django를 사용하며 이 부분이 참 편리하다고 느꼇다.

 

django extends , 메인 화면의 실질적 html 코드

  {% extends 'base.html' %}

  {% block content %}

  <div class="block">
      <div class="container-fluid bg-custom">
          <div class="row">

          </div>
      </div>
  </div>
  <br><br>

  <div class="container">
      <div class="row">
          <div class="col-sm">
              <div class="card" style="width: 15rem;">
                  <img src="/static/images/bootstrap.PNG" class="card-img-top" alt="...">
                  <div class="card-body">
                      <h5 class="card-title">BootStrap</h5>
                      <p class="card-text"></p>
                      <a href="{%url 'bootstrap'%}" class=" btn btn-custom">GO !</a>
                  </div>
              </div>
          </div>
          <div class="col-sm">
              <div class="card" style="width: 15rem;">
                  <img src="/static/images/git.png" class="card-img-top" alt="...">
                  <div class="card-body">
                      <h5 class="card-title">Git</h5>
                      <p class="card-text"></p>
                      <a href="{%url 'git_home'%}" class="btn btn-custom">GO !</a>
                  </div>
              </div>
          </div>
          <div class="col-sm">
              <div class="card" style="width: 15rem;">
                  <img src="/static/images/django.png" class="card-img-top" alt="...">
                  <div class="card-body">
                      <h5 class="card-title">Django</h5>
                      <p class="card-text"></p>
                      <a href="{%url 'django_home'%}" class="btn btn-custom">GO !</a>
                  </div>
              </div>
          </div>
      </div>

      <br>

      <div class="row">
          <div class="col-sm">
              <div class="card" style="width: 15rem;">
                  <img src="/static/images/python.jpg" class="card-img-top" alt="...">
                  <div class="card-body">
                      <h5 class="card-title">PYTHON</h5>
                      <p class="card-text"></p>
                      <a href="{%url 'python_home'%}" class="btn btn-custom">GO !</a>
                  </div>
              </div>
          </div>

          <div class="col-sm">
              <div class="card" style="width: 15rem;">
                  <img src="/static/images/question.png" class="card-img-top" alt="...">
                  <div class="card-body">
                      <h5 class="card-title">Next Lecture</h5>
                      <p class="card-text"></p>
                      <a href="{%url 'notyet'%}" class="btn btn-custom">GO !</a>
                  </div>
              </div>
          </div>
          <div class="col-sm">
              <div class="card" style="width: 15rem;">
                  <img src="/static/images/question.png" class="card-img-top" alt="...">
                  <div class="card-body">
                      <h5 class="card-title">Next Lecture</h5>
                      <p class="card-text"></p>
                      <a href="{%url 'notyet'%}" class="btn btn-custom">GO !</a>
                  </div>
              </div>
          </div>
      </div>
  </div>
  {% endblock %}

이런식으로 navbar만 상속하고, 다른 것들은 내가 다른 html에서 작성하고 싶은 내용만 작성하는 것이다.

말 그대로 템플릿 상속을 하는 것이다.

 

강의 화면

강의 화면

이런식으로 구성이 되어있다. 뭐.. 별거 없다.. 그냥 강의 별 이론 및 실습을 할 수 있는 것들을 모아 놓은 사이트이다.

네브바는 메인 화면의 navbar와 다르게 강의목차 드롭다운 메뉴가 필요해서 

따로 강의 별마다 base templates를 만들었는데.. 뭔가 다른 좋은 방법이 있을 것 같다.  다른 페이지를 구성할 때에는

좀 더 공부해서 깔끔한 코드를 짜야 겠다.

 

bootstrap 강의 화면의 template

 <div class="dropdown">
                                <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    BOOTSTRAP
                                </button>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <a class="dropdown-item" href="{%url 'bootstrap'%}">개요</a>
                                    <a class="dropdown-item" href="{%url 'ui'%}">UI 컴포넌트</a>
                                    <a class="dropdown-item" href="{%url 'use_ui'%}">UI 컴포넌트 사용법</a>
                                    <a class="dropdown-item" href="{%url 'make_navbar'%}">NavBar 실습</a>
                                    <a class="dropdown-item" href="{%url 'breakpoint'%}">브레이크 포인트</a>
                                    <a class="dropdown-item" href="{%url 'dark_light'%}">밝은 / 어두운 테마</a>
                                    <a class="dropdown-item" href="{%url 'grid'%}">Bootstrap Grid</a>
                                    <a class="dropdown-item" href="{%url 'row_col'%}">행과 열</a>
                                    <a class="dropdown-item" href="{%url 'flex_desine'%}">반응형 디자인</a>
                                    <a class="dropdown-item" href="{%url 'bootstrap_custom'%}">Bootstrap Customizing</a>

                                </div>
                            </div>

메인 화면의 템플릿에서 각 강의별 목차가 달라서 이런 것들만 추가해 base 템플릿을 만들었다.

 

bootstrap 강의 화면을 extends,block content 를 이용해 구성한 html 코드

  {% extends 'Gaeyo_base.html' %}

{% block content %}

 
            
                        <h1 class="card-title">Bootstrap</h5>
                            <pre-line class="card-text">세계에서 가장 인기있는 프론트 라이브러리,
                                CSS와 자바스크립트 파일들로 이루어져있다. 웹 규격을 위한 프레임워크. 웹개발을 더 편하고, 빠르게 진행할 수 있도록 도와준다. 안정적이고, 반응형 웹
                                지원, 편리한 장점
                                부트스트랩은 설치를 하는 개념이 아닌, css와 자바스크립트를 통해 – 소스를 끌어와 사용하는 것
                                CDN 기반으로 부트스트랩을 어떻게 사용할 수 있는지만 알면 충분하다. HTML 헤드 태그 안에 부트스트랩 CSS만 추가해주면 된다.
                                이후에 추가적으로 부트스트랩 자바스크립트를 전체 바디 태그가 닫히기 전. 스크립트 태그 내에 감싸 넣어준다. 부트스트랩 4의 경우 jquery와
                                popper.js를 필요로 하므로 이 부분도 잊지않고 세팅해준다.<br><br>
                                CSS
                                <img src="/static/images/css.png">
                                <br><br>
                                jquery
                                <img src="/static/images/jqurey.png">
                                <br><br>
                                부트스트랩의 CSS를 사용하는 방법.<br>
                                1) UI 요소 스타일 : 버튼,폰트,색상,뱃지,타이포,진행바<br>
                                2) 부트스트랩 그리드 : 행과 열, 레이아웃을 잡는데 도움을 주는 기능<br>
                                부트스트랩의 CSS
                                규격 초기화(Reboot)<br>
                                부트스트랩의 CSS는 웹페이지의 스타일을 초기화 시킨다. 브라우저들마다 각자 다른 기본 스타일을 갖고 있는데, 이 스타일들을 초기화해서, 크로스브라우징 문제를
                                해결하는 것!
                                폰트(Font)
                                웹디자인에 있어서 텍스트의 가독성과 크기비례만큼 중요한 것도 없다. 그렇기에 부트스트랩에서는 자체적인 폰트 규격을 부트스트랩 4로부터 가져와 사용하게 된다.

                            </pre-line>

    
{% endblock %}

아까 설명했듯이, blockcontent 안의 내용만 적어 각각의 html을 작성했다.

 

 

화면들을 구성하면서 아쉬웠던 점은, bootstrap grid를 제대로 사용하지 못해, 반응형 디자인을 하지못해서 

디자인을 조금 변경했다는 점이 아쉬웠다..

 

 

'개인 프로젝트 > LikeLion-kku' 카테고리의 다른 글

한도 초과....  (0) 2020.07.20
LikeLion_kku (Django)  (0) 2020.07.15

관련글

티스토리툴바