jc.jang

부트스트랩 본문

카테고리 없음

부트스트랩

jangstory 2018. 6. 20. 00:20

디자이너 없이 보기 괜찮은 웹 사이트를 만들어보자.


친절하게도, 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크인 부트스트랩(링크)이란 것이 있다.


부트스트랩을 3.3.7 버전을 여기 링크에서 다운받고 압축을 풀어줍시다.


그리고 이제 Django 폴더에 필요한 파일들을 복사 붙여넣기 해줍시다.


이쯤에서 정리해보는 폴더 구조


윈도우 cmd 창에서 Django 폴더가 있는 곳으로 접근해서 폴더의 구조를 봅시다.


cd 명령어를 통해 장고 프로젝트를 만든 최상위 폴더까지 가고


tree /F 명령어를 통해 해당폴더의 하위에 어떤 파일, 폴더가 있는지 확인해봅시다.


저는 다음과 같이 나왔네요


└─src
    │  db.sqlite3
    │  manage.py
    │
    ├─blog
    │  │  admin.py
    │  │  apps.py
    │  │  models.py
    │  │  tests.py
    │  │  urls.py
    │  │  views.py
    │  │  __init__.py
    │  │
    │  ├─migrations
    │  │  │  0001_initial.py
    │  │  │  __init__.py
    │  │  │
    │  │  └─__pycache__
    │  │          0001_initial.cpython-36.pyc
    │  │          __init__.cpython-36.pyc
    │  │
    │  └─__pycache__
    │          admin.cpython-36.pyc
    │          models.cpython-36.pyc
    │          urls.cpython-36.pyc
    │          views.cpython-36.pyc
    │          __init__.cpython-36.pyc
    │
    ├─sample
    │  │  settings.py
    │  │  urls.py
    │  │  wsgi.py
    │  │  __init__.py
    │  │
    │  └─__pycache__
    │          settings.cpython-36.pyc
    │          urls.cpython-36.pyc
    │          wsgi.cpython-36.pyc
    │          __init__.cpython-36.pyc
    │
    ├─static
    │  ├─css
    │  │  │  base.css
    │  │  │
    │  │  └─lib
    │  │          bootstrap.css
    │  │          bootstrap.min.css
    │  │
    │  └─js
    │      └─lib
    │              bootstrap.js
    │              bootstrap.min.js
    │
    └─templates
            base.html
            index.html


처음에 sample 이란 이름으로 프로젝트를 생성하면 sample 폴더가 생기고 그 밑에 여러 파일들이 생깁니다. 근데 sample안에 sample이 있으니 최상위 폴더 sample을 src로 이름을 바꿨습니다. 


blog 폴더는 처음으로 만든 앱이고


migrations은 모델을 관리하는 정보가 담긴 폴더입니다


sample폴더는 처음에 생긴 폴더인데 여기에 settings.py와 urls.py 많은 설정들을 해줬습니다.


static은 css, js등을 저장하는 용도이고요


templates는 MTV 패턴에서 T에 해당하는 사용자에게 보여지는 html 부분입니다.


이제 bootstrap의 css, js를 사용하기 위해 설정해봅시다. 


├─static
    │  ├─css
    │  │  │  base.css
    │  │  │
    │  │  └─lib
    │  │          bootstrap.css
    │  │          bootstrap.min.css
    │  │
    │  └─js
    │      └─lib
    │              bootstrap.js
    │              bootstrap.min.js


다운받은 파일을 압축해제 해주시고 static폴더밑에 css폴더를 생성해주고


css 폴더 밑에 lib 폴더를 생성해줍니다.


그리고 lib 폴더에 bootstrap.css, bootstrap.min.css 파일을 넣어줍니다.


js 폴더도 마찬가지로 해줍니다.




*.css VS *.min.css


파일을 열어보면 *.css는 보기 편하게 되어있고


*.min.css는 한줄로 되어있는 것을 알 수 있다.


이는 웹사이트에서 css를 사용할 때 더 빨리 읽어오기 위해 한줄로 저장해놓은 것이다. 줄바꿈도, 공백도 없다 한줄로 쭉


이게 웹 사이트에서 css파일 적용하는데에 얼마나 성능 향상을 미칠지 궁금하군요


그리고 이제 링크의 Basic template처럼 html코드에 css, js파일을 사용하겠다고 적어줍시다.


base.html 파일입니다.

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=11; IE=10; IE=8; IE=7; IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>{% block title %}sample{% endblock %}</title>
    <!-- <title /> -->
    <link rel="stylesheet" href='{% static "css/base.css" %}'>
    <link rel="stylesheet" href='{% static "css/lib/bootstrap.css" %}'>
</head>
<body>
    {% block body %}{% endblock %}
    <script src='{% static "js/lib/bootstap.js" %}'></script>
</body>
</html>


base.html파일에 이렇게 적어주고


우리는 index.html 파일을 다시 보면


{% extends "base.html" %}
{% block body %}
<div style="color:red; font-size:2em;">hello world, {{ myname }} </div>
<div style="color:#123456;">hello world, Joe </div>
<div style="color:blue;">hello world, Tom </div>
{% endblock %}


맨 윗줄에 {% extends "base.html" %}


를 통해 index.html 파일이 base.html파일을 상속받는 것을 알 수 있다.


솔직히 상속이 맞는 표현인지 모르겠다. 처음에 html 배웠을 때는 상속이란게 html에도 있는지 모르겠다 이거 질문해봐야겠네 아무튼 저런 허접한 div style을 주지말고 base.html에서 bootstrap의 css, js를 사용하겠다고 선언해놨으니 이제 이쁘게 만들어보면된다.


이쁘게 만드는 예제는 여기에 있다. 여기서 css, js등에 들어가서 해보고 싶은대로 해보시면 됩니다.



저작자표시
'전체' Related Articles more
Comments