03. 스킨 적용

퍼블리싱된 html/ css/ images등에 zbXE만의 코드를 추가함으로서 생명력 있는 스킨으로 만들 수 있습니다.

 

먼저 02. 퍼블리싱 에서 작성된 결과물에 컬러셋을 추가하여 실제 컬러셋까지 적용할 수 있는 스킨을 만들어 보도록 하겠습니다.

이미 있던 orange에 blue, gray, green,  purple 4가지를 더 추가하였습니다.

컬러셋의 효율적인 적용을 위해서 디렉토리 구조를 다음과 같이 하였습니다.

• images

  • blue : 파란색 이미지들
  • gray : 회색 이미지들
  • green : 녹색 이미지들 
  • orange : 오렌지색 이미지들 
  • purple : 자주색 이미지들 

• css

  • layout_blue.css
  • layout_gray.css
  • layout_green.css 
  • layout_orange.css 
  • layout_purple.css  

위에서처럼 이미지와 css파일을 컬러셋의 명칭에 맞게 사용할 수 있도록 분할을 하였습니다.

위와 같이 컬러셋이 적용된 파일은  layout_sample_colorset.zip 을 다운받으시면 확인하실 수 있습니다.

 

이제 layout.html을 수정하기 위해서 다음의 절차로 변경을 합니다.

1. conf/info.xml 파일을 만들기
2. body내의 내용만 추출하기 
3. css파일이나 javascript파일을 연동하기 위한 지시자 추가 
4. 컬러셋등을 포함한 확장 변수 적용하기 

위의 4단계를 거쳐서 스킨을 만들어 보도록 하겠습니다.

 

conf/info.xml 파일을 만들기

conf/info.xml 파일은 스킨 제작자의 정보와 각종 변수등을 손쉽게 적용할 수 있게 해주는 설정파일입니다.

xml형식으로 되어 있지만 어렵지 않은 구조입니다.

 

위의 형식을 지키면서 내용을 추가하면 됩니다.

XML은 <key>value</key> 의 형식으로 구성이 되어 있으며 value에는 < , > , &값이 들어가면 안되는 것만 지켜주시면 문제가 없습니다.

그리고 특이한 형식으로 <key xml:lang="ko">value</key> 와 같이 xml:lang="ko" 가 들어가 있는 것이 있습니다.

이는 다국어 지원을 위한 것으로 ko를 en(영어),zh-CN(중국어),es(스페인어),jp(일본어),ru(러시아어),ge(독일어),fr(프랑스어)등 바꾸어가면서 추가하면 다른 언어를 지원할 수 있게 됩니다.

 

 

먼저 [1] 에 대해서 알아보겠습니다.

1. <title xml:lang="ko">레이아웃 sample</title>
   <description xml:lang="ko">
       레이아웃에 대한 설명
   </description>
   
   <version>버전(0.1)</version>
   <date>작성일자(yyyy-mm-dd)</date>
   <link>피드백 주소</link>
   <license link="라이센스 참조 주소">라이센스</license>
   
   <author email_address="제작자 메일 주소" link="http://제작자 홈페이지/블로그 주소">
       <name xml:lang="ko">작성자이름</name>
   </author>

<title> : 레이아웃의 이름

<version> : 버전

<date> : 제작일자

<link> : 참조 링크, 프로젝트 사이트 링크 등

<license> : 라이센스. link 속성에 라이센스를 참조할 수 있는 주소를 넣을 수 있습니다.

<author> : 제작자의 이름, 메일주소, 사이트 주소를 넣으시면 됩니다.

함께 작업한 분들이 있는 경우 <author>를 2개 이상 입력하시면 됩니다.

 

[2]는 컬러셋 및 확장 변수를 받을 수 있는 곳입니다.

1.      <extra_vars>
           <var name="변수명" type="종류">
               <title xml:lang="ko">표시되는 이름</title>
               <description xml:lang="ko">설명</description>
               <options>
                   <title xml:lang="ko">표시되는 항목 명</title>
                   <value>항목 값</value>
               </options>
           </var>
       </extra_vars>   

 

위와 같은 형식으로 됩니다.

• 변수명
  레이아웃에서 사용할 이름입니다. 영문으로 적어주세요. 

• 종류
  변수를 입력받을 수 있는 종류를 선언할 수 있습니다.
  다음과 같은 종류를 지원합니다.

  •  text : 한줄 문자열
  • textarea : 여러줄 문자열 
  • image : 이미지파일 
  • select : 여러개의 값중 1개 선택 
• 항목
  type="select"로 되어 있을 경우 항목을 지정할 수 있습니다.
  <options>...</options>를 여러개 나열하면 목록에 나타나도록 되어 있습니다. 

 

[3]은  레이아웃과 연동되는 메뉴를 정할 수 있습니다.

메뉴는 1개 이상을 선택할 수 있습니다.

1.      <menus>
           <menu name="main_menu" default="true">
               <title xml:lang="ko">상단 메뉴</title>
               <maxdepth>3</maxdepth>
           </menu>
       </menus>   

 

---

아.. 이 아래 내용 다 사라졌습니다...

아예 등록이 안되었네요.

 

일단 최종 스킨 적용된 파일 첨부하도록 하겠습니다.

layout_sample_final.zip