부트스트랩을 이용하여 나만의 포트폴리오 사이트르 만들어 보겠습니다.
부트스트랩이란?
(나무위키 참조)
https://namu.wiki/w/Bootstrap(%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC)
참고하세용~
요약하자면 우리같은 디자인 고자들도 예쁜 사이트를 만들수있게 해주는 웹 프레임워크입니다.
이 글을 쓰기전까지 프로젝트 내용을 포트폴리오로 할지 간단한 게시판으로 할지 고민이 많았는데요
부트스트랩을 이용해서 보기좋은 사이트를 만드는게 조금더 끌리기도하고
겸사겸사 포트폴리오도 만들어 공개할수있으니 이렇게 결정하게 되었습니다!
우선 제가 적용할 템플릿은 요거입니다
https://bootstrapmade.com/kelly-free-bootstrap-cv-resume-html-template/download/
Kelly - Bootstrap CV Resume HTML Template | BootstrapMade
Subscribe to our newsletter to receive notifications of new templates and updates, or click "Just Download" to download the template directly!
bootstrapmade.com
링크 들어가서 프리 다운로드 클릭
다운로드 하신 후 css,js,img등을 한곳에 몰아두기 위해 프로젝트에 staic폴더를 생성해줍니다
그리고 다운로드받은 kelly폴더를 들어가서 assets폴더까지 들어가주면
css,img,js,vendor 폴더를 복사한후 방금만든 static폴더로 복붙해줍니다
같은 방식으로 mainapp-templates로 html파일도 옮겨줍니다
이렇게 복붙 해주신후
전에 만들었던 main.html은 이제 사용하지 않을겁니다
index.html을 띄워 줄 수 있도록 수정 해줍니다
아까 만들어둔 static 폴더를 적용하기위해
setting.py로 들어가 제일 아래에 아래 코드를 추가 해주세요
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_DIRS = [
BASE_DIR / "static",
]
그리고 서버를 돌려서 http://127.0.0.1:8000/ 접속 해주시면 아까 옮겨둔 css,img포함하여 잘 불러 오네요
나머지 html파일도 띄워 줄 수 있게 매핑 해줍니다
from django.shortcuts import render
# Create your views here.
def main(request):
return render(request, 'index.html')
def about(request):
return render(request, 'about.html')
def contact(request):
return render(request, 'contact.html')
def portfolio(request):
return render(request, 'portfolio.html')
def portfolio_details(request):
return render(request, 'portfolio-details.html')
def resume(request):
return render(request, 'resume.html')
def services(request):
return render(request, 'services.html')mainapp -urls.py 수정
from django.contrib import admin
from django.urls import path
import mainapp
from mainapp.views import *
app_name = 'mainapp'
urlpatterns = [
path('', main, name='main'),
path('mainapp/about', about, name='about'),
path('mainapp/contact', contact, name='contact'),
path('mainapp/portfolio', portfolio, name='portfolio'),
path('mainapp/portfolio_details', portfolio_details, name='portfolio_details'),
path('mainapp/resume', resume, name='resume'),
path('mainapp/services', services, name='services'),
]
이렇게 url연결 해주신 후
프로젝트 유지 보수를 편하게 하기 위해 고정적으로 쓰는 head, header, footer 영역을 나누어줍니다
templates폴더안에 아래 사진처럼 html을 생성해주세요
일단 index.html로 가서 <head>영역을 복사해서 templates폴더안에있는 head.html에 복사해줍니다 그리고
부트스트랩으로 추가한 모든 html파일에 head부분은 지워 주세요
그리고 이건 제가 스크린샷을 찍고 저장을 안했네요
기본 부트스트랩 html은 아래 코드처럼 경로가 되어있는데요
<link href="/assets/vendor/aos/aos.css" rel="stylesheet">href="/assets/vendor/aos/aos.css <- 여기서 경로를 우리가만든 static경로로 바꿔줘야합니다
파이참 사용자면 ctrl+shif+r 키를 눌러서 전체 바꾸기 attests를 /static로 바꿔줍니다
이걸 전부다 바꿔주기는 번거로우니 head.html, header.html로 만들어서 관리해주면 편하겠죠?
코드도 첨부해드리니 참고하세요
head.html -
{% load static %}
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>BUTLER-SIM</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="/static/img/favicon.png" rel="icon">
<link href="/static/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="/static/vendor/aos/aos.css" rel="stylesheet">
<link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="/static/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="/static/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="/static/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="/static/css/style.css" rel="stylesheet">
<!-- =======================================================
* Template Name: Kelly - v4.7.0
* Template URL: https://bootstrapmade.com/kelly-free-bootstrap-cv-resume-html-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
</head>
같은 방법으로 header ,footer 영역도 진행 할게요
header.html-
{% include "head.html" %}
<header id="header" class="fixed-top">
<div class="container-fluid d-flex justify-content-between align-items-center">
<h1 class="logo me-auto me-lg-0"><a href="">BUTLER-SIM</a></h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <a href="index.html" class="logo"><img src="/static/img/logo.png" alt="" class="img-fluid"></a>-->
<nav id="navbar" class="navbar order-last order-lg-0">
<ul>
<li><a class="active" href="">Home</a></li>
<li><a href="/mainapp/about">About</a></li>
<li><a href="/mainapp/resume">Resume</a></li>
<li><a href="/mainapp/services">Services</a></li>
<li><a href="/mainapp/portfolio">Portfolio</a></li>
<li><a href="/mainapp/contact">Contact</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
<div class="header-social-links">
<a href="#" class="twitter"><i class="bi bi-twitter"></i></a>
<a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
<a href="#" class="instagram"><i class="bi bi-instagram"></i></a>
<a href="#" class="linkedin"><i class="bi bi-linkedin"></i></a>
</div>
</div>
</header><!-- End Header -->
footer.html-
{% include "head.html" %}
<footer id="footer">
<div class="container">
<div class="copyright">
© Copyright <strong><span>Kelly</span></strong>. All Rights Reserved
</div>
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. -->
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
</div>
</div>
</footer><!-- End Footer -->
최종적으로 우리가 추가해준 html에 코드는 이런식으로 됩니다
~~~~~~
~~
</body>
{% include "footer.html" %}
다시 서버를 재시작하여 http://127.0.0.1:8000/로 접속 한후 메뉴 클릭시 이동이 잘되었다면 성공입니다!!!!
여기까지 오셨다면! 고생하셨습니다~
나머지 포트폴리오 내용은 본인 커리어에 맞게 잘 수정 해주세요 ~
이번글은 좀 길어서 제가 빠트린 부분이 많을 수 도 있습니다,,
퇴근후 자기전에 글을쓰는거라 확인 안하고 바로 글을 올려버리니 설명이 많이 부족 할거같네요,,
다음글로 찾아올게요~
'개발 > 장고로 내 사이트 만들기' 카테고리의 다른 글
| (7) (Django 개발부터 배포까지) Django AWS, Docker(Nginx+gunicorn)로 배포하기 -1- (0) | 2022.01.17 |
|---|---|
| (6) (Django 개발부터 배포까지) Django AWS RDS 연동하기 (0) | 2021.12.13 |
| (5) (Django 개발부터 배포까지) Django Mysql 연동하기 (0) | 2021.12.04 |
| (3) (Django 개발부터 배포까지) 파이썬 requirements.txt로 패키지 한 관리하기 (0) | 2021.11.29 |
| (2) (Django 개발부터 배포까지) 파이참 프로젝트 깃허브 연동 (0) | 2021.11.25 |
| (1) (Django 개발부터 배포까지) Hello 띄우기 (0) | 2021.11.22 |
