2019. 3. 6. 17:57ㆍDjango 파헤치기
[Django 파헤치기] Bootstrap Template 활용하기
※ 저도 공부하면서 업로드 하고 있습니다. 혹시 부족한 부분이 있으면 댓글로 가르쳐주시면 감사하겠습니다!
혹시 질문이 있으셔서 댓글에 남겨주신다면 성실히 답변하겠습니다.
디자인 능력이 없어도 괜찮은 모양을 만들 수 있습니다!
정보의 바다에는 항상 오픈된 소스들이 어마무시하게 많으니까요.
오늘은 무료 Bootstrap Template를 활용해서 제 포트폴리오 메인 화면을 만들어보겠습니다.
아래 링크로 들어가 보시면 무료버젼의 템플릿들을 사용하실 수 있습니다.(아래 사이트 말고도 많이 있습니다!
무료 버젼도 있고 유료 버젼도 있습니다~~
여러 템플릿 중에서 제 맘에 든 템플릿으로 시작하겠습니당
클릭해서 들어가면 Preview를 통해 페이지가 어떻게 구성되어 있는지 상세하게 볼수도 있습니다.
다운로드를 받겠습니다.
다운로드를 받으면 압축파일이 다운되고 압출을 풀어보면 다음과 같은 디렉토리 구조가 보입니다.
myportfolio.html과 vendor, js, img, css가 우리에게 필요한 파일들입니다! (myportfolio.html은 원래 index.html이였는데 제가 다시 명명한 상태입니다.)
이제 myportfolio.html을 장고 프로젝트 내에 옮기고 view.py를 통해 원하는 주소에서 myportfolio.html을 불러주면 다음과 같은 모습을 볼 수 있어요.
현재는 CSS가 아무것도 적용되지 않고 html 파일에 코딩 된 내용만 볼 수 있습니다.
그 이유는 현재 우리는 html파일만 프로젝트 디렉토리에 옮겨 놓았기때문이죠ㅎㅎ;
자 이제 html을 한번 들여다 볼까요?
<head> 부분을 보면 이 html파일은 Font Awesome Icons, Google Fonts, Plugin CSS, Theme CSS 를 어디선가 불러오려고 하고 있습니다.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Creative - Start Bootstrap Theme</title>
<!-- Font Awesome Icons -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet">
<!-- Theme CSS - Includes Bootstrap -->
<link href="css/creative.min.css" rel="stylesheet">
</head>
(html 밑에 부분)
여기서도 Bootstrap core JavaScript, Plugin JavaScript, Custom scripts for this template를 어디선가 불러오려고 하고 있군요
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/creative.min.js"></script>
중간 중간에 img파일도 불러오려고 하고 있습니다.
<section id="portfolio">
<div class="container-fluid p-0">
<div class="row no-gutters">
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="img/portfolio/fullsize/1.jpg">
<img class="img-fluid" src="img/portfolio/thumbnails/1.jpg" alt="">
이렇게 코딩 된 경로에 맞춰서 필요한 파일들을 옮겨주면 CSS가 적용된 Template를 볼 수 있습니다.
하지만 우리 static를 활용해서 적용해 봅시다.
static 이란 ?
static을 설명하고자 하면 media도 같이 설명 될 수 밖에 없는데요.
이 부분은 다음 추후에 포스팅 하도록 하겠습니다.
우선 다음과 같은 디렉토리 구조로 아까 옮기지 않았던 디렉토리들을 옮깁시다.
(앱 폴더 밑에 static디렉토리를 만들고, 앱 디렉토리와 같은 이름의 디렉토리를 하위 구조로 만듭니다. 그리고 그 하위에 css, img, js, vendor 디렉토리를 옮깁니다.)
이제는 static을 활용할 세팅을 할 차례입니다.
우선 template 상단에 {% load static %}를 코딩해주고
{% load static %}다음과 같이 각종 css와 js등을 불러오는 링크에 다음과 같이 추가 합니다.
<head> 부분
<link href="{% static 'forTstory/vendor/fontawesome-free/css/all.min.css' %}" rel="stylesheet" type="text/css">
<!-- Plugin CSS -->
<link href="{% static 'forTstory/vendor/magnific-popup/magnific-popup.css' %}" rel="stylesheet">
<!-- Theme CSS - Includes Bootstrap -->
<link href="{% static 'forTstory/css/creative.min.css' %}" rel="stylesheet">
<html 밑에 script 부분>
<!-- Font Awesome Icons -->
<link href="{% static 'forTstory/vendor/fontawesome-free/css/all.min.css' %}" rel="stylesheet" type="text/css">
<!-- Plugin CSS -->
<link href="{% static 'forTstory/vendor/magnific-popup/magnific-popup.css' %}" rel="stylesheet">
<!-- Theme CSS - Includes Bootstrap -->
<link href="{% static 'forTstory/css/creative.min.css' %}" rel="stylesheet">
<!-- Bootstrap core JavaScript -->
<script src="{% static 'forTstory/vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'forTstory/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<!-- Plugin JavaScript -->
<script src="{% static 'forTstory/vendor/jquery-easing/jquery.easing.min.js' %}"></script>
<script src="{% static 'forTstory/vendor/magnific-popup/jquery.magnific-popup.min.js' %}"></script>
<!-- Custom scripts for this template -->
<script src="{% static 'forTstory/js/creative.min.js' %}"></script>
<중간 img 삽입되는 부분>
<section id="portfolio">
<div class="container-fluid p-0">
<div class="row no-gutters">
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="#">
<img class="img-fluid" src="{% static 'forTstory/img/portfolio/thumbnails/1.jpg' %}" alt="">
여기까지 하시고 다시 들어가보면 preview에서 보신 모양대로 꾸며져있는 것을 볼 수 있습니다.
'Django 파헤치기' 카테고리의 다른 글
| [Django 파헤치기] 프로젝트 만들기 (0) | 2019.02.09 |
|---|---|
| [Django파헤치기] Django-allauth 라이브러리를 활용하여 구글 회원가입 및 로그인 (0) | 2019.02.08 |