XE Template Syntax
XE 템플릿 스킨의 HTML 문서 안으로 외부 파일을 불러와 포함시키기 위한 문법이다. 파일 포함 문법에서는 불러 들이고자 하는 외부 파일의 경로 설정을 상대 경로로 표시한다. 즉 HTML 문서의 자신을 기준으로 상대적인 위치의 경로를 이용한다. HTML 문서가 있는 같은 폴더 안의 default.css 파일을 포함한다면 import("default.css")가 된다. 만약 하위 폴더 JS 안에 있는 파일을 포함한다면 import("js/default.js")가 된다. 스킨의 HTML 문서 안에서 작성된 파일 포함 구문은 XE 코어가 자신의 완성된 HTML 문서의 <head>..</head> 영역 안으로 가지고 올라가서 원래의 스크립트 문으로 변환한다. 따라서 포함 여부를 확인하려면 소스보기를 이용해 <head> 블록 안에서 <link rel="stylesheet" type="text/css" href="default.css" />와 같이 목표(Target)가 되는 파일의 이름이 있는지 확인하도록 한다.(import/load 해당)
1. include 문
스킨을 제작할 때 여러 페이지에 걸쳐 반복되는 콘텐츠 블록이 있으면 별도의 파일로 분할하여 관리하는 것이 편리하다. 하나의 파일만 수정하면 여러 페이지에 걸쳐 한 번에 적용할 수 있기 때문이다.
[작성 문법]
<!--#include("header.html")-->
<include target="header.html" />
<include /> 요소는 HTML 표준 요소가 아니지만, HTML 태그의 형식을 빌려 쓰고 있다. include는 별도의 파일을 현재 페이지로 불러오는 PHP문의 include() 명령어와 유사한데 target 속성을 이용해 특정 목적파일을 포함시키는 방법이 다르다.
[변환 형식]
<?php
print('변환된 파일의 객체 내용');
<?>
포함시키려는 파일의 내용은 TemplateHandler.class.php 함수 라이브러리를 이용해 객체($oTemplate)로 생성된 후 다시 컴파일(compile) 되어 print() 된다. 따라서 아래 import문 처럼 파일을 포함한다는 스크립트를 추가하는 것이 아니고 목적파일의 내용을 가져와 그 (code)를 포함시키는 것이다. PHP문의 include() 함수와 그 기능이 동일하다.
2. import 문
HTML 주석(<!-- -->) 태그와 퍼센트(%) 기호를 혼합하여 외부 파일(CSS, JS, XML JS 필터)을 불러(import/포함)온다. 이때 CSS, JS 파일은 HTML <head> 요소 안에 포함시키지만 XML JS 필터 파일은 <body> 요소가 끝나기 직전에 포함시킨다.(XE 코어 1.4.4 버전 이후 무조건)
- XML JS 필터 : XML 형식으로 입력 항목을 정의해 두고 폼을 전송할 때 유효성 검사를 자동으로 수행하는 기능 파일, 유효성 검사는 XML 기반으로 자동으로 변환된 자바스크립트가 수행하므로, 사용자는 복잡한 자바스크립트를 작성할 필요가 없다. XML JS 필터는 유효성 검사를 통과한 폼 데이터를 어떤 모듈의 어떤 명령어로 보낼 것인지 정하는 기능도 있다. XE 코어 1.4.4 이전에는 다른 파일과 동일하게 <head> 요소 안에 출력되었지만 1.4.4 이후에는 무조건 <body> 요소가 끝나기 직전에 출력된다.
[작성 문법]
<!--%import(“default.css")--> // head 요소 영역에 포함(CSS 파일) <!--%import(“default.js")--> // head 요소 영역에 포함(JS 파일) <!--%import(“xe.xml")--> // <body> 영역 최하단에 포함(XML JS 파일)
[변환 형식]
<head> <link rel="stylesheet" href="default.css" type="text/css" charset="UTF-8" media="all" /> <script type="text/javascript" src="default.js"></script> </head> <body> ... <script type="text/javascript" src="xe.js"> // <body> 영역 최하단에 출력 </body>
3. load 문
XE가 미리 약속해 둔 가상 태그(<load />)를 이용해 작성할 경우 을 추가할 수 있다. load 태그는 HTML에 없는 태그이기 때문에 XE만 사용하는 가상 태그라고 부르는 것이다. 변환 형식의 결과는 import문과 동일하다.
[작성 문법]
<load target="default.css" />
<load target="default.js" />
<load target=“xe.xml" /> // <body> 영역 최하단에 출력하는 것은 동일하다.
① CSS에서의 [media] 속성
<load target="default.css" media="print" />
CSS 파일의 대상이 되는 미디어를 선택하여 지정하게 되면 해당 출력 장치에 대응하여 작동한다. media 속성은 쉼표를 사용하여 여러 개를 지정할 수 있고 없는 경우 기본값은 media="all" 이 되며 다음과 같은 결과를 얻는다.(※ media 속성 값은 [스킨 제작 메뉴얼] p.33 참고)
<link rel="stylesheet" href="default.css" type="text/css" charset="UTF-8" media="print" />
② JS에서의 [type] 속성 : 참조 선언 위치
<load target="default.js" type="body" />
JS 파일을 body 요소 안에 불러오는 경우 type="body" 속성을 추가한다.(기본값은 <head> 요소에 포함된다.) 결과값은 다음과 같다.
<body>
...
<script type="text/javascript" src="default.js">
</body>
③ 공통 [targetie] 속성 : IE 조건부 주석의 사용
targetie 속성을 사용하면 외부 파일의 참조를 IE의 특정 브라우저 버전에서만 해석할 수 있도록 조건부 주석으로 출력한다. 속성의 이름을 보면 알 수 있듯이 적용을 목표로 하는 타겟(Target)이 익스플로러(IE)이고 을 함께 한다.(Target + IE = targetie) ※ 기본값은 빈 값으로 "적용 안 함"이다.
66
IE 조건부 주석을 사용하는 경우 IE6 버전의 브라우저는 주석으로 처리하지 않고 해석하여 적용한다. 처리 결과는 다음과 같다.
66
④ 공통 [index] 속성 : 참조 선언 순서 변경
<load target=“default.css" index="-1" />
<load target=“default.js" index="-1" />
index 속성을 사용하면 외부 파일의 참조 선언 순서를 변경할 수 있다. index 속성의 값은 양의 정수 또는 음의 정수를 사용할 수 있으며, 음의 정수를 사용하면 더 빨리 선언할 수 있고, 양의 정수를 사용하면 더 늦게 선언할 수 있다. index="-1" 값을 지정하면 다른 CSS 파일보다 한 줄 빠른 위치에서 선언된다. CSS 파일은 동일한 명령이 충돌하는 경우 나중에 선언된 값이 우선순위를 갖기 때문에 우선순위를 높게 두어야 하는 경우 나중에 선언하는 것이 좋다.
※ unload 문
unload문은 load 문과 반대로 경로가 일치하는 CSS, JS, XML JS 필터의 파일 포함을 제외시키는 명령어이다. 하지만 사용되는 예가 없고 사용할 일도 거의 없는것 같다...^^
* Recent Comment
안녕하세용2021-09-06 이문제는 해상도 문제인데 .... 제가 모니터를 4k 해상도로 쓰고 있습니다. 4000 x 4000 이상이다 보니 해상도가 작은 모니터로 보면 백그라운드 이미지가 커서 최하단으로 스크롤 할 경우 끝인데도 계속 스크롤 되는 현상이 생깁니다.2021-09-05 덕분에 오류를 고쳤네요 . 감사합니다. ㅎㅎ2021-09-04 네 그 현상은 저두 인지 하였습니다. 특정사진에서만 그런걸로 아는데 .. 그 사진만 찾아 삭제할 예정입니다. 어떤 사진인지 몰라서 .. ㅜㅜ 찾는 중이에요...2021-09-04 업데이트 되면서 그 기능이 안되는거로 쿨룩 ㅡㅡ;;2021-08-18