Go!: 11. 페이지 개선

웹 페이지의 Presentation을 담당하는 CSS 를 추가하는 방법에 대해 알아보겠습니다.

CSS는 일반 파일로 작성되고 정적인 페이지로 작성이 됩니다.

정적인 페이지이므로 웹 서버의 특정위치에 저장되어 있는데 이 저장된 위치를 나타내는 urls.py 세팅을 알아 보겠습니다.

CSS 파일의 요청 경로는 "웹 서버/site_media" 이며 해당 요청 경로의 실제 경로는 "프로젝트/site_media" 라고 가정하도록 하겠습니다. (즉, 프로젝트 아래에 site_media를 먼저 작성해 주시기 바랍니다.)

urls.py
import os.path
...
site_media = os.path.join(os.path.dirname(__file__), 'site_media')
urlpatterns = patterns('',
...
(r'^site_media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': site_media}),
...
)

위와 같이 작성을 하면 "서버명/site_media/*.*' 으로 들어오는 요청에 대해 '프로젝트명/site_media'에서 해당 파일을 찾습니다.

(r'^site_media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': site_media}),

을 자세히 살펴보기로 하겠습니다.

사용자가 '/site_media/(임의의 경로.확장자)'의 형태로 요청시 django의 내장 뷰(View)에서 정적 파일에 대한 기능을 지원(static)하는 모듈중에 serve 모듈을 연결합니다('django.views.static.serve') serve 모듈의 원형은 serve(request, path, document_root=None, show_indexes=False) 로써 3개의 전달인자를 전달받습니다(request는 제외). 첫번째 전달인자인 path는 소괄호() 안에 묶여진 값이 전달되고 두번째 전달인자 document_root에 대해 사전형 자료로 {'document_root': site_media} 를 전달하고 세번째 전달인자는 기본값인 False를 사용합니다.

두번째 전달인자인 document_root에 대해 위에서 생성한 경로인 os.path.join(os.path.dirname(__file__), 'site_media') 이가 전달됨을 확인해 주시기 바랍니다.

이제 CSS 파일 하나를 '프로젝트/site_media' 디렉토리 아래에 style.css라는 이름으로 다음 내용을 저장해 주시기 바랍니다.

/site_media/style.css
#nav {
        float: right, /* 우측 정렬 */
        color: black; /* 텍스트 색상은 검정 */
        background: gray; /* 내용, 패딩(padding)은 회색 */
        margin: 0px 12px 0px 12px; /* 위와 아래의 마진은 0px */
        padding: 12px 0px 12px 0px; /* 오른쪽과 왼쪽 패딩은 0px */
        border-style: dashed;
        border-width: medium; /* 모든 면들에 테두리 너비를 설정 함 */
        border-color: black;
}

이제 CSS를 적용하여 보도록 하겠습니다.

base.html을 다음과 같이 수정하여 CSS 문서를 HTML 이 읽어오도록 합니다.

base.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Django Page | {% block title %}{% endblock %}</title>
        <link rel="stylesheet" href="/site_media/style.css" type="text/css" />
    </head>
    <body>
        <h1>{% block head %}{% endblock %}</h1>
{% if user.username %}
<h4 align="right">{{user.username}} 님 반갑습니다.(<a href='/accounts/logout'>로그아웃</a>)</h4>
{% else %}
            <h4 align="right"><a href="/accounts/login">로그인</a>하세요</h4>

        {% endif %}
        {% block content%}{% endblock %}
        <hr align="center" />
        <p align="center">Site managed by yoonani(yoonani72@gmail.com)</p>
    </body>
</html>

Template 중에 가장 기본이 되는 base.html을 수정하였으니 모든 Template에 적용이 될 것입니다.

메인 페이지에 대해 적용한 사례를 보도록 하겠습니다.

index.html을 다음과 같이 수정해 보시기 바랍니다.

{% extends "base.html" %}
{% block title %} Main page {% endblock %}
{% block head %} 안녕하세요! {% endblock %}
{% block content %}
django 서비스에 오신것을 환영합니다.
{% endblock %}

수정된 결과는 다음과 같습니다.

스크린샷-Django_Page___Main_page_-_Mozilla_Firefox.png

본 연습을 통해서 고정된 자원인 CSS를 사용할 수 있도록 하는 방법에 대해 알아보았습니다.

이제 site_media에는 웹 사이트의 고정된 자원을 저장하고 그 내용을 사이트에서 필요한 곳에서 불러서 사용할 수 있게 되었습니다.

고정된 자원은 CSS 뿐만이 아니라 JavaScript, 각종 이미지 등입니다.

학습활동

앞선 10. Template - 상속의 학습활동을 수행해 본 학생들은 본 시간에 학습한 내용대로 base.html을 저장하면 사용자 홈페이지로 이동시 문제가 발생합니다.

그것은 index.html에는 user 객체가 전달되지만 사용자 홈페이지에는 user 객체가 전달되지 않기 때문입니다.

이를 해결하기 위해 user 객체를 사용자 홈페이지에 전달할 수 있지만 다른 페이지에도 이런 일이 필요하다면 여간 귀찮은 일이 아닐 수 없습니다. 이런 문제를 해결하기 위해 RequestContext()라는 객체를 사용하는 데요...

이 객체는 앞서서 보았던 Context() 객체와는 조금 달라서 별도로 지정하지 않더라도 알아서 user 객체를 전달하며 request 객체와 템플릿 변수들로 생성합니다.

이런 RequestContext 객체에 대해 알아보고 개인노트에 "학습활동 - RequestContext"라는 이름으로 조사한 내용을 기록하세요

이 글은 스프링노트에서 작성되었습니다.

Go!

2010년 6월 7일 월요일

11. 페이지 개선

학습활동

댓글 1개: