어김없이 얘기하지만.....이건 noo9ya.com을 만들기 위해서 시작한 일이고.
참고 문서가 없기 때문에 XE기본 레이아웃 스킨인 xe_official_v2 레이아웃 스킨을 해부하여 제작합니다.
XE 공식사이트에서 다운로드 가능한 xe_official_v2 레이아웃 폴더 구조를 봅세다.
파일 구조를 보니 별반 다를게 없지만..뭔가가 조금 다르다.
그렇다 filter라는 폴더와 images가 아닌 img폴더가 있다.
전에 쓴 글에서 봤듯이..폴더는 이름을 맘대로 해도 되고 안만들어 된다.
다만 파일 성격에 맞추어 몰아 넣으면 관리하기 편하기 때문에 저렇게 폴더를 구분지어 만들어 둔다.
자, 기본은 여기까지 슬슬 layout파일을 뜯어 보자.
layout파일의 최상단이다.
꼭 알아야 할 부분을 볼드로 표시했다..ㅡ/.,ㅡ;;
<!-- %import("./css/layout.css")-->
자..보자 css폴더안의 layout.css를 layout.html파일안에 삽입하는 것이다..ㅡ/.,ㅡ;;
와..참 쉽다......ㅡ/.,ㅡ;;
일반 html안에서 css나 js파일을 불러 오려면
<script type="text/javascript" src="js파일 경로"></script>
<link rel="" src="css파일 경로" type="text/css"> 뭐 요롷게 들어가야 하지 않나?ㅋㅋ
여튼 길다 ㅡ/.,ㅡ;;그리고 경로를 따로 설정해줘야 하고 ㅡ/.,ㅡ;;
근데 layout.html파일은 위에 처럼 하면 땡이다.
파일 링크 경로는 레이아웃 폴더 layout.html파일을 기준으로 경로를 지정해주면 된다.
그럼 그림파일 삽입은 ㅡ/.,ㅡ?
당연히 <img src="./img/그림파일.gif"> 이렇게 될것이다.
layout.html파일을 기준으로 img폴더안에 이미지를 링크만 걸면 되는 것이다.
그리고 한가지 더.
html파일의 기본 구조는 아래와 같다.
하지만 XE의 layout.html파일은 깔끔하게 위에 모든걸 생략하고
<body>안에 들어가는 태그만 넣으면 된다.
그리고 CSS나 JS파일의 삽입은 제일 위의 규칙대로 넣으면 된다.(물론 아무곳에다가) ㅋㅋ
자.....이제 noo9ya.com에 사용할 layout.html파일을 작성해보자.
참고 문서가 없기 때문에 XE기본 레이아웃 스킨인 xe_official_v2 레이아웃 스킨을 해부하여 제작합니다.
XE 공식사이트에서 다운로드 가능한 xe_official_v2 레이아웃 폴더 구조를 봅세다.
파일 구조를 보니 별반 다를게 없지만..뭔가가 조금 다르다.
그렇다 filter라는 폴더와 images가 아닌 img폴더가 있다.
전에 쓴 글에서 봤듯이..폴더는 이름을 맘대로 해도 되고 안만들어 된다.
다만 파일 성격에 맞추어 몰아 넣으면 관리하기 편하기 때문에 저렇게 폴더를 구분지어 만들어 둔다.
자, 기본은 여기까지 슬슬 layout파일을 뜯어 보자.
layout파일의 최상단이다.
<!--// import layout css file -->
<!--%import("./css/layout.css")-->
<!--%import("./css/layout@official.css")-->
<!--// import content css-->
<!--%import("./css/content.css")-->
<!--// import lang css file -->
{@ $_lang_code = substr($lang_type,0,2) }
<!--@if(!in_array($_lang_code,array('en','jp','zh','ko')))-->{@$_lang_code='en'}<!--@end-->
{@Context::addBodyClass($_lang_code)}
<!--// colorset -->
{@$_colorset_list = array('black','blue','sky','cyan','purple','orange')}
<!--@if(!in_array($layout_info->colorset,$_colorset_list))-->{@$layout_info->colorset='black'}<!--@end-->
<!--// layout background iamge -->
<!--@if($layout_info->layout_background=='Y')-->{@Context::addBodyClass('gradBG'.$layout_info->colorset)}<!--@end-->
<!--// layout type -->
<!--@if($layout_info->layout_type != 'c')-->{@$layout_info->layout_type = 'ce'}<!--@end-->
<!--@if(!$layout_info->logo_url)-->{@$layout_info->logo_url=getSiteUrl($site_module_info->domain)}<!--@end-->
<!--// menu depth -->
{@$_menu_depth = 2}
<!--%import("./css/layout.css")-->
<!--%import("./css/layout@official.css")-->
<!--// import content css-->
<!--%import("./css/content.css")-->
<!--// import lang css file -->
{@ $_lang_code = substr($lang_type,0,2) }
<!--@if(!in_array($_lang_code,array('en','jp','zh','ko')))-->{@$_lang_code='en'}<!--@end-->
{@Context::addBodyClass($_lang_code)}
<!--// colorset -->
{@$_colorset_list = array('black','blue','sky','cyan','purple','orange')}
<!--@if(!in_array($layout_info->colorset,$_colorset_list))-->{@$layout_info->colorset='black'}<!--@end-->
<!--// layout background iamge -->
<!--@if($layout_info->layout_background=='Y')-->{@Context::addBodyClass('gradBG'.$layout_info->colorset)}<!--@end-->
<!--// layout type -->
<!--@if($layout_info->layout_type != 'c')-->{@$layout_info->layout_type = 'ce'}<!--@end-->
<!--@if(!$layout_info->logo_url)-->{@$layout_info->logo_url=getSiteUrl($site_module_info->domain)}<!--@end-->
<!--// menu depth -->
{@$_menu_depth = 2}
꼭 알아야 할 부분을 볼드로 표시했다..ㅡ/.,ㅡ;;
<!-- %import("./css/layout.css")-->
자..보자 css폴더안의 layout.css를 layout.html파일안에 삽입하는 것이다..ㅡ/.,ㅡ;;
와..참 쉽다......ㅡ/.,ㅡ;;
일반 html안에서 css나 js파일을 불러 오려면
<script type="text/javascript" src="js파일 경로"></script>
<link rel="" src="css파일 경로" type="text/css"> 뭐 요롷게 들어가야 하지 않나?ㅋㅋ
여튼 길다 ㅡ/.,ㅡ;;그리고 경로를 따로 설정해줘야 하고 ㅡ/.,ㅡ;;
근데 layout.html파일은 위에 처럼 하면 땡이다.
파일 링크 경로는 레이아웃 폴더 layout.html파일을 기준으로 경로를 지정해주면 된다.
그럼 그림파일 삽입은 ㅡ/.,ㅡ?
당연히 <img src="./img/그림파일.gif"> 이렇게 될것이다.
layout.html파일을 기준으로 img폴더안에 이미지를 링크만 걸면 되는 것이다.
그리고 한가지 더.
html파일의 기본 구조는 아래와 같다.
<html>
<head></head>
<body>
</body>
</html>
<head></head>
<body>
</body>
</html>
하지만 XE의 layout.html파일은 깔끔하게 위에 모든걸 생략하고
<body>안에 들어가는 태그만 넣으면 된다.
그리고 CSS나 JS파일의 삽입은 제일 위의 규칙대로 넣으면 된다.(물론 아무곳에다가) ㅋㅋ
자.....이제 noo9ya.com에 사용할 layout.html파일을 작성해보자.
<!--%import("./css/layout.css")-->
<!-- warp -->
<div id="warp">
<div id="left">
<div class="navi">메뉴</div>
</div>
<!-- contents start -->
<div id="content">
{$content}
</div>
<div id="copy">copyright ---</div>
</div>
<!-- warp -->
<div id="warp">
<div id="left">
<div class="navi">메뉴</div>
</div>
<!-- contents start -->
<div id="content">
{$content}
</div>
<div id="copy">copyright ---</div>
</div>
끝 ㅡ/.,ㅡ;;;;;;;
해당레이아웃의 css를 호출하였고, XE보드가 호출되는 부분은 {$content}를 입력하면 그 부분에 xe 컨텐츠가 호출된다.
컨텐츠는 다음에 하고 오늘은 layout.html의 기본구조를 작성해 보았다.
해당레이아웃의 css를 호출하였고, XE보드가 호출되는 부분은 {$content}를 입력하면 그 부분에 xe 컨텐츠가 호출된다.
컨텐츠는 다음에 하고 오늘은 layout.html의 기본구조를 작성해 보았다.
이올린에 북마크하기'--- 나름 인터넷 정보 & 솔루션 > 웹정보 :: XE스킨 메뉴얼' 카테고리의 다른 글
| XE Skin 제작 메뉴얼 - 완성된 파일들을 업로드 해보자 (0) | 2009/11/04 |
|---|---|
| XE Skin 제작 메뉴얼 - layout.html 본격적인 제작!! (0) | 2009/11/04 |
| XE Skin 제작 메뉴얼 - conf파일 제작 (0) | 2009/11/04 |
| XE Skin 제작 메뉴얼 - layout 파일 제작!! (0) | 2009/11/03 |
| XE Skin 제작 메뉴얼 - 준비하기!! (0) | 2009/11/03 |
댓글을 달아 주세요