포럼

  2. Support
  3. 포럼

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

2010.12.02 13:38

정찬명

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

이 게시물을
Profile

사람과 사람 사이의 접점을 설계합니다. 

좋아요(+1)
목록
글쓴이 제목 최종 글
SMaker setCookie 함수 제대로 작동하는건가요? [1] 2011.01.13 by 카르마
ForHanbi 지금 레이아웃에서 사용하는 h1 IR기법에 대해 정찬명님께 질문드립니다. [2] 2011.01.13 by ForHanbi
misol 프로젝트 모듈 수정해주세요.. [1] 2011.01.13 by XE Developers
카르마 새로운 템플레이트 문법의 문제 [2] 2011.01.13 by XE Developers
카르마 개발 및 테스트 환경 [2] 2011.01.12 by 현원
SMaker 아직 모바일 기능이 부족하지 않나 생각해봅니다. [6] 2011.01.11 by 트루퍼
misol 언어번역 요청 게시판 괜찮네요 ㅋㅋㅋ  
규지니 모듈개발 문서는 없는지요? [4] 2011.01.11 by 규지니
zero 에고.. 이제 서비스 안정화되었습니다. [12] 2011.01.11 by 999
씨지 API 확장에서 module.xml 는 어떻게 상속시키나요? [4] 2011.01.10 by 씨지
현원 오호 이런 곳이 있었군요  
Garon 약간의 아이디어~ [3] 2011.01.08 by kantsoft
러키군 개발뿐만 아니라 프로젝트와 관련된 메뉴얼도 필요합니다. [2] 2011.01.08 by 999
라르게덴 이슈트래커가 토론으로 이어질 수 있도록 되었으면 좋겠습니다.  
fsfsdas 왜 아직 아무런 글이 없을까요? [2] 2011.01.08 by zero
Treasurej 좋습니다.^^ [1] 2011.01.08 by zero
정찬명 XE Core 1.4.4 새 템플릿 문법을 소개합니다. 간결+판독. [9] 2011.01.05 by likesam.myid.net
정찬명 XE 새 템플릿 문법으로 원하는 위치(head, body)에 JS 선언하기. [4] 2011.01.05 by likesam.myid.net
행복한고니 XEED 수정 사항 테스트 부탁드립니다. [29] 2011.01.02 by 유샤인
sol xe.1.4.4.2.changed.tgz 파일 재업로드 하였습니다. [6] 2010.12.01 by 바라트
태그 쓰기