그누 웹표준용 css_js.lib.php <head>와</head>사이로 모으자! 정보
게시판 그누 웹표준용 css_js.lib.php <head>와</head>사이로 모으자!첨부파일
본문
HTML5 웹표준에는 <head>와 </head> 사이에 css와 js 를 넣도록 권장하고 있습니다.
하지만 그누보드 스킨구조상 <head>와 </head>사이에 자바스크립트를 모으고 css를 모으는건 무리가 있습니다.
그래서 그누보드 특성을 그대로 유지하면서 javascript와 css를 <head>와 </head>사이에 깔끔하게 모아서 넣을 방법을 고안했고
아래 방식을 체택하게 되었습니다.
알고리즘을 설명드리자면 먼저 각 skin파일마다 css와 js 를 style.css, skin.js 라는 이름하에 스킨폴더 디렉토리로 다 모아 놓습니다. 그리고 이렇게 만들어진 style.css 와 skin.js 는 css_js.lib.php 를 통해 함수로 불러냅니다.
적용 방법은 아래와 같습니다.
1.
"<?=$g4[path]?>/lib/" 디렉토리로 첨부한 css_js.lib.php 를 넣는다.
2.
'./_head.php'파일에 아래와 같이 css_js.lib.php를 인클루드 한다.
순서는 항상 head.php 위에 위치해야한다.
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
include_once("$g4[path]/css_js.lib.php");
include_once("$g4[path]/head.php");
?>
3.
head.sub.php 파일에 아래와 같이 </head> 바로위에 사용할 스킨의 css와 js를 불러드린다.
=======================================================================================
<head>
..........생략
<?=css("latest","basic")?>
<?=css("latest","basic2")?>
<?=css("outlogin","basic")?>
<?=js("latest","basic")?>
<?=js("latest","basic2")?>
<?=js("outlogin","basic")?>
</head>
=======================================================================================
이제 페이지를 열게되면 자동으로 skin의 css와 js가 불러읽히는 모습을 확인할수있다.
중구난방하던 게시판 css 와 js의 중복과 난립이 방지될수있따.
<head>
.....
<link rel='stylesheet' href='/skin/latest/basic/style.css' type='text/css'>
<link rel='stylesheet' href='/skin/latest/basic/style.css' type='text/css'>
<link rel='stylesheet' href='/skin/outlogin/basic/style.css' type='text/css'>
<script type='text/javascript' src='/latest/dddd/basic/skin.js'></script>
<script type='text/javascript' src='/latest/dddd/basic/skin.js'></script>
<script type='text/javascript' src='/outlogin/dddd/basic/skin.js'></script>
</head>
이라고 열리고 css 와 js 가 정상동작하는것을 볼 수있습니다.
사용상 주의 사항!
모든 스킨 디렉토리에는 style.css 로 css가 정리되어야 하며,
skin.js 에 자바스크립트가 정리되어 있어야합니다.
즉 해당 기법을 적용하고 나서부터 스킨을 새롭게 개발해서 맞추어야합니다.
이제 js와 css 가 중간중간에 갑작스럽게 튀어나오는 일을 막아보자구요
하지만 그누보드 스킨구조상 <head>와 </head>사이에 자바스크립트를 모으고 css를 모으는건 무리가 있습니다.
그래서 그누보드 특성을 그대로 유지하면서 javascript와 css를 <head>와 </head>사이에 깔끔하게 모아서 넣을 방법을 고안했고
아래 방식을 체택하게 되었습니다.
알고리즘을 설명드리자면 먼저 각 skin파일마다 css와 js 를 style.css, skin.js 라는 이름하에 스킨폴더 디렉토리로 다 모아 놓습니다. 그리고 이렇게 만들어진 style.css 와 skin.js 는 css_js.lib.php 를 통해 함수로 불러냅니다.
적용 방법은 아래와 같습니다.
1.
"<?=$g4[path]?>/lib/" 디렉토리로 첨부한 css_js.lib.php 를 넣는다.
2.
'./_head.php'파일에 아래와 같이 css_js.lib.php를 인클루드 한다.
순서는 항상 head.php 위에 위치해야한다.
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
include_once("$g4[path]/css_js.lib.php");
include_once("$g4[path]/head.php");
?>
3.
head.sub.php 파일에 아래와 같이 </head> 바로위에 사용할 스킨의 css와 js를 불러드린다.
=======================================================================================
<head>
..........생략
<?=css("latest","basic")?>
<?=css("latest","basic2")?>
<?=css("outlogin","basic")?>
<?=js("latest","basic")?>
<?=js("latest","basic2")?>
<?=js("outlogin","basic")?>
</head>
=======================================================================================
이제 페이지를 열게되면 자동으로 skin의 css와 js가 불러읽히는 모습을 확인할수있다.
중구난방하던 게시판 css 와 js의 중복과 난립이 방지될수있따.
<head>
.....
<link rel='stylesheet' href='/skin/latest/basic/style.css' type='text/css'>
<link rel='stylesheet' href='/skin/latest/basic/style.css' type='text/css'>
<link rel='stylesheet' href='/skin/outlogin/basic/style.css' type='text/css'>
<script type='text/javascript' src='/latest/dddd/basic/skin.js'></script>
<script type='text/javascript' src='/latest/dddd/basic/skin.js'></script>
<script type='text/javascript' src='/outlogin/dddd/basic/skin.js'></script>
</head>
이라고 열리고 css 와 js 가 정상동작하는것을 볼 수있습니다.
사용상 주의 사항!
모든 스킨 디렉토리에는 style.css 로 css가 정리되어야 하며,
skin.js 에 자바스크립트가 정리되어 있어야합니다.
즉 해당 기법을 적용하고 나서부터 스킨을 새롭게 개발해서 맞추어야합니다.
이제 js와 css 가 중간중간에 갑작스럽게 튀어나오는 일을 막아보자구요
추천
1
1
댓글 11개
이거 사용하셔도 js 파일과 css 파일이 없을경우 그냥 무시하고 실행됩니다.
그러니 안심하고 다운받으셔서 넣으시면됩니다.
나중에 html5 표준 통과시킬떄만 응용하면되요
그러니 안심하고 다운받으셔서 넣으시면됩니다.
나중에 html5 표준 통과시킬떄만 응용하면되요
감사합니다.
수고하셨어요..^^
수고하셨어요..^^
js 는 head 와 body 둘 중 어느 곳에 있어도 상관 없습니다.
오히려 웹 사이트 최적화 기법에서는 js 를 가장 마지막에 불러오라고 권하고 있습니다.
스티브 사우더스가 짓고 오라일리가 펴낸 '웹 사이트 최적화 기법' 제 6장을 참조해 보시기 권합니다.
오히려 웹 사이트 최적화 기법에서는 js 를 가장 마지막에 불러오라고 권하고 있습니다.
스티브 사우더스가 짓고 오라일리가 펴낸 '웹 사이트 최적화 기법' 제 6장을 참조해 보시기 권합니다.
<?js("스킨종류","스킨명");?> 이것을 마지막에다가 붙이면 되지 않을까요
아그리고 어쩔수 없는 부분이 조금 있네요. CSS가 PHP랑 연동되야 하는 부분이 존재하더라구요. 차라리 해더부분에 붙일수잇도록 cs.jss.php 란걸해서 안에 스타일시트하고 js 하고 php 처리 같이 넣도록 하는건 어떨까요
아그리고 어쩔수 없는 부분이 조금 있네요. CSS가 PHP랑 연동되야 하는 부분이 존재하더라구요. 차라리 해더부분에 붙일수잇도록 cs.jss.php 란걸해서 안에 스타일시트하고 js 하고 php 처리 같이 넣도록 하는건 어떨까요
basic 외엔 인식못하는건가요??
오직 베이직 스킨 스타일만 인식하는건가요??
그리고 js 가 위배 걸린다면 해당 코드에.. //<![CDATA[ //]]> 만 해줘도 통과되니까..
굳이 복잡하게 할필욘 없을것 같네요.
오직 베이직 스킨 스타일만 인식하는건가요??
그리고 js 가 위배 걸린다면 해당 코드에.. //<![CDATA[ //]]> 만 해줘도 통과되니까..
굳이 복잡하게 할필욘 없을것 같네요.
아니요 다른 스킨도 다 적용되요~ 스킨종류, 스킨명이라서
latest/rolllatest 뭐이렇게 ~되요
latest/rolllatest 뭐이렇게 ~되요
좋은 생각이긴 하나 일률적으로 적용하기가...
본문 뒤쪽에서 실행 되어야야할 스크립트도 있을 것이고
js 화일이 페이지 처음 부분에 나오므로 해서 생기는 안 좋은 점이 있습니다
뭐냐면 js 화일을 인식 후 본문 페이지를 로딩하므로 사용자에게 접속이 느리다는 느낌을 줄 수 있다는 것입니다
따라서 js 화일은 페이지 뒤쪽에 위치하는 것이 좋다고 합니다
본문 뒤쪽에서 실행 되어야야할 스크립트도 있을 것이고
js 화일이 페이지 처음 부분에 나오므로 해서 생기는 안 좋은 점이 있습니다
뭐냐면 js 화일을 인식 후 본문 페이지를 로딩하므로 사용자에게 접속이 느리다는 느낌을 줄 수 있다는 것입니다
따라서 js 화일은 페이지 뒤쪽에 위치하는 것이 좋다고 합니다
예 맞아요~
<?=js("","")?>의 경우 그래서 페이지 뒷쪽으로 보내봣습니다.
그리고 그 php 연동단점 개선을 위해서 skin.js.php 로 해서 php 연동하게끔 만들어서 요즘 쓰고잇습니다.^^ 페이지 개선을 위한 약간의 번거로움이 들긴들겟지만 하면 보람잇어요 ~
<?=js("","")?>의 경우 그래서 페이지 뒷쪽으로 보내봣습니다.
그리고 그 php 연동단점 개선을 위해서 skin.js.php 로 해서 php 연동하게끔 만들어서 요즘 쓰고잇습니다.^^ 페이지 개선을 위한 약간의 번거로움이 들긴들겟지만 하면 보람잇어요 ~
왜 자바스크립트가 헤드사이에 있어야 되는가?
왜 중간에 끼우면 안되는가?
왜 뒤로 가는게 좋은가?
요??
저는 그냥 필요하면 중간에 집어 넣습니다만...
왜 중간에 끼우면 안되는가?
왜 뒤로 가는게 좋은가?
요??
저는 그냥 필요하면 중간에 집어 넣습니다만...
자바스크립트 실행은 모든 페이지가 다운로드 완료되고 부터입니다.
따라서, 마지막에 자바스크립트를 다운받게하기 위해서 밑에다가 두는데
페이지의 구성요소를 먼저 화면에 뿌리고 기능을 실행시키기위해서입니다.
실제 속도는 같으나 시각적인 체감속도가 다르다고합니다.
따라서, 마지막에 자바스크립트를 다운받게하기 위해서 밑에다가 두는데
페이지의 구성요소를 먼저 화면에 뿌리고 기능을 실행시키기위해서입니다.
실제 속도는 같으나 시각적인 체감속도가 다르다고합니다.
감사합니다. 추천
