written: Jan 28 2002
last modified: Sep 20 2006
앞장의 "사용방법"의 "화면 분활 실험(공유 영역 분리)" 항목에서 살펴본 바와 같이 한 화면을 공통적으로 쓰이는 부분(상단메뉴, 하단 저작권 표시, 좌측 메뉴 등)을 별도의 템플릿으로 분리하게 되면 여러 페이지에서 이러한 부분을 공유하여 이용할 수 있습니다. 이와같이 작성하게 되면 한 화면이 몇 개의 템플릿 파일로 나누어지게 됩니다.
이런 경우에 각 템플릿 파일별로 서로 독립적으로 나모 웹에디터를 이용하여 문서를 완성하다보면 각 템플릿 파일에서의 <HEAD>~</HEAD>의 내용 및 <BODY> 태그 속성 내용이 중복되거나 서로 상이하게 사용될 수 있습니다. 이러한 상태에서 템플릿툴을 이용하여 하나의 화면으로 합치게 되면 <HEAD>~</HEAD>의 내용 및 <BODY> 태그 내용이 뒤죽박죽 될 것입니다. 이러한 문제를 하나씩 해결해 나가 보지요.
1.0.0 이전 버전에서는 다중 템플릿 파일에 존재하는 공통 부분(<HEAD> ~ </HEAD> 및 <BODY attrib>)의 처리를 처음 FastPrint() 함수 수행할 때 처리함으로써 일단 FastPrint()를 실행한 이후의 템플릿 파일에 있는 공통 부분의 출력이 불가능하였습니다.
1.0.0 버전에서는 클래스 hTemplate의 생성자에서 설정한 '사용자 정의 출력버퍼 콜백함수'를 수행할 때 단 한번만 출력하도록 하였습니다. 사용자 정의 출력버퍼 콜백함수는 모든 스크립트가 종료된 후에 동작하도록 하였기 때문에 FastPrint() 함수를 실행한 후에도 define() 함수가 정상적으로 동작하게됩니다. 따라서 웹문서 어디에서 define() 함수를 사용하던지 관계없이 다중 템플릿 파일에 존재하는 모든 공통 부분(<HEAD> ~ </HEAD> 및 <BODY attrib>)의 처리가 정상적으로 출력합니다.
1.2.0 버전에서는 FastPrint() 함수대신에 output() 함수를 사용합니다.
<HEAD>~</HEAD> 내에 있는 자바 스크립트 처리 문제
템플릿 파일마다 서로 다른 자바 스크립트 함수가 존재할 때
예를 들어 하나의 페이지를 구성하는 템플릿 파일이 아래와 같이 a.htm과 b.html으로 나누었을 때를 생각해 보겠습니다. 각각에 템플릿 파일에는 해당 파일에서만 사용되는 자바 스크립트가 별도로 작성되어 있습니다.
[code html;gutter:false]
<!-- a.htm -->
<HTML>
<HEAD>
<SCRIPT language="javascript">
<!--
function func_A() { ... }
function func_B() { ... }
function func_C() { ... }
//-->
</SCRIPT>
</HEAD>
[/code]
[code html;gutter:false]
<!-- b.htm -->
<HTML>
<HEAD>
<SCRIPT language="javascript">
<!--
function func_D() { ... }
function func_E() { ... }
function func_F() { ... }
//-->
</SCRIPT>
</HEAD>
[/code]
[code php;gutter:false]
<?php
/**
* test.php
*/
include_once('class.hTemplate.php');
$tpl = new hTemplate('./templates');
$tpl->define(
array(
'a' => 'a.htm',
'b' => 'b.htm'
)
);
$tpl->assign( ... );
$tpl->assign( ... );
$tpl->output( ... );
?>
[/code]
test.php 코드에 의해 두 개의 템플릿 파일로부터 생성된 HTML 문서를 보면 아래와 같습니다.
[code html;gutter:false]
<HTML>
<HEAD>
<SCRIPT language="javascript">
<!--
function func_A() { ... }
function func_B() { ... }
function func_C() { ... }
//-->
</SCRIPT>
<SCRIPT language="javascript">
<!--
function func_D() { ... }
function func_E() { ... }
function func_F() { ... }
//-->
</SCRIPT>
</HEAD>
[/code]
생성된 HTML 문서를 보면 a.htm과 b.htm 각각의 헤더 태그에 있던 자바 스크립트 함수가 모두 포함되어 있는 것을 볼 수 있습니다.
2개 이상의 템플릿 파일에 동일한 자바 스크립트 함수가 중복되었을 때
자바 스크립트 함수가 중복되지 않는다면 별문제가 없을 것입니다. 그러나 때에 따라서는 템플릿 파일 사이에 중복되는 자바 스크립트 함수가 존재할 수 있습니다.
아래와 같은 예를 보면 템플릿 파일 a.htm과 b.htm의 헤더 태그를 보면 양쪽 모두에 func_Z() 함수가 중복되어 있는 것을 볼 수 있습니다.
[code html;gutter:false]
<!-- a.htm -->
<HTML>
<HEAD>
<SCRIPT language="javascript">
<!--
function func_A() { ... }
function func_B() { ... }
function func_C() { ... }
function func_Z() { ... }
//-->
</SCRIPT>
</HEAD>
[/code]
[code html;gutter:false]
<!-- b.htm -->
<HTML>
<HEAD>
<SCRIPT language="javascript">
<!--
function func_D() { ... }
function func_E() { ... }
function func_F() { ... }
function func_Z() { ... }
//-->
</SCRIPT>
</HEAD>
[/code]
두 개의 템플릿 파일로부터 생성된 HTML 문서를 보면 아래와 같습니다.
[code html;gutter:false]
<HTML>
<HEAD>
<SCRIPT language="javascript">
<!--
function func_A() { ... }
function func_B() { ... }
function func_C() { ... }
function func_Z() { ... }
//-->
</SCRIPT>
<SCRIPT language="javascript">
<!--
function func_D() { ... }
function func_E() { ... }
function func_F() { ... }
function func_Z() { ... }
//-->
</SCRIPT>
</HEAD>
[/code]
생성된 HTML 문서를 보면 자바 스크립트 함수 func_Z()가 중복되어 정의되어 있는 것을 볼 수 있습니다. 자바 스크립트 함수의 경우에는 이와 같이 한 페이지에 동일한 함수가 중복 정의되더라도 실행에는 문제가 발생하지 않습니다.
그러나 함수의 크기가 작다면 별문제가 없겠지만 함수 덩치가 크다면 불필요한 시간 낭비가 될 것입니다. 이와 같이 여러 개의 템플릿 파일에서 중복되어 나타나는 자바 스크립트 함수를 단 하나만 생성하기 위해서는 아래와 같이 중복되는 함수를 별도로 스크립트 태그로 구성한 후 속성명 "tpl"의 값을 "TMP"로 지정하여 놓기 바랍니다.
[code html;gutter:false]
<!-- a.htm -->
<HTML>
<HEAD>
<SCRIPT language="javascript">
<!--
function func_A() { ... }
function func_B() { ... }
function func_C() { ... }
function func_Z() { ... }
//-->
</SCRIPT>
</HEAD>
[/code]
[code html;gutter:false]
<!-- b.htm -->
<HTML>
<HEAD>
<SCRIPT language="javascript">
<!--
function func_D() { ... }
function func_E() { ... }
function func_F() { ... }
//-->
</SCRIPT>
<SCRIPT language="javascript" tpl="TMP">
<!--
function func_Z() { ... }
//-->
</SCRIPT>
</HEAD>
[/code]
두 개의 템플릿 파일로부터 생성된 HTML 문서를 보면 아래와 같습니다.
[code html;gutter:false]
<HTML>
<HEAD>
<SCRIPT language="javascript">
<!--
function func_A() { ... }
function func_B() { ... }
function func_C() { ... }
function func_Z() { ... }
//-->
</SCRIPT>
<SCRIPT language="javascript">
<!--
function func_D() { ... }
function func_E() { ... }
function func_F() { ... }
//-->
</SCRIPT>
</HEAD>
[/code]
이와 같이 속성 "tpl"의 값에 "TMP"가 설정되어 있으면 후키템플릿에서 템플릿 파일을 분석할 때 템플릿에 포함시키지 않고 삭제해 버립니다. 따라서 복수의 템플릿 파일에서 중복되는 자바 스크립트 함수가 있을 때 이용할 수 있습니다.
앞장 "템플릿의 URL 자동 변경"장에서 살펴본 "URL" 속성값이 자바 스크립트 태그에서만 사용되는데 반하여 "TMP" 값은 헤더 태그 내에 존재하는 모든 태그에서 사용할 수 있습니다.
< tpl, name 속성 지정 >
| 버전 |
속성명 |
속성값 |
향후 호환성 |
기능 |
사용 가능한 태그 |
| 0.0.1 |
name |
URL4TPL |
호환성 없음 |
URL 자동 변경 |
<SCRIPT> |
| 0.0.2 |
name |
URL4TPL |
호환성 없음 |
" |
<SCRIPT> |
| tpl |
URL |
호환성 있음 |
" |
<SCRIPT> |
| tpl |
TMP |
호환성 있음 |
중복 방지 |
<SCRIPT>,<META>,<LINK> <STYLE>,<TITLE> |
"사용 가능한 태그"는 모두 <HEAD>~</HEAD> 내에 있는 태그만 해당하며 <HEAD> 태그를 벗어난 곳에 있는 태그는 적용하지 않습니다.
만약 "URL", "TMP" 값 모두를 설정하려면 아래와 같이 콤마로 구분하여 속성값을 지정하면 되며 그 순서는 관계없습니다.
[code html;gutter:false]
<SCRIPT language="javascript" tpl="URL,TMP">
<!--
OpenMail = "./../mail.php";
OpenHelp = "./../help_search.php";
//-->
</SCRIPT>
[/code]
<HEAD>~</HEAD> 내에 있는 스타일 태그 처리 문제
스타일 태그 처리는 위에서 살펴본 자바 스크립트 태그 처리 방법과 동일합니다.
<HEAD>~</HEAD> 내에 있는 메타 태그 처리 문제
만약 템플릿 파일마다 메타 태그가 중복되어 나타난다면 먼저 define되는 템플릿 파일에 있는 메타 태그에게 우선권이 있습니다. 중복되지 않는다면 각각의 템플릿 파일마다 존재하는 모든 메타 태그가 유효하게 처리됩니다.
[code html;gutter:false]
<!-- a.htm -->
<HEAD>
<META http-equiv="content-type" content="text/html; charset=euc-kr">
<META name="author" content="hwooky">
</HEAD>
[/code]
[code html;gutter:false]
<!-- b.htm -->
<HEAD>
<META http-equiv="content-type" content="text/html; charset=ks_c_5601-1987">
<META name="author" content="hwooky2">
<META name="keywords" content="sessioner">
<META name="Description" content="www.phpclass.com">
</HEAD>
[/code]
두 개의 템플릿 파일로부터 생성된 HTML 문서를 보면 아래와 같습니다. 각 메타태그를 구분하여주는 아이디는 속성 "http-equiv" 또는 "name"입니다.
[code html;gutter:false]
<HEAD>
<META http-equiv="content-type" content="text/html; charset=euc-kr">
<META name="author" content="hwooky">
<META name="keywords" content="sessioner">
<META name="Description" content="www.phpclass.com">
</HEAD>
[/code]
<HEAD>~</HEAD> 내에 있는 LINK 태그 처리 문제
만약 템플릿 파일마다 LINK 태그가 중복되어 나타난다면 먼저 define되는 템플릿 파일에 있는 LINK 태그에게 우선권이 있습니다. 중복되지 않는다면 각각의 템플릿 파일마다 존재하는 모든 LINK 태그가 유효하게 처리됩니다. 이 때 각 LINK 태그를 구분하여주는 아이디는 속성 "href"입니다. 따라서 속성 "href"의 값이 다르다면 어떤 템플릿 파일에 있든지 유효처리됩니다.
[code html;gutter:false]
<!-- a.htm -->
<HEAD>
<LINK rel="stylesheet" type="text/css" href="./css/document.css">
<LINK rel="stylesheet" type="text/css" href="./templates/css/document.css">
</HEAD>
[/code]
[code html;gutter:false]
<!-- b.htm -->
<HEAD>
<LINK rel="stylesheet" type="text/css" href="./css/document.css">
<LINK rel="stylesheet" type="text/css" href="./my/css/document.css">
</HEAD>
[/code]
두 개의 템플릿 파일로부터 생성된 HTML 문서를 보면 아래와 같습니다.
[code html;gutter:false]
<HEAD>
<LINK rel="stylesheet" type="text/css" href="./css/document.css">
<LINK rel="stylesheet" type="text/css" href="./templates/css/document.css">
<LINK rel="stylesheet" type="text/css" href="./my/css/document.css">
</HEAD>
[/code]
<HEAD>~</HEAD> 내에 있는 TITLE 태그 처리 문제
만약 템플릿 파일마다 TITLE 태그가 중복되어 나타난다면 먼저 define되는 템플릿 파일에 있는 TITLE 태그에게 우선권이 있습니다.
[code html;gutter:false]
<!-- a.htm -->
<HEAD>
<TITLE>핍클래스홈(phpCLASS HOME)</TITLE>
</HEAD>
[/code]
[code html;gutter:false]
<!-- b.htm -->
<HEAD>
<TITLE>나의 집(My Home)</TITLE>
</HEAD>
[/code]
아래는 템플릿 파일 a.htm을 먼저 define처리한 경우입니다.
[code php;gutter:false]
$tpl->define(
array(
'a' => 'a.htm',
'b' => 'b.htm'
)
);
[/code]
이러한 경우에 생성된 HTML 문서를 보면 아래와 같습니다.
[code html;gutter:false]
<HEAD>
<TITLE>핍클래스홈(phpCLASS HOME)</TITLE>
</HEAD>
[/code]
반대로 템플릿 파일 b.htm을 먼저 define처리한 경우입니다.
[code php;gutter:false]
$tpl->define(
array(
'b' => 'b.htm',
'a' => 'a.htm'
)
);
[/code]
이러한 경우에 생성된 HTML 문서를 보면 아래와 같습니다.
<BODY> 태그 속성값 처리 문제
만약 템플릿 파일마다 BODY 태그이 속성값이 다르다면 어떻게 처리되는지 알아보겠습니다. 중복된 속성이 있다면 먼저 define되는 템플릿 파일에게 우선권이 있습니다. 중복되지 않는다면 각각의 템플릿 파일마다 존재하는 BODY 태그의 속성이 모두 유효하게 처리됩니다.
[code html;gutter:false]
<!-- a.htm -->
<BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
.
.
. 이하 생략
.
.
[/code]
[code html;gutter:false]
<!-- b.htm -->
<BODY topmargin="2" leftmargin="2" marginwidth="0" marginheight="0" bgcolor="#5555">
.
.
. 이하 생략
.
.
[/code]
아래는 템플릿 파일 a.htm을 먼저 define처리한 경우입니다.
[code php;gutter:false]
define(
array(
'a' => 'a.htm',
'b' => 'b.htm'
)
);
[/code]
이러한 경우에 생성된 HTML 문서를 보면 아래와 같습니다.
[code html;gutter:false]
<BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" bgcolor="#5555">
.
.
. 이하 생략
.
.
[/code]
반대로 템플릿 파일 b.htm을 먼저 define처리한 경우입니다.
[code php;gutter:false]
define(
array(
'b' => 'b.htm',
'a' => 'a.htm'
)
);
[/code]
이러한 경우에 생성된 HTML 문서를 보면 아래와 같습니다.
[code html;gutter:false]
<BODY topmargin="2" leftmargin="2" marginwidth="0" marginheight="0" bgcolor="#5555">
.
.
. 이하 생략
.
.
[/code]
