본문 바로가기
Back-end/Django

포트폴리오 웹사이트 만들기 with Django

Jace.K 2020. 8. 18. 21:19

깃헙 코드 : https://github.com/bellcastle88/Portfolio-Project

  • Django설치 
  • 프로젝트 생성 
  • 앱 생성
>Pip install django
>Django-admin startproject mywebsite
>Python manage.py startapp base

 

  • mywebsite.settings.py에 base 앱 추가하기 
  • base폴더에 templates/base 생성하기 
  • 생성한 templates/base에 home.html 생성하기  
  • home.html에 <h3>Hello, world<h3> 입력하기

 

  • base.views.py에 home만들기 
from django.shortcuts import render

# Create your views here.

def home(request):
	return render(request, 'base/home.html')

 

  • base폴더에 urls.py생성하기 
  • urls.py폴더에 path 설정 해주기 
from django.urls import path
from . import views


urlpatterns = [
	path('', views.home)
]

 

  • mywebsite.urls.py에 base.urls연결 시키기 
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('base.urls'))
]

 

  • static폴더를 생성하고 하위 css파일 + images파일 생성하기 

 

 

  • mywebsite.setting.py에 static, media url설정해주기
STATIC_URL = '/static/'
MEDIA_URL = '/images/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

 

  • home.html에 css 로드해주기
{% load static %} #static파일을 로드하기 위해 작성해 줍니다.

<!DOCTYPE html>
<html>
<head>
	<title>Yongpro</title>
	<link href="{% static '/css/main.css'  %}" rel="stylesheet" type="text/css"> #CSS파일을 가져오기위해 작성해 줍니다.
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">#부트스트랩을 사용하기위해 작성해 줍니다
	
</head>
<body>
	<br>
	<div class="container"> #반응형 홈페이지로 만들기위해 사용합니다
		<div class="row">
			<div class="col-md-3">
				<div class="card card-body h-100  border-info" id="profile-wrapper">
					<img id="profile-pic" src="{% static 'images/man.png' %}" >
					<hr>
                    <h4>안녕하세요. Jace입니다!</h4>
                    <br>
					<p>Studying Coding</p>
				</div>
			</div>

			<div class="col-md-9">
				<div class="card card-body h-100  border-info">
					<h4>연습페이지</h4>
					<hr>
					<p>연습페이지 내용</p>
                    	<ul class="social-links"> #소셜아이콘을 가져오기 위해 작성해 줍니다.
						<li><img class="social" src="{% static 'images/facebook.png' %}"></li>
						<li><img class="social" src="{% static 'images/linkedin.png' %}"></li>
						<li><img class="social" src="{% static 'images/twitter.png' %}"></li>
						<li><img class="social" src="{% static 'images/youtube.png' %}"></li>
					</ul>

				</div>
			</div>
		</div>
		<br>
		<div class="row">
			<div class="col-md-6">
				<div class="card card-body h-100">
					<h5>연습페이지</h5>
					<hr>
					<p>연습페이지 내용</p>
					</div>
			</div>

			<div class="col-md-6">
				<div class="card card-body h-100">
					<h5>연습페이지</h5>
					<hr>
					<p>연습페이지 내용</p>
				</div>
			</div>
		</div>
		<br>
		<div class="row">
			<div class="col-md-6">
				<div class="card card-body h-100">
					<h5>연습페이지</h5>
					<hr>
					<p>연습페이지 내용</p>

				</div>
			</div>

			<div class="col-md-6">
				<div class="card card-body h-100">
					<h5>연습페이지</h5>
				<hr>
				<p>연습페이지 내용</p>
				</div>
			</div>
		</div>
		<br>
	</div>


</body>
</html>

 

저작자표시

'Back-end > Django' 카테고리의 다른 글

Django Blog 만들기 - part 3 : 템플릿  (0) 2020.08.21
Django Blog 만들기 - part 2 : 어플리케이션과 라우트  (0) 2020.08.20
Django Blog 만들기 - part 1 : 시작하기  (0) 2020.08.20
Django REST framework 기본 익히기  (0) 2020.08.18
To - Do 앱 만들기  (0) 2020.08.17

'Back-end/Django' Related Articles

티스토리툴바