#12 템플릿 상속

2021. 9. 23. 16:08

지금까지 작성한 question_list.html 이나 question_detail.html 등의 템플릿들은 HTML 표준을 따르는 구조가 아니었다.

그러나 웹 브라우저에 상관없이 같은 내용과 동작을 하도록 하려면 웹 표준을 지키는 HTML 문서를 작성할 필요가 있다.

이번에는 표준 HTML 구조에 대해 간단히 알아보고 템플릿 상속을 통해 그동안 작성한 템플릿들이 그 구조를 따르도록

해보기로 한다.

1. 표준 HTML 구조

{% load static %}
<!doctype html>
<html lang="ko">
<head>
    <!-- meta 태그 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width-device-width", initial-scale=1, shrink-to-fit=no">
    
    <!-- css 파일 -->
    <link rel="stylesheet" type="text/css", href="{% static 'bootstrap.min.css' %}">
    <link rel="stylesheet" type="text/css", href="{% static 'style.css' %}">
    
    <!-- title 태그 -->
    <title>My Site Pybo</title>
</head>
<body>
	<!-- 본문 -->
</body>
</html>

표준 HTML 문서의 구조는 위와 같이 html, head, body 엘리먼트가 있어야한다. (여기서 엘리먼트란 태그로 둘러쌓인

블록을 의미한다. 예를 들어 <body> 는 body 태그이며 <body> ... </body> 는 body 엘리먼트가 된다.) 또한,

head 엘리먼트에는 meta, title 등의 엘리먼트가 포함되어야 하며, css 파일은 head 엘리먼트 내에 있어야 한다.

2. 템플릿 상속

표준 HTML 문서의 구조를 알았으니 이제 그동안 작성해온 템플릿에 적용시켜야 한다. 그런데 HTML 표준을

적용하게되면 서로 다른 템플릿들 간에 body 엘리먼트 부분을 제외하고는 사실상 차이가 없어진다. 그렇기 때문에

템플릿 상속 기능을 사용하여 공통적인 내용을 담은 베이스 템플릿을 미리 작성하고 다른 템플릿들은 그 템플릿을

상속하는 것으로 보다 편리하게 HTML 표준을 적용할 수 있다.

먼저 공통 부분인 베이스 템플릿을 작성해보자. 이 템플릿은 pybo 앱에서만 사용될 템플릿이 아니기 때문에

templates 디렉토리에 바로 생성한 후 다음과 같이 작성한다.

위에서 설명했던 표준 HTML 구조에 따라 작성한 베이스 템플릿 파일 base.html 이다. body 엘리먼트 내의

{% block content %} 와 {% endblock %} 부분이 베이스 템플릿을 상속한 템플릿에서 개별적으로 구현해야 할 부분이다.

먼저 question_list.html 에서 base.html을 상속해보자. 파일을 다음과 같이 수정한다.

베이스 템플릿에 정의된 중복 부분 ({% load static %} 이나 css파일 등)이 제거되고 {% extentds 'base.html' %} 로

베이스 템플릿을 상속한 뒤 베이스 템플릿의 body 엘리먼트에 있었던 {% block content %} {% endblcok %} 으로

전체 내용을 감싸준 것을 확인할 수 있다. 이렇게 작성하면 베이스 템플릿의 {% block content %} ~ {% endblcok %}

부분에 question_list.html 의 내용이 들어간 것과 같은 상태가 된다.

마찬가지로 question_detail.html 도 다음과 같이 수정하여 HTML 표준을 적용시켜준다.

3. 표준 HTML 구조에 따른 웹페이지 개발의 이점

이것으로 지금까지 작성한 템플릿들에 표준 HTML 구조를 적용시키는 작업이 완료되었다. 물론 이 작업이 끝나도 웹페이지의 형태나 기능이 달라진 것은 아니지만 HTML 표준을 적용시킨 것으로 다음과 같은 이점을 얻을 수 있다.

① 웹 페이지의 구조와 표현(디자인 등)을 분리하는 것으로 두 요소를 독립적으로 구현하고 관리할 수 있게 됨

② 구조와 표현의 분리하는 것으로 유지, 보수가 간편해지며 불필요한 마크업을 최소화, 페이지 로딩속도 향상

③ 올바른 마크업과 css를 사용하여 구 버전의 웹 브라우저에서도 의도한대로 컨텐츠가 표시되며 웹 표준을

지원하는 최신 기기나 환경에서도 동일한 결과를 기대할 수 있음. (상/하위 호환성)

④ 웹 표준에 따라 구조화된 웹 페이지는 검색엔진이 보다 쉽게 찾아낼 수 있어 웹 페이지를 쉽게 노출시킬 수 있다.

⑤ 코드를 효율적으로 작성하는 것으로 파일 사이즈를 축소하고 서버 저장 공간을 절약할 수 있다.

'개인 프로젝트 > Django-mysite' 카테고리의 다른 글

#14 내비게이션 바 (0)	2021.09.24
#13 데이터 저장 2 (0)	2021.09.23
#11 부트스트랩(Bootstrap) (0)	2021.09.22
#10 스타일시트(Style Sheet) (0)	2021.09.22
#9 데이터 저장 1 (0)	2021.09.21

공부정리