포럼

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>에 포함됩니다.

글쓴이 제목 최종 글
misol API 단순하고 요청 수 제한 없는 주소 줄이기 사이트 하나 알려주시겠어요?.. [2] 2011.01.25 by misol
SMaker r8050 적용 후 Content 위젯에 css가 적용되지 않은채로 나타나네요.  
fsfsdas r8046 XE 설치에러 [2] 2011.01.25 by fsfsdas
SMaker 쿼리 실행 실패 시 정확한 오류를 알려주었으면 좋겠네요.  
fsfsdas 레이아웃의 info.xml을 전면 재작성 도중 궁금증 [5] 2011.01.24 by Hammer
백성찬 r8032 관련 [5] 2011.01.23 by ㅇㅎㅇㅀㅇㅀ
zero 개발 참여에 대해서.. [4] 2011.01.23 by ㅇㅎㅇㅀㅇㅀ
백성찬 r8032 부터 수정 된 db 관련 궁금증 [2] 2011.01.23 by ㅇㅎㅇㅀㅇㅀ
시니시즘 한가지 건의드리고 싶습니다  
포토올/wow XE에 몇가지 기능 개선 건의드립니다. [1] 2011.01.23 by ㅇㅎㅇㅀㅇㅀ
SMaker 정말 에디터 스킨 설정 관련해서 뜯어고치고 싶네요  
ForHanbi 템플릿 문법 이상합니다. 문제점 좀 봐주세요. [1] 2011.01.23 by ㅇㅎㅇㅀㅇㅀ
백성찬 줄바꿈 문제 [7] 2011.01.23 by ㅇㅎㅇㅀㅇㅀ
pjb7687 Admin Page에서 항목을 Submit했을 때 언어가 바뀌는 문제.. [1] 2011.01.23 by ㅇㅎㅇㅀㅇㅀ
라르게덴 XE 대문에 xe팁 대신 개발자포럼을 다는건 어떤가요? [1] 2011.01.23 by ㅇㅎㅇㅀㅇㅀ
sejin7940 XE에 바라는 카테고리(분류) 기능의 추가 사항입니다 ^^;  
백성찬 스마트 폰 사용자 중 언어를 한국어, 영어를 제외한 다른 언어를 사용하시는 분 테스트 부탁합니다. [11] 2011.01.23 by 백성찬
zero 소오강호 사용자 관련.  
토치송 두 gif 파일들 버그가 있네요  
디제이쿠 검색 기능 강화를 요청 드립니다.. [2] 2011.01.20 by sejin7940