티스토리 툴바

Daum
Tistory
로그인

LK BLOG

'웹 프로그래밍/XE 자료'에 해당되는 글 3건

  1. 2011/01/27 Core 1.4.4 새 템플릿문법
  2. 2010/12/02 XE 새 템플릿 문법으로 원하는 위치(head, body)에 JS 선언하기 (1)
  3. 2010/11/10 XE 외부페이지에서 회원정보 가져오기

Core 1.4.4 새 템플릿문법

웹 프로그래밍/XE 자료 2011/01/27 11:04

XE Core 1.4.4 버전에 새로 추가된 새 템플릿 문법을 소개 합니다.
새 템플릿 문법의 장점은 다음과 같습니다.

  • 간결 - 스킨의 소스 코드를 약 절반 정도로 간결하게 줄여서 용량을 절약할 수 있습니다.
  • 판독 - HTML 태그에 기반하여 문법을 작성하기 때문에 조건문과 반복문의 시작-끝을 찾기가 훨씬 수월해 졌습니다. 코드 짝맞춰 접기/펼치기 기능을 지원하는 편집기에서 매우 편리하고 오류를 빨리 찾을 수 있습니다.

한편 새 템플릿 문법은 XE Core 1.4.4 미만 버전에는 적용되지 않기 때문에 하위 호환성을 유지해야 할 필요가 있는 경우 사용하지 않습니다. 기존의 템플릿 문법이 여전히 유효 하기 때문에 계속해서 사용할 수 있습니다.

조건문
조건문설명
<block cond="조건식">
  <p>Welcome XE!</p>
</block>		 조건식이 참이면 포함된 내용을 출력
<p cond="조건식">
  Welcome XE!
</p>		 조건식이 참이면 <p> 요소와 함께 포함된 내용을 출력
<p attr="value"|cond="조건식">
  Welcome XE!
</p>		 <p> 요소는 무조건 출력하는데 조건식이 참이면 attr="value" 속성과 값을 출력


반복문
반복문설명
<block loop="변수명=>$val">
  <tr>...</tr>
</block>		 $key값 없이 <tr>...</tr> 반복
<tr loop="변수명=>$val">...</tr> $key값 없이 <tr>...</tr> 반복
<block loop="변수명=>$key, $val">
  <tr>...</tr>
</block>		 $key값 포함 <tr>...</tr> 반복
<tr loop="변수명=>$key,$val">...</tr> $key값 포함 <tr>...</tr> 반복
<block loop="$i=0;$i<100;$i++">
  <tr>...</tr>
</block>		 초기값 0부터 시작하여 <tr>...</tr> 100회 반복
<tr loop="$i=0;$i<100;$i++">...</tr> 초기값 0부터 시작하여 <tr>...</tr> 100회 반복


include문
include문설명
<include target="header.html" /> header.html 파일을 포함(include)


load문
load문설명
<load target="xe.css" /> CSS 파일을 <head>에 포함
<load target="xe.js" /> JS 파일을 <head>에 포함
<load target="xe.js" type=”body” /> JS 파일을 문서 <body>에 포함 (1.4.4.2 이후)
<load target="xe.xml" /> XML JS 필터를 <head>에 포함
<load target="xe.xml" type=”body” /> XML JS 필터를 <body>에 포함 (1.4.4.2 이후)


unload문
unload문설명
<unload target="xe.css" /> 경로가 일치하는 CSS 파일을 제외
<unload target="xe.js" /> 경로가 일치하는 JS 파일을 제외
<unload target="xe.xml" /> 경로가 일치하는 XML JS 필터를 제외
저작자 표시 비영리 동일 조건 변경 허락

'웹 프로그래밍 > XE 자료' 카테고리의 다른 글

Core 1.4.4 새 템플릿문법  (0) 2011/01/27
XE 새 템플릿 문법으로 원하는 위치(head, body)에 JS 선언하기  (1) 2010/12/02
XE 외부페이지에서 회원정보 가져오기  (0) 2010/11/10
Posted by LK's
트랙백 보내기 댓글 쓰기

XE 새 템플릿 문법으로 원하는 위치(head, body)에 JS 선언하기

웹 프로그래밍/XE 자료 2010/12/02 14:20
XE 스킨 제작 메뉴얼을 만들고 있습니다. 마침 업데이트된 XE core 1.4.4.2 버전에 새로 추가된 관련 내용을 빨리 알려드리는 것이 좋을것 같아서 다음과 같이 공유합니다. XE core 1.4.4.2 버전으로 업데이트 하면 JS 파일을 head 또는 body중 원하는 위치에 삽입할 수 있습니다.


자바스크립트의 선언 위치는 HTML 문서의 <head>…</head> 또는 <body>…</body> 안쪽이어야 하며 이 밖의 위치에 선언하는 경우 HTML 문법 오류가 됩니다. HTML 문법이 허용하지 않는 위치에 자바스크립트 코드를 작성하면 표준에 따라 엄격하게 구현된 브라우저에서는 자바스크립트를 해석하지 못할 수도 있습니다. 자바스크립트 코드를 HTML 문서에 직접 포함하는 방법도 있지만 별도의 *.js 파일로 분리하여 HTML 문서에서 불러오는 방법도 있습니다.

자바스크립트를 <head>…</head>에서 불러오기

별도의 자바스크립트 파일을 <head>...</head>에서 불러오는 XE 템플릿 문법은 다음과 같습니다.

<!--%import("xxx.js”)--> 
또는
<load target=”xxx.js” />

실행 결과는 다음과 같습니다.

<head>
    <script type=”text/javascript” scr=”xxx.js”></script>
</head>

웹 브라우저가 화면 표시를 끝내기 전에 자바스크립트로 사용자 화면의 일부 콘텐츠를 보여주거나 감추는 동작을 실행한다면 자바스크립트 코드는 HTML 문서의 <head>…</head> 위치에 포함하는 것이 좋습니다. 이런 경우 자바스크립트 코드를 <body>…</body>에 포함했을 때 자바스크립트가 HTML보다 늦게 해석이 되면서 일시적으로 깨진 화면이 보일 수 있습니다. <head>…</head>에 포함된 자바스크립트는 HTML 문서보다 먼저 해석이 되지만 HTML 문서의 로딩이 완료된 이후에 실행하도록 코드를 작성해야 합니다.

자바스크립트를 <body>…</body>에서 불러오기

자바스크립트를 <body>...</body>에서 불러오는 XE 템플릿 문법은 다음과 같습니다.

<load target="xxx.js" type="body" />

<load /> 요소와 type 속성은 XE core 1.4.4.2 버전부터 추가되었기 때문에 XE core 1.4.4.2 이전 버전에서는 JS 파일을 문서의 <body>...</body> 안쪽에서 불러올 수 없습니다.

실행 결과는 다음과 같습니다. <body>...</body> 요소가 닫히기 직전에 불러오기가 선언됩니다.

<body>
...
<script type=”text/javascript” scr=”xxx.js”></script>
</body>

자바스크립트가 HTML 문서를 로딩하는 시점에 화면 표시를 위한 어떤 동작을 실행하지 않는다면 HTML 문서의 <body>…</body> 요소에 포함하되 가장 아래쪽에 선언하는 것이 좋습니다. 웹 브라우저는 HTML 코드와 자바스크립트 코드를 동시에 해석하지 않고 작성된 순서대로 해석하기 때문에 자바스크립트 코드를 나중에 해석하도록 하면 HTML 문서를 화면에 표시하는 속도가 빨라집니다.

참고

  • <load /> 요소는 HTML 표준 요소가 아니라 XE core 1.4.4 버전에 새로 추가된 가상의 요소 입니다. <load /> 요소는 CSS/JS 파일을 HTML 문서에서 불러오는 역할을 하며 다음과 같은 속성과 값을 가질 수 있습니다.
  • media=”all | aural | braille | embossed | handheld | print | projection | screen | tty | tv” – CSS 파일의 대상이 되는 미디어를 선택하여 지정할 수 있습니다. 쉼표를 이용하여 여러 개의 값을 지정할 수 있습니다. 기본 값은 all 으로써 생략하는 경우 media=”all” 입니다.
  • targetie=”IE 6 | IE 7 | IE8 | ...” – IE 조건부 주석을 사용하여 IE 브라우저 범위 안에서 CSS/JS 적용 브라우저를 선택할 수 있습니다. 기본 값은 빈 값으로써 적용 안 함 입니다.
  • index=”integer” – CSS/JS 참조 선언의 위치를 변경할 수 있습니다. 값은 양의 정수와 음의 정수를 사용할 수 있습니다. 양의 정수는 현재 위치보다 나중에 선언되고 음의 정수는 현재 위치보다 먼저 선언 됩니다. 기본 값은 빈 값으로써 선언 순서를 변경하지 않으며 기본 값으로 두는 경우 다른 CSS 파일보다 늦게 선언 됩니다.
  • type=”head | body” – JS 참조 선언 위치를 문서의 <head>...</head>로 할 것인지 <body>...</body>로 할 것인지 결정할 수 있습니다. 기본 값은 head 로써 생략하는 경우 JS 파일은 문서 <head>...</head>에 포함됩니다.
저작자 표시 비영리 동일 조건 변경 허락

'웹 프로그래밍 > XE 자료' 카테고리의 다른 글

Core 1.4.4 새 템플릿문법  (0) 2011/01/27
XE 새 템플릿 문법으로 원하는 위치(head, body)에 JS 선언하기  (1) 2010/12/02
XE 외부페이지에서 회원정보 가져오기  (0) 2010/11/10
Posted by LK's
트랙백 보내기 댓글 1개

XE 외부페이지에서 회원정보 가져오기

웹 프로그래밍/XE 자료 2010/11/10 14:48


XE 페이지모듈이 아닌 외부페이지 내에서
로그인한 사용자의 정보를 가져와야할때가 있지요..
이럴때 아래처럼 사용하면 됩니다. 

>>  외부페이지 설정 


위와같이 외부페이지를 하나 추가했을때 아래와같은 방식으로 구해올수 있습니다.

{@
    $logged_info = Context::get('logged_info');
    sprintf("회원님의 닉네임은 [%s] 입니다.",$logged_info->nick_name);
}

저작자 표시 비영리 동일 조건 변경 허락

'웹 프로그래밍 > XE 자료' 카테고리의 다른 글

Core 1.4.4 새 템플릿문법  (0) 2011/01/27
XE 새 템플릿 문법으로 원하는 위치(head, body)에 JS 선언하기  (1) 2010/12/02
XE 외부페이지에서 회원정보 가져오기  (0) 2010/11/10
Posted by LK's
트랙백 보내기 댓글 쓰기
<< 이전페이지 1 다음페이지 >>