ZBXE 레이아웃 만들기 강좌
페이지 정보
작성자 서방님 댓글 0건 조회 106회 작성일 11-07-07 19:52본문
- 기본 구성요소 작성
윈도우즈에서 일단 디렉토리와 파일을 생성한 후 ftp를 이용해 계정에 업로드 하도록한다.
간단히 요약하자면 디렉토리 2개 파일 2개만 생성하면 레이아웃이 제작된다.
- automedia 디렉토리를 만들고 layout.html 파일을 추가한다.
- automedia 디렉토리 밑에 conf 디렉토리를 만들고 info.xml 파일을 추가한다.- 꼭 필요한 디렉토리 생성 : 위와 같다.
- 꼭 필요한 파일 생성
빈 문서에 아래의 내용을 복사해서 입력하고 automedia/conf 디렉토리 밑에 info.xml 으로 저장한다. utf-8 형식으로 저장한다. info.xml은 레이아웃의 환경설정 파일이라고 생각하면 된다. 레이아웃에 대한 정보를 갖고 있으며 관리자 페이지에서 레이아웃에서 사용할 타이틀을 설정하고 연결할 메뉴를 지정할 수 있게 해주고 로고이미지도 올리게 할 수 있다.
[#M_ more.. | less.. |<?xml version="1.0" encoding="utf-8"?>
<layout version="0.1">
<title xml:lang="ko">Automedia 레이아웃</title>
<author email_address="제작자이메일주소" link="제작자홈페이지주소" date="제작일">
<name xml:lang="ko">제작자이름</name>
<description xml:lang="ko">
Automeida 레이아웃입니다.
</description>
</author>
<menus>
<menu name="main_menu" default="true">
<title xml:lang="ko">메인 메뉴</title>
<maxdepth>3</maxdepth>
</menu>
</menus>
</layout>
대충 살펴보면,
<layout version="0.1">은 제작하는 레이아웃의 버전이고,
<title xml:lang="ko">에는 레이아웃 제목을 적어주고,
<author>의 제작자 이메일, 홈피주소, 제작일은 자신에 맞게 수정하면 되고,
<name>은 제작자이름,
<description>은 레이아웃에 대한 설명부분이다.
한글로 된 부분을 내용에 맞게 내키는 대로 적으면 된다.
_M#]
다시 빈 문서 하나를 불러와서 아래의 내용을 입력하고 automedia 디렉토리에 layout.html 파일명으로 저장한다. 파일형식은 utf-8로 저장하자. layout.html 파일에는 헤더와 푸터를 합친 <body></body> 사이의 내용이 들어간다. layout.html에는 <html><head><title><body> 등 기본적인 태그를 사용하지 않는데 이는 zbxe에서 기본적으로 제공 해주기 때문이다.
위에 기본적인 태그는 이제 손아프게 적지 않아도 된다. <body></body> 사이에 들어가는 내용만 작성하면 되는 것이다.
[#M_ more.. | less.. |<h1>Automedia의 레이아웃입니다.</h1>
위 한 줄 넣으시라. 여기까지 했으면 가장 기본적인 레이아웃 제작은 끝이다._M#] - 계정의 zbxe/layouts/ 디렉토리에 automedia 디렉토리를 ftp로 업로드한다.
이제 xe를 이용해서 Automedia 레이아웃을 화면에 나타나게 해보자 - Automedia 레이아웃 적용하기
- xe로 사이트를 구축하는 순서
- 사이트 구상
"홈, 자유게시판" 이렇게 두 개의 메뉴를 가진 사이트를 만든다. 처음 접속하거나 홈을 눌렀을 때 공지사항 게시판을 보여주겠다. - 게시판 생성
공지사항, 자유게시판에 연결할 두 개의 게시판을 생성한다.
공지사항 게시판을 생성할 때는 "선택하시면 사이트에 mid값 없이 접속하였을 경우 기본으로 보여줍니다."에 꼭 체크하자. - 메뉴 생성
"Automedia"로 메뉴를 하나 생성하고 홈, 자유게시판 딸랑 두 개의 메뉴를 생성한 후 공지사항 게시판, 자유게시판을 각각의 메뉴에 연결한다. - 레이아웃 생성
레이아웃 이름 : "Automedia(Automedia 레이아웃)"를 선택하고,
제목 : "Automedia 홈페이지" 정도로 작성하고 다음 버튼을 클릭한다.
-> 메인 메뉴(main_menu) 선택하는 곳에서는 앞서 만든 "Automedia"메뉴를 선택한다.
"체크를 하시면 연결된 모든 메뉴의 모듈 레이아웃을 일괄 변경합니다."에 꼭 체크하고 마지막으로 저장 버튼을 눌러주자. - xe로 만든 사이트에 접속
사이트에 접속해서 "Automedia 레이아웃입니다."라는 문구가 화면상에 뜨면 레이아웃 제작에 성공한 것이다.
이제부터는 layout.html의 내용만 바꾸면 그 내용이 모두 화면에 출력된다. - info.xml = 레이아웃 관리페이지 - layout.html의 삼각관계를 정리하자.
우리는 "automedia 레이아웃"이라는 상자를 하나 만들었다. 이 상자를 layout.html에서 사용할 수 있게 레이아웃에게 택배를 보낸다고 생각하자.
우리가 만들었다는 것을 나타내기 위해 상자 겉에 Automedia(Automedia레이아웃)이라는 제목과 함께 제작자의 이름과 홈페이지 주소, 날짜 등의 내용을 담은 라벨을 붙였다.
택배를 보낼 때의 가장 중요한 것 중 하나인 내용물 기재... 이제 layout.html 에게 보낼 내용물 리스트를 작성해보자.
info.xml(요넘이 바코드를 포함한 라벨이라 할 수 있겠다) 파일을 에디터로 열어보자. 본격적으로 상자 안에 들어갈 내용물의 리스트를 작성해보는 거다.
[#M_ more.. | less.. |<?xml version="1.0" encoding="utf-8"?>
<layout version="0.1">
<title xml:lang="ko">Automedia 레이아웃</title>
<author email_address="제작자이메일주소" link="제작자홈페이지주소" date="제작일">
<name xml:lang="ko">제작자이름</name>
<description xml:lang="ko">
Automedia 레이아웃입니다.
</description>
</author>
<extra_vars>
</extra_vars>
<menus>
<menu name="main_menu" default="true">
<title xml:lang="ko">메인 메뉴</title>
<maxdepth>3</maxdepth>
</menu>
</menus>
</layout>_M#]
내용물 리스트를 작성하기 위해서는
</autor>
<menus>
사이에 (10번째 줄 쯤이다)
<extra_vars>
</extra_vars>
라고 입력한다. 내용물 리스트를 작성하겠다는 영역의 표시이다. 내용물 리스트는 모두 <extra_vars>와 </extra_vars> 사이에 들어가야 한다.
왜 하필이면 그곳이냐? 맨아래 </menus> </layout> 사이에 넣어도 된다. 하지만 양식이 중요하기에 그렇게 쓰기로 한다.
이제 <extra_vars> </extra_vars> 사이에 home_title 이라는 첫 번째 리스트의 내용물을 작성해 보자.
[#M_ more.. | less.. |<extra_vars>
<var name="home_title" type="text">
<title xml:lang="ko">홈 페이지 타이틀</title>
<description xml:lang="ko">홈 페이지 타이틀을 입력해 주세요.</description>
</var>
<var name="home_url" type="text">
<title xml:lang="ko">홈 페이지 주소</title>
<description xml:lang="ko">홈 페이지 주소를 입력해 주세요.</description>
</var>
<var name="logo_image" type="image">
<title xml:lang="ko">홈 페이지 로고 이미지</title>
<description xml:lang="ko">홈 페이지 로고 이미지를 업로드 해주세요.</description>
</var>
</extra_vars>_M#]
추가된 내용을 살펴보면..
var(내용물의 리스트를 연다) name(내용물이름, home_title이라는 내용물) type(핸드폰, A4용지 등의 내용물 형태, 문장(text)형식)
title(관리자페이지에서 타이틀 입력란임을 알려준다. 홈페이지 타이틀란)
description(설명란)
/vars(내용물 리스트를 닫는다)
여기까지 라벨 작업은 끝이다.
이제 작성한 info.xml 파일을 자신의 계정 zbxe/layouts/automedai/conf/ 디렉토리 밑에 업로드한다.
수정한 내용을 보기 위해 zbxe 관리자로 로그인한다. 변경된 내용을 바로 확인하기 위해서는 앞전에 만들었던 Automedia 레이아웃은 레이아웃 리스트에서 과감히 삭제한다. 다시 앞전에 배운대로 "Automedia 레이아웃" 이란 이름으로 새로운 레이아웃을 생성해보자.
타이틀, 홈피주소, 로고이미지 입력폼이 모두 보이는가? 그렇다면 성공이다.
이제 홈피타이틀, 홈피주소를 작성하고 로고이미지를 적당히 하나 고른 후 업로드하고 저장하자.
layout.thml 파일을 작성해보자. 일단 이전에 작성한 layout.html 내용을 모두 삭제하자. layout.html을 작성할 때는 택배회사에서 붙인 상자명을 사용해야 한다. 사용하는 방법을 말로 쓰면 다음과 같다.
택배회사에서 $layout_info 이라고 이름 붙인 상자에서 home_title 이라는 내용물을 꺼낸다.
이를 도식화 해보자.
$Layout_info->home_title
home_url과 logo_image도 꺼내올 수 있겠는가? 그렇다.
$layout_info->home_url, $layout_info->logo_image
하지만, 이넘들을 layout.html에 사용할 때도 역시나 귀찮은 '양식'이 있다.
{} 속에 꺼내온 넘들을 넣어 써야한다.
{$layout_info->home_title} {$layout_info->home_url} {$layout_info->logo_image}
layout.html 파일에 아래와 같이 작성하자.
{$layout_info->home_title} <br />
{$layout_info->home_url} <br />
{$layout_info->logo_image} <br />
잠깐.. 로고 이미지는 이미지인데 위 소스대로 {$layout_info->logo_image} 만 써도 이미지가 출력되는건가? 아니다. {$layout_info->logo_image}는 이미지 경로 정보만 담고 있다. 그렇다면 지금 필요한것은 뭐? img 태그다. 아래와 같이 수정 해보자.
<img src="{$layout_info->logo_image}"> <br />
보너스로 하나 더..
<a href="{$layout_info->home_url}">{$layout_info->home_title}</a>
<a href="{$layout_info->home_url}"><img scr="{$layout_info->logo_image}"></a>
이렇게 하면 타이틀이나 로고 이미지를 클릭하면 홈페이지 홈으로 가게 하는 소스가 완성됐다. 종합해보면....
[#M_ more.. | less.. |{$layout_info->home_title} <br />
{$layout_info->home_url} <br />
{$layout_info->logo_image} <br /><br />{$layout_info->home_title} <br />
{$layout_info->home_url} <br />
<img src="{$layout_info->logo_image}"> <br /><br /><a href="{$layout_info->home_url}">{$layout_info->home_title}</a> <br />
_M#]
<a href="{$layout_info->home_url}"><img src="{$layout_info->logo_image}"></a>
위 내용을 layout.html 파일에 저장하고 자신의 계정 zbxe/layouts/automedia/ 디렉토리에 업로드 하자. 역시 덮어쓰기한다.
변경된 내용 바로 확인하기 -> zbxe 관리자로 로그인한 후 아까 생성했던 레이아웃을 리스트에서 삭제하고 다시 생성하자. - zbxe에서 사용하는 템플릿에 대한 내용
{$home_url} 이런게 뭔지 왜 양식이 이러한지 답답하실텐데 두편의 글로 조금이나마 이해하시면 좋겠습니다.
zbxe는 php코드를 스킨 파일에 직접 사용했던 제로보드4나, smarty라는 템플릿엔진을 사용한 zb5와는 달리 자체적인 템플릿을 이용합니다.
템플릿이란 일반적으로 로직과 디자인을 분리하기 위해 거론됩니다. 로직이란 데이터 저장소에서 데이터를 가져와서 가공하거나 데이터 저장소에 데이터를 입력하는 일련의 프로그램적인 내용을 의미하고 디자인은 이 정리된 데이터를 보여주기 위한 것이라고 생각하시면 됩니다.
제로보드4에서도 로직과 디자인을 분리했지만 디자인을 표시하기 위해서 php 스크립트 파일을 그래도 이용하였습니다. 이는 다양한 확장성을 위한 방법이였고 이로 인해 매우 강력하고 손쉬운 제작이 가능했습니다.
하지만 디자인을 표시하기 위한 파일에 php 코드가 실행가능하게 되어 여러 보안 문제도 발생하고 또 잘못된 코드로 인하여 문제가 발생하기도 하였습니다.
스킨 디자인을 할 경우에도 디자이너가 php코드까지 알아야 하는 문제가 있었습니다.
템플릿을 이용한다고 하여도 디자이너가 zbxe의 템플릿 문법을 알아야 합니다. 제로보드4의 스킨에 비해서 zbxe의 템플릿 적용은 번거롭게 보이기만 할 수도 있습니다.
하지만 템플릿의 사용은 로직과 디자인을 거의 완전히 분리하기에 명확한 설계가 가능하고 또 물론 스킨 제작자의 잘못된 혹은 알 수 없는 php코드 삽입으로 인한 보안 문제등이 전혀 발생할 여지가 없게 됩니다. - ZBXE 템플릿 문법
- 변수의 출력과 이용
[#M_ more.. | less.. |레이아웃에 변수를 출력하기 위해서 {$변수명} 을 이용한다.
php와 비슷하게 이름 앞에 $ 를 붙이면 변수를 의미하게 된다.
if, foreach등의 문법 안에서는 그냥 $변수명 을 하면 되지만 출력을 위해서는 앞 뒤로 {, } 로 감싸주면 된다.
<div>{$home_title}</div>_M#] - if 문
[#M_ more.. | less.. |변수의 값에 따른 제어를 할 수가 있다.
php와 동일하게 <!--@if 조건-->, <!--@elseif 조건-->, <!--@else--> 등의 문법을 이용할 수 있으며 끝나는 부분에서는 꼭 <!--@end-->를 사용해 주어야 한다.
<!--@if($is_logged)-->
로그인 되어 있네요.
<!--@else-->
로그인 안 되어 있네요.
<!--@end-->
위와 같이 사용할 수 있다.
물론 조건문 안에서는 '(' 와 ')' 를 이용한 조건문 묶기와 and, or 또는 &&, || 의 사용이 가능하다_M#] - foreach 문
[#M_ more.. | less.. |배열 또는 object list로 되어 있는 변수, 예를 들어 게시물 목록과 같은 변수를 loop를 돌면서 출력하기 위해 사용된다.
활용 예는 다음과 같다.
<!--@foreach($변수 as $key => $val)-->
{$val->title} <br />
<!--@end-->_M#] - 템플릿 파일 내에서 변수를 선언
[#M_ more.. | less.. |{@ $변수명 = "1234" }
$변수명에 1234라는 값을 선언한다.
복잡해지는 코드를 간략히 하기 위해 사용하기도 한다._M#] - include 문
[#M_ more.. | less.. |<!--#include(파일명)-->
<!--#include('파일명')-->
<!--#include("파일명")-->
include된 파일에서도 layout.html에 사용되는 변수를 아무 설정없이 사용이 가능합니다.
위 세가지 다 가능하네요.._M#] - 주석 처리
[#M_ more.. | less.. |<!--주석내용-->
html 주석코드를 그대로 사용한다._M#] - 예약어
[#M_ more.. | less.. |zbxe에서 <!--@, <!--#, <!--%, {$.. , {@.. 등과 같이 주석비슷하게 생긴 것들은 예약어 이며 기능을 가지고 있습니다.
<!--@ 예약어는
<!--@if(조건문)--><!--@end--><!--@foreach()--><!--@end-->
등과 같이 if문이나 foreach문에 사용된다.<!--# 예약어는
<!--#include(test.html)-->와 같이 인클루드 문에 사용된다.<!--% 예약어는
<!--%import("./a.css")--><!--%import("./a.js")-->
등과 같이 css, js 파일을 저 예약어로 지정하시면 <head>..</head>사이에 링크를 자동으로 걸게 됩니다.{$.. 예약어는
{@.. 예약어는
{$content}
와 같이 변수 출력할 때 사용된다.
{@ $a = 123 }
와 같이 변수값을 정의할 때 사용된다._M#] - 레이아웃에서 이미지, 자바스크립트, css파일의 사용법
- 이미지 사용법
automedia 레이아웃에서 이미지를 사용하려면- zbxe/layouts/automedia 밑에 images 디렉토를 생성합니다.
- 만든 images 디렉토리에 사용할 이미지를 올립니다.
- layout.html에서 사용하려면
<img src="./images/이미지파일명"/>
위와 같은 이미지 경로를 이용하시면 됩니다. - 주의할 점은, layout.html에 "http://~"로 시작하는 이미지 경로를 사용하시면 안됩니다. <img src="http://~"/>이런 식의 이미지 경로는 사용하지 마세요.
layout.html 파일에서 사용할 이미지는 모두 images 디렉토리에 저장한 후 "./images/이미지파일명" 경로를 이용해 사용하세요. - js 파일 사용법
- zbxe/layouts/automedia/ 밑에 js 디렉토리를 생성합니다.
- 만든 js 디렉토리에 사용할 js 파일을 올립니다.
- layout.html 에서 사용하려면 layout.html 위쪽에 아래와 같이 작성해 줍니다.
<!--%import("js파일의경로")-->
<!--%import()-->는 js파일이나 css파일을 불러와야 할 때 사용하는 양식입니다.
automedia 디렉토리 밑에 js 디렉토리를 생성한 다음, 빈문서를 하나 불러와 아래 내용을 입력하고 js 디렉토리 밑에 default.js 파일명으로 저장하세요.(지금 페이지를 즐겨찾기로 지정해주는 자바 스크립트 내용입니다.)
function addfavorites(favoriteurl, favoritetitle){
if (document.all)
window.external.AddFavorite(favoriteurl,favoritetitle) }
참고 : js 파일에서 images 디렉토리에 있는 이미지의 경로를 사용할 경우에는 automedia/images/logo.gif 처럼 해당 레이아웃에서부터 시작하는 경로를 사용하셔야 합니다. - css 파일 사용법
- zbxe/layouts/automedia/ 밑에 css 디렉토리를 생성합니다.
- 만든 css 디렉토리에 사용할 css 파일을 올립니다.
- layout.html에서 사용하려면 layout.html 위쪽에 아래와 같이 작성해 줍니다.
<!--%import("css파일의 경로")-->
automedia 디렉토리 밑에 css 디렉토리를 생성한 다음, 빈문서를 하나 불러와 아래 내용을 입력하고 css 디렉토리 밑에 main.css 파일명으로 저장하세요.(body의 배경색을 흰색으로 하고, 배경그림은 ../images/tile.gif로 하며, 배경그림을 가로로 반복하라는 스타일지정입니다.)
body{ background:#FFFFFF url(../images/tile.gif) repeat-x; }
그전에 태그 하나 소개합니다.
div 태그입니다. 영역 분할 하는데 쓰이는 태그입니다. 요즘은 레이아웃 잡는데 table 태그를 쓰지 않고 이 div태그를 이용합니다.
<div>내용</div>
의 형식으로 쓰시면 됩니다. 각 div에 id나 class 명을 지정할 수 있고 css파일에서 각각의 id와 class의 스타일을 지정할 수 있습니다. div 태그는 p 태그의 단락 구분 속성을 갖고 있어서 화면에 보여주기도 좋습니다.
[#M_ more.. | less.. |
<!--%import("js/default.js")-->
<!-- css 파일을 가져옵니다. -->
<!--%import("css/main.css")-->
<div>
<!-- 홈타이틀 -->
{$layout_info->home_title}
</div>
<div>
<!-- 로고이미지, 클릭하면 홈으로 이동 -->
<a href="{$layout_info->home_url}"><img src="{$layout_info->logo_image}"></a>
</div>
<div>
<!-- 이미지를 사용해보자. img 태그를 쓸 때, alt 값 지정하는 것을 잊지 맙시다. -->
<img src="./images/logo.gif" alt="logo이미지" />
</div>
<div>
<!-- chobo.js 에 저장했던 즐겨찾기 스크립트를 이용해 봅시다. -->
<a href="javascript:addfavorites('{$layout_info->home_url}','{$layout_info->title}')">즐겨찾기에 추가</a>
</div>_M#]
이렇게 작성하고 자신의 계정 zbxe/layouts/automedia/ 디렉토리 밑에 layout.html 파일을 올려서 덮어쓰기 합니다.
그럼 바뀐 페이지의 소스 보기를 해보세요. 마우스 오른쪽 버튼->소스보기 혹은 단축키(ie에서는 alt v + c, 파폭에서는 alt v + o)를 이용해서 볼 수 있습니다.
layout.html 상단에
<!--%import("js/default.js")-->
<!--%import("css/main.css")-->
이 두줄을 추가했는데 소스 내용의 <head>와 </head>사이에 잘 찾아보면
<script type="text/javascript" src="/zbxe/layouts/automedia/js/default.js"></script>
<link rel="stylesheet" href="/zbxe/layouts/automedai/css/main.css" type="text/css" />
이 들어가 있는 것을 알 수 있습니다. zbxe의 템플릿이 알아서 추가 해준 것이죠.
- 메뉴를 설정하고 활용하는 방법
들어가기 전에
[#M_ more.. | less.. |혹시나 해서 if문에 대한 간단한 예제 하나 들어보고 가겠습니다.
<!--@if($layout_info->title)-->홈타이틀이 등록 되어 있습니다.<!--@end-->
무슨 뜻일까요. $layout_info->title 의 내용이 있으면 "홈타이틀이 등록 되어 있습니다." 라는 문구가 출력됩니다.
<!--@if(!$layout_info->title)-->홈타이틀이 등록 되어 있지 않습니다.<!--@end-->
$layout_info->title 의 내용이 없으면 "홈타이틀이 등록 되어 있지 않습니다." 라는 문구가 출력됩니다.
하나로 합쳐 볼까요?
<!--@if($layout_info->title)-->
홈타이틀이 등록 되어 있습니다.
홈타이틀은 "{$layout_info->title}" 입니다.
<!--@else-->
홈타이틀이 등록 되어 있지 않습니다.
<!--@end-->
하나 더 예를 들겠습니다.
{@ $a = "10" }
{@ $b = "5" }
$a = {$a}
$b = {$b}
$a + $b = {$a + $b}
$a - $b = {$a - $b}
$a * $b = {$a * $b}
$a / $b = {$a / $b}
<!--@if($a > $b)-->
{@ $c = $a - $b }
$a가 $b보다 {$c} 만큼 큽니다.
<!--@elseif($a == $b)-->
$a와 $b는 같습니다.
<!--@else-->
{@ $c = $b - $a }
$b가 $a보다 {$c} 만큼 큽니다.
<!--@end-->
여기까지 하고 이제 메뉴를 다뤄 보도록 하겠습니다. 직접 작성해 보시면 쉽습니다._M#]
zbxe 레이아웃에서 메뉴 사용절차.- automedia 레이아웃의 info.xml 에서 사용할 메뉴의 정보를 작성.
- 이미지 사용법
- 변수의 출력과 이용
- 사이트 구상
- xe로 사이트를 구축하는 순서
댓글목록
등록된 댓글이 없습니다.
