XE코어 파일 포함 include
부운영자
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 필터의 파일 포함을 제외시키는 명령어이다. 하지만 사용되는 예가 없고 사용할 일도 거의 없는것 같다...^^
부운영자
Comment 0
Comment WriteReport
"님의 댓글"
Are you sure you want to report this comment?
* Recent Comment
ㅇㅇㅇㅇ2022-01-21 네 비밀댓글 기본으로 체크 되어 있는 걸 해제해야 하는데 미처 해제 못한곳이 있네요 ㅎㅎ2021-10-22 테스트 2021-04-25 제닉스 ARENA-X FOOT REST 발받침 컴퓨터 게이밍 게임용 의자 판매쇼핑몰 : 네이버 최저가 : 159000 자세히 보기 2021-03-29 안중근 체 마루누리 나눔고딕 나눔 ? ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ2021-03-29