- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
XE 응용 개발 XE 새 템플릿 문법으로 원하는 위치(head, body)에 JS 선언하기.
2017.06.18 15:44
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>에 포함됩니다.
[출처] https://www.xpressengine.com/forum/19302357
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
