추천수 2방의 힘을 등에 업고 2회를 시작합니다.  무관심하면 얼렁뚱땅 묻어 버릴려고 했는데 말이죠.
여하튼 자신 없는데 힘들게 됐습니다;;

예고했듯이 이번에는


1. 레이아웃 관리자 페이지에서 타이틀 작성, 홈페이지주소 작성, 로고이미지 업로드를 할 수 있게
   (1) info.xml파일을 수정하는 방법과
   (2) layout.html에서 이를 불러오는 방법


2. 레이아웃에서
   (1) 이미지 사용법,
   (2) 자바스크립트와 css파일의 사용법


에 대해서 알아 보겠습니다.

역시 앞전에 했던대로 존칭은 생략하고, 윈도우즈에서 작성해서 ftp로 업로드->덮어쓰기 하시면 됩니다.


 

1. info.xml - 레이아웃 관리페이지 - layout.html의 삼각관계를 정리하자.

우리는 지난 시간에 chochobo레이아웃이라는 상자를 하나 만들었다. 갑자기 왠 상자;;;
이 상자를 layout.html에서 사용할 수 있게 레이아웃에게 택배를 보낸다고 생각하자.
앞시간에는 우리가 만들었다는 것을 나타내기 위해 상자 겉에 chochobo(초초보레이아웃)이라는 제목과 함께 
제작자의 이름과 홈페이지주소, 날짜 등의 내용을 담은 라벨을 붙였다.
택배 보낼 때의 가장 중요한 것 중 하나인 내용물 기재... 이제 layout.html 에게 보낼 내용물 리스트를 작성해보자.
상자를 등장 시킨 이유는 뒤에 나온다.

info.xml (요넘이 바코드를 포함한 라벨이라 할 수 있겠다) 파일을 에디터로 열어보자.
본격적으로 상자 안에 들어갈 내용물의 리스트를 작성해보는 거다.

 

<?xml version="1.0" encoding="utf-8"?>
<layout version="0.1">
    <title xml:lang="ko">초초보 레이아웃</title>
    <author email_address="제작자이메일주소" link="제작자홈페이지주소" date="제작일">
        <name xml:lang="ko">제작자이름</name>
        <description xml:lang="ko">
            초초보의 레이아웃입니다.
        </description>
    </author>
    <extra_vars>
    </extra_vars>
    <menus>
        <menu name="main_menu" default="true">
            <title xml:lang="ko">메인 메뉴</title>
            <maxdepth>3</maxdepth>
        </menu>
    </menus>
</layout>


내용물 리스트를 작성하기 위해서는

</autor>
<menus>

사이에 (10번째 줄 쯤이다)

<extra_vars>
</extra_vars>


라고 입력한다. 내용물 리스트를 작성하겠다는 영역의 표시!이다.  내용물 리스트는 모두 <extra_vars>와</extra_vars> 사이에 들어가야 한다.



귀찮게시리.. 시작<extra_vars>과 끝</extra_vars>을 하나의 오탈자 없이 정확히 알려줘야 한다.
그럼, 왜 하필이면 그곳이냐? 맨아래 </menus> </layout>사이에 넣어도 된다. 하지만....
택배 회사의 양식에 이의를 제기하는가? 그럼 택배기사 짜증내고 인상 구긴다.
더욱이 마음대로 작성했다가는 배송거부 사태로까지 이어질 수 있다.
사설이 길지만.. 양식이 중요하다는 거다.
각 항목별로 들여쓰기 하는 이유는 수정, 관리하기 편하게 보기 좋으라고 하는거다;;



이제 <extra_vars> </extra_vars> 사이에 home_title 이라는 첫번째 리스트의 내용물을 작성해보자.


 

<?xml version="1.0" encoding="utf-8"?>
<layout version="0.1">
    <title xml:lang="ko">초초보 레이아웃</title>
    <author email_address="제작자이메일주소" link="제작자홈페이지주소" date="제작일">
        <name xml:lang="ko">제작자이름</name>
        <description xml:lang="ko">
            초초보의 레이아웃입니다.
        </description>
    </author>
    <extra_vars>
        <var name="home_title" type="text">
            <title xml:lang="ko">홈 페이지 타이틀</title>
            <description xml:lang="ko">홈 페이지 타이틀을 입력해 주세요.</description>
        </var>
    </extra_vars>
    <menus>
        <menu name="main_menu" default="true">
            <title xml:lang="ko">메인 메뉴</title>
            <maxdepth>3</maxdepth>
        </menu>
    </menus>
</layout>


추가된 내용을 살짝 살펴보면..
var(내용물의 리스트를 연다) name(내용물이름, home_title이라는 내용물이야~) type(핸드폰,A4용지 등의 내용물형태. 문장(text)형식이야~ 깨질 일은 없겠네;)
title(관리자페이지에서 타이틀 입력란임을 알려준다. 홈페이지타이틀 란이야~)
description(요넘은 시도때도 없이 나와서 이게 뭔지 설명해준다. 친절한 description씨~)
/vars(내용물 리스트를 닫는다. )


이제 여러분이 직접 home_url이라는 내용물을 추가해보자.
이넘은 home_url이라는 꼬리표를 단 text형식의 내용물로 내 홈페이지의 주소를 담을 것이다.
작성했으면 모범 답안과 비교해보자.


 


상자가 좀 무겁지만, 채운김에 하나더 채워보자. 이번에는 로고이미지를 내용물로 추가해보자.
logo_image라는 꼬리표를 단 image형식의 내용물로 홈페이지 로고 이미지를 담을 것이다.
아;; 고민된다. 이미지...이미지... type이 text가 아니라 이미지인데... type="image" 로 하면 되나?
빙고~ 작성했으면 모범 답안과 비교해보자.


 

여기까지 라벨 작업은 끝이다. 가만히 자신이 작성한 info.xml 내용을 들여다 보자. 그렇다... 아무리 봐도 멋지다...;;

이제 작성한 info.xml 파일을 자신의 계정 zbxe/layouts/chochobo/conf/ 디렉토리 밑에 업로드 한다. 과감히 덮어쓰기한다...


수정한 내용을 보기 위해 zbxe 관리자로 로그인 한다.
변경된 내용을 바로 확인하기 위해서는 앞전에 만들었던 초초보레이아웃도전 레이아웃은 레이아웃 리스트에서 과감히 삭제한다.
다시 앞전에 배운대로 "초초보레이아웃도전" 이란 이름으로 새로운 레이아웃을 생성해보자.
두둥~ 타이틀, 홈피주소,로고이미지 입력폼이 모두 보이는가? 그렇다면 성공이다.
이제 홈피타이틀, 홈피주소를 작성하고 로고이미지를 적당히 하나 고른 후 업로드 하고 저장하자.



지금까지 작업을 정리해보자. 또 상자 이야기다.

라벨: chochobo(초초보레이아웃)
=====================================
= home_title : 초초보레이아웃입니다    =   chochobo는 우리가 붙인 상자 이름이고,
= home_url   : http://자신의홈피주소   =   택배회사(zbxe)에서 이 상자에 붙인 이름은 $layout_info 이다. 기억하자.
= logo_image : chochobo_logo.gif      =   레이아웃layout의 정보infomation을 담고 있다는 뜻이겠다..
= main_menu  : 초초보메뉴                =
=====================================


이제 오늘의 하이라이트 layout.html 파일을 작성해보자.

일단 저번 시간에 작성한 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 태그다. 아래와 같이 수정 해보자.

{$layout_info->home_title} <br />
{$layout_info->home_url}   <br />
<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 src="{$layout_info->logo_image}"></a>


이렇게 하면? 타이틀이나 로고이미지를 클릭하면 홈페이지 홈으로 가게 하는 소스가 완성됐다. 종합해보면...


 

{$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 />
<a href="{$layout_info->home_url}"><img src="{$layout_info->logo_image}"></a>


위 내용을 layout.html 파일에 저장하고 자신의 계정 zbxe/layouts/chochobo/ 디렉토리에 업로드 하자. 역시 덮어쓰기 한다.

변경된 내용 바로 확인하기 -> zbxe 관리자로 로그인한 후 아까 생성했던 레이아웃을 리스트에서 삭제하고 다시 생성하자.

이제 브라우저로 zbxe를 열어서 확인하면...두둥~이다.


 

내용이 너무 길고 재미 없어서 질리시죠? 당초 약속했던


2. 레이아웃에서
   (1) 이미지 사용법,
   (2) 자바스크립트와 css파일의 사용법


위 내용은 2-2회에 올리겠습니다.


* 작성 후 읽어보니 내용이 허섭의 극치네요.. 궁금한 점은 댓글로 남겨주세요. T.T
 

이 게시물을..