위젯 스타일 스킨이란?

위젯 스타일 스킨은 위젯의 박스 디자인을 보완하기 위하여 만들어 졌습니다. 하지만 스킨만 있는 것은 아닙니다. 다음과 같은 중요 데이터를 추가할 수 있습니다.

• 위젯 헤더 – 위젯 블럭의 제목 데이터를 추가 할 수 있습니다.
• 목록 더보기 – 위젯 목록의 더보기 링크를 추가할 수 있습니다.

위젯 스타일 스킨은 다음과 같은 디자인 요소를 장식 합니다.

• 위젯 헤더
• 위젯 목록 더보기
• 위젯의 보더
• 위젯의 배경 색 / 글꼴 색

위젯 스타일 스킨 미리 보기.

아래 이미지는 XE에 탑재되어 있는 단순한 콘텐츠 위젯으로 게시물의 최근 데이터를 출력하는 화면 입니다. 아직 위젯 스타일이 적용되기 전의 모습 입니다.

아래 이미지는 XE에 기본으로 탑재되어 있는 위젯 스타일 스킨을 콘텐츠 위젯에 적용한 화면 입니다. 콘텐츠 위젯 목록에 ‘박스 디자인, 헤더, 더보기 링크’가 추가된 모습 입니다. 다양한 위젯 스타일 스킨이 존재 합니다.

위젯 스타일 스킨은 어느 디렉토리에 있나요?

/XE 설치 폴더/widgetstyles/

폴더에 있습니다.

새 위젯 스타일 스킨 만들기.

기존의 위젯 스타일 사본을 활용하는 것도 좋은 방법 이지만 HTML/CSS를 잘 다루시는 분들은 그냥 새로 만드시는 것을 더 권장 드립니다. ^^; 저는 myStyle 이라는 새 위젯 스타일 스킨 디렉토리를 만들었습니다. 물론 디렉토리와 파일만 만들어 놓았고 아직 아무 내용도 없습니다.

반드시 있어야 하는 파일은 다음과 같습니다. css 폴더와 img 폴더는 굳이 만들지 않아도 되지만 관리 편의상 있으면 좋겠지요.

• skin.xml – 위젯 스타일 스킨의 정보 파일 입니다. 스킨 정보와 저작자 정보가 포함되어 있습니다.
• widgetstyle.html – 데이터 출력에 필요한 HTML 마크업 파일 입니다.
• preview.gif – 관리자 화면에 표시되는 스킨 미리보기 이미지 입니다.

스킨 정보 ‘skin.xml’ 편집하기.

다음 코드는 위젯 스타일 스킨을 구성하는데 필요한 최소한의 코드 입니다. 저작자 정보를 입력하고 ‘제목, 더보기 텍스트, 더보기 URL’을 입력받을 수 있습니다. 이 항목은 관리자 모드에서 출력 됩니다.

<?xml version=”1.0″ encoding=”UTF-8″?>
<widgetstyle>
    <title xml:lang=”ko”>마이 위젯 스타일 스킨</title>
    <description xml:lang=”ko”>나만의 위젯 스타일 스킨 입니다.</description>
    <version>0.1</version>
    <date>2009-12-24</date>
    <preview>preview.gif</preview>
    <author email_address=”dece24앳gmail.com” link=”http://naradesign.net/“>
        <name xml:lang=”ko”>Jeong, Chan Myeong</name>
    </author>
    <extra_vars>
    <var name=”ws_title” type=”text”>
        <name xml:lang=”ko”>제목</name>
    </var>
    <var name=”ws_more_text” type=”text”>
        <name xml:lang=”ko”>더보기 텍스트</name>
    </var>
    <var name=”ws_more_url” type=”text”>
        <name xml:lang=”ko”>더보기 URL</name>
    </var>
    </extra_vars>
</widgetstyle>

‘제목, 더보기’에 텍스트 대신 이미지를 등록해 사용하고 싶다면 <extra_vars>…</extra_vars> 사이에 다음 코드를 추가 합니다.

<var name=”ws_title_image” type=”filebox” filter=”jpg,jpeg,gif,png”>
    <name xml:lang=”ko”>제목 이미지</name>
</var>

<var name=”ws_more_image” type=”filebox” filter=”jpg,jpeg,gif,png”>
    <name xml:lang=”ko”>더보기 이미지</name>
</var>

제목 텍스트나 제목 이미지 앞쪽에 아이콘을 등록해서 사용하고 싶다면 <extra_vars>…</extra_vars> 사이에 다음 코드를 추가 합니다.

<var name=”ws_title_icon” type=”filebox” filter=”jpg,jpeg,gif,png”>
    <name xml:lang=”ko”>제목 아이콘</name>
</var>

CSS 이걸 불러? 말어? ‘import/unload’.

위젯 스타일 스킨에 필요한 CSS 파일을 부르거나 또는 XE 코어 모듈이 부르는 레거시 파일(default.css, button.css)을 로드하지 못하도록 할 수 있습니다.

특정 CSS 파일을 위젯에서 사용하려면 widgetstyle.html 파일에 다음과 같이 선언 합니다.

<!–%import(“css/myWidgetStyle.css”)–>

특정 CSS 파일을 게시판에서 불러오지 않으려면 widgetstyle.html 파일에 다음과 같이 선언 합니다.

<!–%unload(“css/unload.css”)–>

‘widgetstyle.html’ 마크업 시작하기.

위젯 스타일 스킨의 HTML 마크업은 정말 단순 합니다. widgetstyle.html 파일에 위젯의 바깥쪽에서 출력할 HTML 코드를 마크업 해주기만 하면 됩니다. 가장 먼저 할 일은 위젯 스킨 스타일의 최상위 division과 위젯 콘텐츠 노출 변수를 넣어 줍니다. 최상위 division에는 다른 위젯 또는 위젯 스타일들과 겹치지 않는 고유한 클래스 이름을 사용해야만 CSS 명령 사이에 충돌이 일어나지 않습니다.

<divFONT-WEIGHT: bold” jQuery1270991009781=”451″>myWidgetStyle”>
    {$widget_content}
</div>

위젯 콘텐츠 노출 변수 {$widget_content} 부분에는 위젯 또는 직접 작성한 데이터가 노출될 것입니다.

‘widgetstyle.html’ 제목 마크업 넣기.

위젯의 제목 단계가 <h2 />가 될지 <h3 />가 될지 모르기 때문에 여러분의 웹 사이트 문서 구조에 적합한 헤딩 단계로 마크업을 하세요. 위로부터 ‘아이콘 이미지가 등장하는 경우 출력, 제목 이미지가 등장하는 경우 출력, 텍스트 제목인 경우 출력’ 하라는 명령이 추가 되었습니다. 스킨에서 지원하지 않기로 결정한 명령줄은 작성하지 않아도 됩니다. 제목이 출력되기를 원하는 위치에 다음과 같이 작성 하세요.

<!–@if($widgetstyle_extar_var->ws_title_image || $widgetstyle_extar_var->ws_title)–>
<h3FONT-WEIGHT: bold” jQuery1270991009781=”462″>myWidgetHeader”>
    <!–@if($widgetstyle_extar_var->ws_title_icon)–>
    <img src=”{$widgetstyle_extar_var->ws_title_icon}” alt=”" />
    <!–@end–>
    <!–@if($widgetstyle_extar_var->ws_title_image)–>
    <img src=”{$widgetstyle_extar_var->ws_title_image}” alt=”{widgetstyle_extar_var->ws_title}” />
    <!–@else–>
    <!–@if($widgetstyle_extar_var->ws_title)–>
    {$widgetstyle_extar_var->ws_title}
    <!–@end–>
    <!–@end–>
</h3>
<!–@end–>

관리자 모드에서 입력한 ‘아이콘, 제목 이미지 또는 제목 텍스트’가 위젯 스타일 스킨으로써 출력될 것입니다.

‘widgetstyle.html’ 더보기 마크업 넣기.

위젯이 게시물의 목록인 경우 ‘더보기 텍스트와 링크’를 출력할 수 있습니다. ‘더보기 텍스트’는 스킨에서 기본 문자를 지정해도 되지만 관리자 모드에서 입력 받을 수 있기 때문에 관리자 모드에서 입력한 ‘더보기 텍스트 및 링크’ 또는 ‘더보기 이미지 및 링크’를 유연하게 받아서 처리하려면 다음과 같은 마크업을 출력하기를 원하는 위치에 추가 합니다. 스킨에서 지원하지 않기로 결정한 명령줄은 작성하지 않아도 됩니다.

위로부터 ‘더보기 URL에 http://를 넣은 경우의 링크, 더보기 URL에 http://를 넣지 않은 경우의 링크, 더보기 이미지를 입력 받은 경우, 더보기 텍스트만 사용하는 경우, 더보기 텍스트를 입력하지 않은 경우’를 고려한 마크업 입니다.

{@$widgetstyle_extar_var->ws_more_url=trim($widgetstyle_extar_var->ws_more_url);}
<!–@if($widgetstyle_extar_var->ws_more_url)–>
<!–@if(strtolower(substr($widgetstyle_extar_var->ws_more_url,0,4))==’http’)–>
<a href=”{$widgetstyle_extar_var->ws_more_url}”FONT-WEIGHT: bold” jQuery1270991009781=”483″>myWidgetMore”>
    <!–@else–>
    <a href=”http://{$widgetstyle_extar_var->ws_more_url}”FONT-WEIGHT: bold” jQuery1270991009781=”486″>myWidgetMore”>
    <!–@end–>
        <!–@if($widgetstyle_extar_var->ws_more_image)–>
        <img src=”{$widgetstyle_extar_var->ws_more_image}” alt=”{$widgetstyle_extar_var->ws_more_text}” />
        <!–@else if($widgetstyle_extar_var->ws_more_text)–>
        {$widgetstyle_extar_var->ws_more_text}
         <!–@else–>
         more
<!–@end–>
</a>
<!–@end–>

이와 같이 작성하면 관리자 모드에서 입력한 ‘더보기 텍스트 또는 더보기 이미지와 링크’가 출력될 것입니다.

‘widgetstyle.html’ 마크업 완성 예제.

완성된 하나의 예제 입니다. div.myWidgetStyle 이라는 최상위 블럭 아래 h3.myWidgetHeader(제목)과 {$widget_content} (내용) 그리고 a.myWidgetMore(더보기) 링크가 순서대로 노출 될 것입니다.

<divFONT-WEIGHT: bold” jQuery1270991009781=”501″>myWidgetStyle”>
    <!–@if($widgetstyle_extar_var->ws_title_image || $widgetstyle_extar_var->ws_title)–>
    <h3504″>myWidgetHeader”>
        <!–@if($widgetstyle_extar_var->ws_title_icon)–>
        <img src=”{$widgetstyle_extar_var->ws_title_icon}” alt=”" />
        <!–@end–>
        <!–@if($widgetstyle_extar_var->ws_title_image)–>
        <img src=”{$widgetstyle_extar_var->ws_title_image}” alt=”{widgetstyle_extar_var->ws_title}” />
        <!–@else–>
        <!–@if($widgetstyle_extar_var->ws_title)–>
        {$widgetstyle_extar_var->ws_title}
        <!–@end–>
        <!–@end–>
    </h3>
    <!–@end–>
    {$widget_content}
    {@$widgetstyle_extar_var->ws_more_url=trim($widgetstyle_extar_var->ws_more_url);}
    <!–@if($widgetstyle_extar_var->ws_more_url)–>
    <!–@if(strtolower(substr($widgetstyle_extar_var->ws_more_url,0,4))==’http’)–>
    <a href=”{$widgetstyle_extar_var->ws_more_url}”COLOR: rgb(0,0,0); FONT-WEIGHT: bold” jQuery1270991009781=”523″>myWidgetMore”>
    <!–@else–>
    <a href=”http://{$widgetstyle_extar_var->ws_more_url}”COLOR: rgb(0,0,0); FONT-WEIGHT: bold” jQuery1270991009781=”526″>myWidgetMore”>
    <!–@end–>
        <!–@if($widgetstyle_extar_var->ws_more_image)–>
        <img src=”{$widgetstyle_extar_var->ws_more_image}” alt=”{$widgetstyle_extar_var->ws_more_text}” />
        <!–@else if($widgetstyle_extar_var->ws_more_text)–>
         {$widgetstyle_extar_var->ws_more_text}
         <!–@else–>
         more
         <!–@end–>
    </a>
    <!–@end–>
</div>

PHP태그는 <?php 로 시작하여 ?> 로 끝나는 것을 원칙으로 한다.

들여쓰기

tab대신 4개의 공백 들여쓰기

1. vi 설정 (.vimrc)
   set sts=4
   set sw=4

제어구조

제어문의 조건 연산자 중 ||. &&, !=, == 등은 전후로 한칸씩 띄워 구분하고 블럭의 시작 구분자는 개행을 하지 않고 씀을 원칙으로 한다.

단, 조건문이 많아질 경우 상황에 맞게 개행으로 구분을 할 수 있다.

1. if($a == 1 || $b == 2) {
       ….
   } elseif($c == 1) {
       …
   } else {
       ..
   }

주석(PHPdoc)

주석(PHPdoc)은 doxygen의 양식에 맞추기 위하여 아래와 같은 형식을 준수해야 한다.

1. 클래스 파일

1. /**
   * @class 클래스이름
   * @author 이름 (메일)
   * @brief 간략한 설명
   *
   * 자세한 설명
   **/

2. 함수 혹은 기타 php코드가 사용된 파일

1. /**
   * @file 파일경로/파일이름 (ZBXE의 root부터 시작)
   * @author 이름 (메일)
   * @brief 간략한 설명
   *
   * 자세한 설명
   **/

3. 함수(!method)의 주석

1. /**
   * @brief 간략한 설명
   * @param 인자1
   * @param 인자2
   * @return return type
   **/

class 정의

클래스의 파일과 이름은 각 단어를 대문자로 시작함을 원칙으로 한다.

1. class EditorHandler { … }

method 정의

• 클래스의 메쏘드는 각 단어를 대문자로 시작하되 첫 단어는 소문자로 시작하고 가능한 약어를 사용하지 않는다.

1. function setInfo($info) { … }

변수 사용

변수는 소문자로만 사용하고, 각 단어간 _ 로 연결을 합니다.

1. $module_info

상수 사용

상수는 무조건 대문자로만 사용하고, 각 단어간 _ 로 연결을 하며 가능한 약어를 사용하지 않는다.

1. IS_INSTALLED

XE를 통해 제작되는 다양한 웹 페이지들은 아주 오래전에 제작된 모듈 페이지들을 제외하고 모두 다음과 같은 구조를 지니고 있습니다.

<div id=”xe”FONT-STYLE: italic” sizcache=”1″ sizset=”149″ jQuery1270990628234=”191″>fixed | liquid | hybrid | aLeft | aRight”>
  <div id=”container”FONT-STYLE: italic” sizcache=”1″ sizset=”165″ jQuery1270990628234=”201″>c | ce | ec | cee | ece | eec”>
    <div id=”header”>
      <h1></h1>
      <divFONT-STYLE: italic” sizcache=”1″ sizset=”182″ jQuery1270990628234=”211″>extension”></div>
    </div>
    <div id=”body”>
      <div id=”content”></div>
      <divFONT-STYLE: italic” sizcache=”1″ sizset=”192″ jQuery1270990628234=”218″>extension e1″></div>
      <divFONT-STYLE: italic” sizcache=”1″ sizset=”195″ jQuery1270990628234=”220″>extension e2″></div>
    </div>
    <div id=”footer”>
      <divFONT-STYLE: italic” sizcache=”1″ sizset=”202″ jQuery1270990628234=”225″>extension”></div>
      <address></address>
    </div>
  </div>
</div>

HTML은 데이터에 ‘의미’를 부여해서 아무 의미 없는 무질서한 데이터를 유용한 ’정보’로 바꾸는 힘이 있습니다. HTML 문서의 배치나 꾸밈을 위해서는 CSS를 사용해야 합니다. 데이터의 ‘의미’와 ‘꾸밈’에 대한 차이를 잘 분별해서 적합한 언어를 사용하는 것은 향후 다른 사람이 여러분의 스킨을 편집하게 될 때 도움이 됩니다. 문서의 ‘외형’을 조금 바꾸고 싶을 뿐인데 HTML 문서와 CSS 문서를 모두 수정해야 하는 상황은 괴로운 상황 입니다. 하지만 문서의 ‘외형’을 CSS로 잘 분리해서 표현 했다면 굳이 HTML 문서까지 수정해야 하는 복잡한 상황은 발생하지 않을 것입니다.

HTML은 무엇으로 이루어져 있나요?

HTML 은 ’요소’와 ‘속성’과 ‘값’으로 구성되어 있는데 이것을 적재적소에 활용하게 되면 HTML 코드의 판독성이 높아지고 코드 속에서 콘텐츠의 의미를 파악할 수 있기 때문에 기계(검색엔진, 브라우저)나 사람이 이해하기 쉽고 다양한 환경의 출력 소프트웨어나 장치에서 바르게 해석할 수 있습니다.

요소(Element).

<h1>XE</h1>

여 기서 ‘XE’는 데이터이고 <h1>은 ‘요소’ 라고 부릅니다. ‘태그’ 라고 부르기도 하지요. ‘h’는 제목을 의미하는 ‘heading’의 약어로써 많은 태그들이 이렇게 약어를 사용 합니다. 숫자는 제목의 단계를 표시하고 ’1′이면 가장 큰 제목 입니다. “XE는 이 문서의 가장 큰 제목이다” 라는 것을 HTML로 정의한 것입니다. 대부분의 웹 브라우저들은 제목을 ‘크고 굵게’ 표현하는데 웹 제작자는 단순히 글꼴을 ’크고 굵게’ 표현하기 위하여 이 요소를 사용해서는 안됩니다. ‘크고 굵게’는 ‘꾸밈’이기 때문에 이 선언을 CSS로 분리해야 한다는 의미 입니다. <h1> 요소를 웹 브라우저가 너무 크게 표현하고 있다고 생각되면 CSS로 줄일 수 있습니다.

속성(Attribute).

<h1 title=”Xpress Engine”>XE</h1>

여 기서 ‘title’은 ‘속성’ 입니다. 현재의 요소가 다른 요소와 어떤 차이가 있는지 식별하기 위하여 존재 합니다. 그리고 ‘속성’에는 그에 따르는 ‘값’이 반드시 존재 합니다. ‘title’ 속성은 현재 요소의 의미를 부연 설명하는 역할을 하는데 여기서는 “XE라는 콘텐츠는 Xpress Engine의 약어다” 라는 것을 설명 합니다. 모든 HTML ‘요소’는 사용할 수 있는 ‘속성’이 각각 다르게 규정되어 있습니다.

값(Value).

<h1 title=”Xpress Engine”>XE</h1>

여 기서 ‘Xpress Engine’은 현재 ‘요소’의 ’속성’에 대한 ‘값’ 입니다. 현재의 ‘요소’가 어떤 ‘속성’을 지녔는지 구체적으로 정의하는 ‘값’ 으로써 이 값은 화면 표시에 직접 영향을 주기도 합니다. 잘못된 값을 입력하면 깨진 화면을 볼 수도 있습니다. ‘값’은 ‘속성’에 따라서 ‘이미 정해진 값’이 있기도 하지만 어떤 속성의 값은 ‘사용자가 정의’ 해야 합니다. ‘Xpress Engine’ 이라는 값은 사용자 정의 값에 해당 합니다.

HTML은 시작과 끝이 있습니다.

모든 HTML 요소들은 마크업 하는 데이터의 범위를 명시하기 위하여 다음과 같이 시작과 끝이 존재 합니다.

• <h1> : 여기서 부터 첫 번째 제목이 시작 됩니다.
• </h1> : 첫 번째 제목은 여기서 끝납니다.

한편 텍스트 콘텐츠가 아닌 경우 HTML 요소 자체가 데이터가 되는 경우도 있는데 이런 경우는 시작과 동시에 끝납니다.

• <img /> : 이미지(image)가 다른 콘텐츠를 포함하지 않으므로 시작과 동시에 스스로 닫습니다.

요소는 다른 요소를 포함할 수 있습니다.

첫 번째 제목을 클릭하면 초기화면으로 이동하는 데이터를 마크업 해보겠습니다.

<h1 title=”Xpress Engine”><a href=”index.html”>XE</a></h1>

제 목 <h1>…</h1> 마크업 안쪽에 <a>…</a> 라는 마크업이 자리잡고 있는데요. 이와 같이 하나의 데이터는 여러개의 요소로 중첩될 수 있습니다. 이 때 바깥쪽에 있는 요소를 ‘부모 요소’라 부르고 안쪽의 요소를 ‘자식 요소’라 부릅니다. <a> 요소는 anchor(닻, 고정장치) 의 약어로써 마크업된 데이터가 다른 자원을 참조하기 위해 연결되어 있다는 의미를 갖습니다. ‘href’ 속성은 ‘hypertext reference’의 약어로써 ‘참조’ 라는 의미가 있습니다. “XE 라는 데이터는 첫 번째 제목인데 index.html 문서를 참조하고 있다” 라는 것을 정의해 봤습니다.

한편 다음과 같이 선언하는 것은 중첩 규칙을 어긴 잘못된 문법 입니다.

<h1 title=”Xpress Engine”><a href=”index.html”>XE</h1></a>

인라인 요소는 블럭 요소를 포함할 수 없습니다.

블 럭 요소란 크게 묶을 수 있는 콘텐츠 덩어리를 마크업 하는 요소이고, 인라인 요소란 블럭 요소 속에 존재하는 보다 작은 의미 덩어리들을 마크업 하는 요소로써 인라인 요소는 블럭 요소 밖에 중첩해서 선언할 수 없다는 규칙이 존재 합니다. 어떤 요소가 블럭이고 어떤 요소가 인라인 인지는 HTML 표준 명세를 보면 알 수 있지만 대부분의 웹 브라우저들이 블럭 요소는 한 행에 하나의 요소만을 표시하고 주변의 요소들은 줄바꿈이 되도록 구현해 놓았기 때문에 이를 쉽게 분별할 수 있습니다.

다음은 블럭 요소가 인라인 요소를 감싸고 있는 바른 마크업 입니다. <h1>은 블럭 요소이고 <a>는 인라인 요소 입니다.

<h1><a>XE</a></h1> (O)

다음은 인라인 요소가 블럭 요소를 감싸고 있는 잘못된 마크업 입니다.

<a><h1>XE</h1></a> (X)

블럭 요소는 블럭 요소와 인라인 요소를 모두 포함 할 수 있고, 인라인 요소는 인라인 요소를 포함할 수 있지만 블럭 요소를 포함할 수 없습니다.

더 자세한 정보는 HTML 표준 명세를 참조하세요.

1. 그래픽 디자인 가이드

1.1. 안전 서체를 사용합니다

오픈 UI 프로젝트는 전 세계 모든 국가의 다국어 환경을 고려하고 있으므로 다양한 환경의 호환성이 확보된 시스템 서체를 사용해야 합니다. 이미지 서체를 사용하는 경우 다국어 확장에 어려움이 있습니다. 이러한 제한은 이미지 서체를 금기하는 것이 아니라 UI의 확장 가능성과 접근성을 극대화 하는것에 목적이 있습니다. 사용이 권장되는 안전 서체의 종류는 다음과 같습니다. 안전 서체를 사용하지 않으면 다국어 서체는 깨지거나 또는 운영체제의 오작동을 유발합니다.

1.2. 브라우저 고유의 인터페이스 요소를 존중합니다

브라우저 고유의 인터페이스 요소란 ‘사용자-서버’ 사이의 상호작용을 위하여 웹 브라우저가 제공하는 서식 제어 요소를 말합니다. HTML 요소 가운데 서식 제어 요소들은 <input />, <textarea />, <select />, <option />, <button /> 이며 여러가지 형태로 출력 되는데 일부 제어 요소는 스타일 변경을 하지 않아야 합니다. 스타일 변경을 제한하는 이유는 첫째로 해당 요소들에 대한 스타일 변경을 대부분의 웹 브라우저가 지원하지 않기 때문이며, 둘째로 이를 극복하기 위하여 사용하는 트릭이 키보드 접근에 치명적이고 화면 표시 속도를 떨어뜨리기 때문입니다. 스타일 변경이 자유로운 요소들은 CSS를 이용하여 ‘border, background, width, height, image replace’ 기법 적용이 가능하나 스타일 변경이 제한된 요소들은 ‘width, height’ 만 지정이 가능합니다. 아래 표는 스타일 변경이 제한된 브라우저 고유의 인터페이스 요소들 이므로 이 형태를 그래픽 요소로 변경하지 않아야 합니다.

2. HTML 가이드

2.1. XHTML 1.0 Transitional 공식 문법에 맞아야 합니다

모든 콘텐츠는 기본적으로 XHTML 1.0 호환모드^Transitional DTD 형식으로 작성하며 Markup Validation 검사를 통과해야 합니다. HTML 4.01/XHTML 1.0 문서형에서 폐기^Deprecated된 요소들은 <applet />, <basefont />, <center />, <dir />, <font />, <isindex />, <menu />, <s />, <strike />, <u />, <xmp /> 입니다. 이들은 표준모드^Strict DTD 에서는 더 이상 사용할 수 없고 호환모드^Transitional DTD 에서 허용하고 있으나 모두 CSS로 처리하는 것을 권장합니다. HTML/XHTML 문법에 대하여 더 상세한 정보를 원하시면 HTML 4.01, HTML 4 Elements, HTML 4 Attributes, XHTML 1.0, HTML 4.01/XHTML 1.0 Reference를 참고하세요.

오픈 UI 프로젝트에서 사용해야 할 XHTML 1.0 호환모드 DTD는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.2. 문자셋으로 UTF-8을 사용합니다

문자의 풍부한 표현과 다국어 환경에 적합한 UTF-8 문자셋을 사용해야 합니다.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

3. CSS 가이드

3.1. CSS의 사용은 현존하는 브라우저들의 지원 여부에 따릅니다

CSS 코드는 되도록 표준 코드의 사용을 권장하지만 CSS Validation 검사를 통과할 필요가 없습니다. 브라우저의 오작동을 유발하지 않고 호환성 유지가 확보된 이상 벤더 종속적이거나 아직 표준이 확정되지 않은 코드를 사용해도 무방합니다. CSS 2, CSS 2.1, CSS 3, Firefox CSS Extensions, Webkit(Safari/Chrome) CSS Extensions, Opera CSS Extensions, IE8 CSS Extensions, IE6~7 CSS Extensions 사용이 가능합니다.

3.2. 브라우저 호환성 유지를 위한 CSS Hack & Extentions

Hack과 Extension의 사용은 적극 권장하지 않으나 브라우저 버그를 해결하거나 호환성 유지 또는 더 나은 사용자 경험을 제공할 목적으로 다음과 같은 범위에서 사용이 가능합니다.

• * : 속성 앞에 ‘*’ 표기된 것은 IE7 이하 브라우저에 작용합니다. (예: #selector {*property:value;})
• _ : 속성 앞에 ‘_’ 표기된 것은 IE6 이하 브라우저에 작용합니다. (예: #selector {_property:value;})
• -ms- : IE8 부터 지원하는 확장 접두사 입니다. (예: {-ms-filter:value;})
• -moz- : Firefox에서 지원하는 확장 접두사 입니다. (예: {-moz-border-radius:value;})
• -webkit- : Webkit계열 Safari, Chrome에서 지원하는 확장 접두사 입니다. (예: {-webkit-border-radius:value;})
• -o- : Opera에서 지원하는 접두사 입니다. (예: {-o-text-overflow:value;})

Javascript 가이드

HTML과 CSS로 처리할 수 없는 인터렉션에 사용할 수 있지만 겸손하게 사용해야 합니다. HTML이 수행 가능한 기능을 제한하고 전적으로 자바스크립트에 의존해서도 안되며 CSS로 처리 가능한 표현에 사용해서도 안됩니다. 자바스크립트를 지원하지 않는 환경에서도 콘텐츠의 접근성이 유지되어야 합니다. 프레임웍의 사용을 권장하지 않지만 프레임웍을 사용하는 경우 jQuery 사용을 권장합니다.

브라우저 호환성 가이드

모든 콘텐츠는 Windows, Mac 기반의 Internet Explorer^6~8, Firefox^Latest, Safari^Latest, Opera^Latest, Chrome^Latest 브라우저에서의 호환성을 확보해야 합니다. 타겟 브라우저는 TheCounter, OneStat, W3Counter 통계자료를 참고하여 선정합니다.

XpressEngine(이하 XE)는 내부적으로 Model – Controller – View (이하 MCV Architecture)로 나누어진 구조를 가지고 있습니다.
이중, ‘View’에 해당하는 부분을 ‘Template(템플릿)’으로 구현하고 있으며, 이 중, 사용자가 자유롭게 변경하여 쓸 수 있는 부분을 ‘Skin(스킨)’으로 구현할 수 있습니다.
다시 말해, XE를 구성하는 많은 디자인 요소들을 사용자의 취향과 입맛에 따라 마음대로 바꿀 수 있도록 해주는 것입니다.

XE는 XHTML 1.0 Transitional 에 맞추어 제작되었기 때문에, 어울리는 스킨을 만들기 위해서는 아래와 같은 것들을 알아 두시면 좋습니다. (필수가 아닙니다.)

• XHTML
  • XE는 XHTML 표준을 지향합니다. 표준을 따르고 따르지않고의 선택은 SkinWriter(스킨 작성자)에게 달려있지만, 표준 웹사이트가 지니는 여러 장점을 다른 방문자 혹은 이용자에게 누릴 수 있도록 해주기 위해서는 웹표준에 대한 이해를 필요로 합니다.
  • XE는 XHTML 1.0 Transitional 에 맞추어 제작되었습니다.
• CSS
  • XHTML 표준을 따를 경우, 과거에 사용되어지던 일명 ‘보여지기 위한 HTML 속성들’은 더이상 유효하지 않습니다.
  • ‘보여지기 위한 속성들’에 대한 예 : <font color=”#FFF”> 등과 같은 HTML 속성들이 있습니다.
  • 따라서 외형에 대한 기술들은 가급적 CSS를 사용하시기를 권장합니다.
  • 필수는 아닙니다. 웹브라우저들은 XHTML 문서 내에 비 표준 태그 또는 속성이 있는 경우에도 페이지를 보여주기 위해 Quark Mode(비표준모드)로 랜더링을 합니다
• 기초적인 PHP 문법
  • XE의 스킨은 별도의 템플릿 언어를 사용하고 있으나, 결국엔 PHP로 재해석 되므로 다채로운 스킨 제작을 위해서 약간의 PHP에 대해 알고 계실 필요가 있습니다.
• 자바스크립트(JAVASCRIPT)
  • XE는 AJAX 기술을 비롯하여 수많은 부분에서 자바스크립트를 사용하고 있습니다.
  • 스킨 작성을 위해 이미 존재하는 스크립트를 쓰셔도 좋지만, 자신이 원하는 완벽한 스킨을 만들기 위해서는 익혀두시는것도 좋습니다.

Q. 그럼 위의 모든 것들을 알야야 XE 스킨을 만들 수 있는 건가요? 오히려 예전 제로보드 4 스킨 만들기가 더 쉬운것 같아요.

A. 전혀 그렇지 않습니다. 단지, XE전용 스킨 문법(템플릿 언어 문법)을 익히시는 것만으로도 게시판 스킨은 쉽게 만드실 수 있습니다. 
    다만, XHTML, CSS, PHP, Javascript 등을 알아 두시면 더 완벽한 스킨을 제작하시기에 용이해진다는 것입니다.
    먼저 XE 기본스킨들을 분석해 보시면서 하나하나 따라 만드시다 보면 말씀드리지 않아도 ‘어? 그것을 알고 싶다!’ 는 생각이 드실 것입니다.
    그때 공부하셔도 늦지는 않습니다만, 다만 시작 전 이 매뉴얼의 2. 스킨 제작 Manual (링크걸기) 정도는 꼭 한번 읽어보시고 시작하시기 바랍니다.

스킨의 종류

일반적으로 사용자가 작성할 수 있는 Skin(스킨)에는 아래들이 있습니다.

• 모듈 스킨 : 게시판, 통합검색, 회원, 페이지등 서비스를 제공하는 기능을 모듈이라고 하여 이 기능을 표시해주는 것이 모듈 스킨입니다.
• 레이아웃 : 사이트의 기본 틀로서 모듈 스킨을 감싸는 스킨입니다.
• 위젯 : 작은 프로그램으로 동작하는 위젯은 하나의 페이지에 여러개가 구성될 수 있고 이 각각의 위젯들은 모두 스킨을 이용하여 표시가 됩니다.
• 위젯스타일 : 위젯의 껍데기를 포장해주는 스킨입니다.

스킨 제작을 위한 문서

XE의 스킨을 제작하기 위한 보다 상세한 설명과 각 종류별 스킨 제작법에 대해 소개합니다.

• HTML의 이해
• CSS의 이해
• XE UI 개발 철학
• XE UI 제작 및 활용 가이드
• 유니버설 디자인을 위한 UI(HTML/CSS)개발 가이드
• XE 스킨 메뉴얼 : 스킨이 무엇인가요?
• XE 스킨 메뉴얼 : 위젯이 무엇인가요?
• XE 스킨 메뉴얼 : 게시판 스킨 만들기.
• XE 스킨 메뉴얼 : 콘텐츠 위젯 스킨 만들기.
• XE 스킨 메뉴얼 : 위젯 스타일 스킨 만들기.
• XE 템플릿 스크립트 문법
• XE 스킨 메뉴얼 : 레이아웃 스킨 만들기.
• XE CSS Framework for Layout
• Open User Interface Framework