여기서는 저에게는 완전히 미지의 영역인 UI "디자인"이 중요하므로 HTML, 자바스크립트, 스타일시트 등의 지식이 필요하다고 합니다.
역시 순서는 다음과 같습니다.
1. 화면 UI 디자인
2. 테이블 디자인 - 이번에는 변경사항이 없습니다.
3. URL 설계:
지금까지 /bookmark/, /blog/ , /admin/ url을 만들었습니다. 이번에 필요한 것은 그 루트가 되는 / url입니다.
4. 코딩
지금까지의 프로젝트에서 이미 많은 것이 만들어져 있으므로 바로 URLconf 코딩으로 넘어갑니다.
URLconf 코딩
추가 애플리케이션에 대한 url이 아니라 프로젝트에 대한 url이므로 mysite/urls.py 파일에 추가 작업을 합니다.
from django.conf.urls import include, url
from django.contrib import admin
from mysite.views import HomeView #추가분
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'^$', HomeView.as_view(), name='home'), #추가분
url(r'^bookmark/', include('bookmark.urls', namespace='bookmark')),
url(r'^blog/', include('blog.urls', namespace='blog')),
]
| cs |
뷰의 클래스를 HomeView로, url패턴 이름을 'home'으로 지정합니다.
뷰 코딩
뷰에 HomwVIew를 정의합니다. 단순히 템플릿을 보여주는 기능이므로 TemplateView 제너릭뷰를 상속받습니다.
mysite/view.py를 다음과 같이 생성합니다.
from django.views.generic.base import TemplateView
# TemplateView
class HomeView(TemplateView):
template_name = 'home.html'
| cs |
TemplateView를 상속받아 HomeView를 만들었고, 템플릿 이름을 'home.html'로 정했습니다.
여기까지는 간단하지만, 이제부터 이어질 템플릿이 상당히 복잡합니다. 각 애플리케이션에 대한 링크 메뉴도 만들고, 화면의 전체 윤곽을 잡고, 템플릿 상속 기능을 구현해야 하기 때문이랍니다.
여기까지는 간단하지만, 이제부터 이어질 템플릿이 상당히 복잡합니다. 각 애플리케이션에 대한 링크 메뉴도 만들고, 화면의 전체 윤곽을 잡고, 템플릿 상속 기능을 구현해야 하기 때문이랍니다.
템플릿 코딩
base.html
북마크앱을 만들 때 이미 mysite/settings.py에 템플릿 디렉토리는 다음과 같이 정의했습니다.
'DIRS': [os.path.join(BASE_DIR,'templates')]
계획했던 UI('파이썬 웹프로그래밍: 실전편' 김석훈 저 100p. 참고)를 구현하기 위해 템플릿 디렉토리를 만들고 그 안에 base.html을 만듭니다.
(myvenv) D:\myDjango>mkdir templates
(myvenv) D:\myDjango>cd templates
(myvenv) D:\myDjango\templates>subl base.html
타이틀 및 메뉴들을 배치하는 html입니다. 이것을 하위 템플릿에서 상속받아 세부구현이 이루어집니다. 이 html에 색을 넣고 글자 크기를 정하기 위해서는 css파일을 구현해야 합니다.
css의 디렉토리도 이미 설정에서 정의해 두었습니다.
이제 css용의 폴더를 만들고 파일을 생성합니다.
(myvenv) D:\myDjango>mkdir static
(myvenv) D:\myDjango>cd static
(myvenv) D:\myDjango\static>mkdir css
(myvenv) D:\myDjango\static>cd css
(myvenv) D:\myDjango\static\css>subl base.css
css파일로 화면 디자인을 합니다(제가 아는 분야가 아니라 할 말이...그냥 따라 쳤을 뿐입니다).
지금까지 base.html과 base.css를 작성했습니다. 아직 끝난게 아닙니다. 이제 home.html과 home.css를 코딩해야 합니다만 그 전에 확인을 위해 테스트용 home.html을 먼저 코딩해봅니다.
(myvenv) D:\myDjango>cd templates
(myvenv) D:\myDjango\templates>subl home.html
base.html을 상속받아 title을 home.html로 재정의 합니다.
이제 runserver로 화면을 테스트 해봅시다.
성공입니다.
테스트가 작동되는 것을 확인했으니 이제 home.html을 구체적으로 바꾸어봅니다.
각 앱들에 대한 링크가 임시로 #으로 설정되어 있습니다. 차차 수정하게 될거라고 합니다.
static image 경로가 지정되어 있는데, 원하는 그림을 찾아
D:\myDjango\static\img 에 넣어줍니다.
저는 한빛미디어에서 책 소스 공개된 파일을 다운받아 이미지를 넣었습니다.
'DIRS': [os.path.join(BASE_DIR,'templates')]
계획했던 UI('파이썬 웹프로그래밍: 실전편' 김석훈 저 100p. 참고)를 구현하기 위해 템플릿 디렉토리를 만들고 그 안에 base.html을 만듭니다.
(myvenv) D:\myDjango>mkdir templates
(myvenv) D:\myDjango>cd templates
(myvenv) D:\myDjango\templates>subl base.html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>{% block title %}Django Web Programming{% endblock %}</title>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static "css/base.css" %}" />
<link rel="stylesheet" type="text/css" href="{% block extrastyle %}{%endblock %}" />
</head>
<body>
<div id="header">
<h2 class="maintitle">Easy&Fast Django Web Programming</h2>
<h4 class="welcome">Welcome, <a href="#"></a> /
<a href="#">Change Password</a> /
<a href="#">Logout</a>
</h4>
</div>
<div id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Bookmark</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Photo</a></li>
<li><a href="#">Add▽</a>
<ul>
<li><a href="#">Bookmark</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Photo</a></li>
</ul>
</li>
<li><a href="#">Change▽</a>
<ul>
<li><a href="#">Bookmark</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Photo</a>a</li>
</ul>
</li>
<li><a href="#">Archive</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Admin</a></li>
</div>
{% block content %}{% endblock %}
{% block footer %}{% endblock %}
</body>
</html>
| cs |
타이틀 및 메뉴들을 배치하는 html입니다. 이것을 하위 템플릿에서 상속받아 세부구현이 이루어집니다. 이 html에 색을 넣고 글자 크기를 정하기 위해서는 css파일을 구현해야 합니다.
css의 디렉토리도 이미 설정에서 정의해 두었습니다.
이제 css용의 폴더를 만들고 파일을 생성합니다.
(myvenv) D:\myDjango>mkdir static
(myvenv) D:\myDjango>cd static
(myvenv) D:\myDjango\static>mkdir css
(myvenv) D:\myDjango\static>cd css
(myvenv) D:\myDjango\static\css>subl base.css
body{
font-family: "Lucia Grande",Verdana,Arial,sans-serif;
font-size: 12px;
}
/* PAGE STRUCTURE */
div#header {
position: absolute;
top: 0px;
left: 0px;
height: 30px;
width: 100%;
display: table;
background: orange;
}
div#menu {
position: absolute;
top: 30px;
left: 0px;
height: 20px;
width: 100%;
display: table;
table-layout: fixed;
border-spacing: 40px 0px;
background: #ffa;
font-size: 8px;
}
div#content {
position: absolute;
top: 70px;
left: 50px;
right: 50px;
}
div#footer {
position: absolute;
bottom: 20px;
left: 50px;
right: 50px;
height: 30px;
border-top: 1px solid #ccc;
}
/*HEADER*/
.maintitle {
display: table-cell;
vertical-align: middle;
padding-left: 20px;
color: #ffc;
font-weight: bold;
font-size: 16px;
}
.welcome {
display: table-cell;
vertical-align: middle;
text-align: right;
padding-right: 20px;
color: #ffc;
font-weight: normal;
font-size: 12px;
}
.welcome a:link, .welcome a:visited {
color: white;
}
/* MENU */
div#menu a:link, div#menu a:visited {
color: #36c;
}
div#menu > li {
display: table-cell;
vertical-align: middle;
border: 2px solid #bbb;
border-radius: 25px;
text-align: center;
font-weight: bold;
}
/* pulldown menu */
div#menu li ul {
display: none;
position: absolute;
margin: 0;
padding: 10px 10px 5px 10px;
list-style: none;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: white;
z-index: 1;
}
div#menu li:hover ul {
display: block;
}
/* LINK */
a:link, a:visited {
color: #369;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* TABLE */
table {
border-collapse: collapse;
}
td, th {
line-height: 18px;
border-bottom: 1px solid #eee;
vertical-align: top;
padding: 5px 15px;
font-family: "Lucia Grande", Verdana, Arial, sans-serif;
}
| cs |
css파일로 화면 디자인을 합니다(제가 아는 분야가 아니라 할 말이...그냥 따라 쳤을 뿐입니다).
지금까지 base.html과 base.css를 작성했습니다. 아직 끝난게 아닙니다. 이제 home.html과 home.css를 코딩해야 합니다만 그 전에 확인을 위해 테스트용 home.html을 먼저 코딩해봅니다.
(myvenv) D:\myDjango>cd templates
(myvenv) D:\myDjango\templates>subl home.html
{% extends "base.html" %}
{% block title %}home.html{% endblock %}
{% block content %}
<div id="content">
This is Content area.
</div>
{% endblock content %}
{% block footer %}
<div id="footer">
This is Footer area.
</div>
{% endblock footer %}
| cs |
base.html을 상속받아 title을 home.html로 재정의 합니다.
이제 runserver로 화면을 테스트 해봅시다.
성공입니다.
home.html
{% extends "base.html" %}
{% block title %}home.html{% endblock %}
{% load staticfiles %}
{% block extrastyle %}{% static "css/home.css" %}{% endblock %}
{% block content %}
<div id="content_home">
<div id="homeimg">
<a href="/"><img src="{% static 'img/django-actor-big.jpg' %}" style="height: 256px;"/></a>
<h4 style="margin: 0;">This is Django powered web site.</h4>
</div>
<hr style="margin: 5px 0;">
<h2>Select Application</h2>
<table id="applist">
<tr>
<td><b><i><a href="#">Bookmark</a></i></b></td>
<td>You can write your own post and share to others.
Donec id elit non mi porta gravida at egnet metus.
Fusce dapibus, tellus ac cursus commodo</td>
<td class="Edit"><i><a href="#">Add</a></i></td>
<td class="Edit"><i><a href="#">Change</a></i></td>
</tr>
<tr>
<td><b><i><a href="#">Blog</a></i></b></td>
<td>You can writeyour own post and share to others.
Donec id elit non mi porta gravida at egnet metus.
Fusce dapibus, tellus ac cursus commodo</td>
<td class="Edit"><i><a href="#">Add</a></i></td>
<td class="Edit"><i><a href="#">Change</a></i></td>
</tr>
<tr>
<td><b><i><a href="#">Photo</a></i></b></td>
<td>You can writeyour own post and share to others.
Donec id elit non mi porta gravida at egnet metus.
Fusce dapibus, tellus ac cursus commodo</td>
<td class="Edit"><i><a href="#">Add</a></i></td>
<td class="Edit"><i><a href="#">Change</a></i></td>
</tr>
</table>
</div>
{% endblock content %}
{% block footer %}
<div id="footer">
© YourId 2016
</div>
{% endblock footer %}
| cs |
각 앱들에 대한 링크가 임시로 #으로 설정되어 있습니다. 차차 수정하게 될거라고 합니다.
static image 경로가 지정되어 있는데, 원하는 그림을 찾아
D:\myDjango\static\img 에 넣어줍니다.
저는 한빛미디어에서 책 소스 공개된 파일을 다운받아 이미지를 넣었습니다.
home.css
이제 home.html에서 추가 스타일로 지정한 home.css를 코딩합니다.
(myvenv) D:\myDjango\static\css>subl home.css
div#content_home {
position: absolute;
top: 80px;
left: 110px;
right: 110px;
}
div#homeimg {
background: #ddd;
padding: 5px 0 1px 0;
text-align: center;
}
| cs |
이것으로 일단 홈페이지 첫화면의 모양을 잡는 작업을 마쳤습니다.
서버를 구동하여 정상적으로 작동하는지 확인합니다.
제가 아직 모르는 분야인 css와 html이 많이 나와서 상당히 곤혹스러웠습니다.
python만으로는 부족하군요. 언젠가 html과 css도 공부할 날이 오겠지요.
그러다보면 자바스크립트도 공부해야 하려나요? 끝이 없는 길입니다 ㅎㅎ
김석훈 님은 저와 같이 얄팍한 지식의 유저들을 위해 좀더 편하게 첫페이지를 구성할 수 있는 툴로 부트스트랩을 소개하고 있습니다. 트위터에서 개발된 이 프레임워크는 보다 쉽게 훌륭한 화면을 만들수 있도록 해줄 수 있을 것 같습니다.
댓글 없음:
댓글 쓰기