XE 스킨제작가이드 NHN 오픈 UI 기술팀정찬명
목 차 1. XE 스킨의개요 2. XE 스킨의종류 3. XE 스킨의구성요소 4. XE 스킨제작시고려사항 5. XE 스킨파일구조 6. skin.xml 문법 7. XHTML 문법 8. CSS 활용 9. XE 템플릿문법
XE 스킨의개요
스킨이란? 웹페이지또는 웹페이지의구성요소에대한 사용자인터페이스.
이런것아닙니다.
XE 스킨의종류
레이아웃스킨. 화면전체의얼개가하나의테마로구성된것. 페이지스킨이라고도부름. 텍스타일, 카페...
콤포넌트스킨. 화면을구성하는일부요소가하나의테마로구성된것. 모듈스킨, 위젯스킨. 게시판, 메뉴, 달력...
XE 스킨의구성요소
HTML 데이터의 ' 의미 ' 를마크업하는언어. 가공되지않은 ' 데이터 ' 에 ' 제목, 목록 ' 따위의마크업을부여해서 ' 정보 ' 로만듦. 검색엔진최적화관점에서매우중요.
CSS 인터페이스구성요소의 ' 배치와꾸밈 ' 을담당하는언어. HTML이부여하는의미를시각적으로강화해서이해하기쉽고아름답게.
Javascript HTML/CSS의한계를보완. 동적인터렉션을담당하여 ' 사용성 ' 을높여줌. 그러나 HTML/CSS를대체하는목적으로사용하면접근성이떨어짐. 되도록 ' 겸손 ' 하게사용하는것이 ' 접근성 ' 을높여줌.
XE 템플릿문법 동적데이터의화면출력을효과적으로제어하기위해 PHP로부터프리젠테이션로직을분리한코드. 템플릿문법은서버측에서 PHP 코드로변환.
XE 스킨제작시고려사항
브라우저호환성 1. Internet Explorer 6, 7, 8 2. Firefox 3 3. Safari 4 4. Opera 10 5. Chrome 2 WIN/MAC 운영체제모두포함.
웹표준 1. XHTML 1.0 Transitional 2. CSS 2~3 (& Some CSS hack) 3. Javascript DOM W3C 표준스펙을참조. 온라인학습 - http://w3schools. com/
웹접근성 인간의신체적인장애및환경요인이주는장애를제거함으로써누구나공평하게웹에접근할수있는환경을제공하는것. 키보드의동등한접근을고려하는것이주요과제.
XE 스킨파일구조
스킨폴더의위치 /xe/layouts/ /xe/modules/{ 모듈이름 }/skins/ /xe/widgets/{ 위젯이름 }/skins/ /xe/widgetstyles/ '/xe' 는 'xe' 가설치된디렉토리이름.
스킨파일들 skin.xml *.html css/*.css js/*.js img/*.gif
skin.xml 문법
스킨의기본정보 1. 스킨이름, 설명, 버전, 제작일. 2. 제작자이름, 이메일, 웹사이트. 3. 스킨옵션들.( 컬러셋, 표시형태..) 사용자정의 < 태그 >...</ 태그 > 를 이용하여정의. 이정보들은관리자 화면에서노출되고제어가
<?xml version="1.0" encoding="utf-8"?> <skin version="0.2"> 예시 <title xml:lang="ko"> 나라디자인콘텐츠위젯스킨 </title> <description xml:lang="ko"> 단순한것이최고! 나라디자인콘텐츠위젯스킨입니다. </description> <version>0.1</version> <date>2009-08-20</date> <author email_address="dece24 앳 gmail.com" link="http://naradesign.net/"> <name xml:lang="ko">jeong, Chan Myeong</name> </author> <colorset> <color name="white"> <title xml:lang="ko"> 밝은색배경에어울리는 </title> </color> <color name="black"> <title xml:lang="ko"> 어두운배경에어울리는 </title> </color> </colorset> </skin> XHTML 문법과형식이같다. ' 시작태그 ~ 종료태그 ' 로데이터를마크업.
스킨기본정보 <title> 스킨이름 </title> <description> 설명 </description> <version> 버전 </version> <date> 제작일 </date> <author email_address="value" link="value"> <name> 제작자 </name> </author> <license> 라이선스 </license>
스킨색상정보 <colorset> <color name="white" src="white.gif"> <title> 흰색 ( 기본 )</title> </color> <color name="black" src="black.gif"> <title> 검정 </title> </color> </colorset>
스킨부가정보 <extra_vars> <var name="value" type="value"> <title> 제목 </title> <description> 설명 </description> <options value="value"> <title> 옵션아이템 </title> </options> </var> </extra_vars>
XHTML 문법
XE 의공식 DTD XHTML 1.0 Transitoinal <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> XE 는 XHTML 1.0 호환모드 DTD 를사용한다.
엄격한문법 HTML은잘못된중첩을느슨하게허용했으나 XHTML은잘못된중첩이허용되지않는다. W3C 문법검사기나웹개발자도구의지원을받아문법의유효성을확보하지않으면호환성 ( 오류, 깨짐 ) 문제가발생.
소문자작성 HTML 태그는대소문자를구분하지않고혼용하여사용했었지만 XHTML은이둘을구분하며모든 ' 요소 ' 와 ' 속성 ' 을소문자로작성해야한다. <DIV CLASS="value"> (X)
태그의종료 HTML은 <td>, <p>, <img> 와같은태그들을종료하지않아도허용했지만 XHTML은반드시종료해야한다. 내용을포함하지않는태그도반드시종료한다. <img src="..." alt="..."> (X) <img src="..." alt="..." /> (O)
생략금지 HTML 은속성의값에대한단축 표기를허용했지만 XHTML 은단축 표기를허용하지않음. <input type="radio" checked> (X) <input type="radio" checked="checked"> (O)
따옴표사용 HTML 은속성의값에대한따옴표 생략이가능했지만 XHTML 은따옴표 생략을허용하지않음. <p class=value> (X) <p class="value"> (O)
CSS 활용
표준과비표준 CSS 2.0 ( 현행표준 ) CSS 2.1 ( 표준후보 ) CSS 3.0 ( 활성초안 ) 기타벤더 (IE,FF,OP,SF,CR) 확장 CSS hack 호환성보장아래모두사용가능.
CSS 핵필요한가? 비표준계열브라우저 (IE 6~7) 의버그를해결하기위해사용한다. CSS 핵에대한우려는상위호환성문제인데제한적으로사용한다면이런문제가발생할확률은거의없다고전망하고있다. ( 권장한다는의미는아님 )
CSS 핵언제? 다양한 CSS 핵이존재하지만 IE6~7 브라우저의호환성유지를위해필요. 그밖의 CSS 핵사용은남용으로판단할수있다.
IE6~7 용 CSS 핵.selector { property:value; *property:value; } 속성앞에 '*' 별표를붙여쓰면앞쪽에선언된속성과값을덮어쓴다. 이속성은 IE6~7 브라우저에동시에작용한다. 다른표준계열브라우저는이속성과값을무시한다.
IE6 용 CSS 핵.selector { property:value; _property:value; } 속성앞에 '_' 언더바를붙여쓰면앞쪽에선언된속성과값을덮어쓴다. 이속성과값은 IE6 브라우저에작용한다. 다른표준계열브라우저는이속성과값을무시한다.
IE 6~7 문제해결 1. position:relative 속성을적용해본다. 2. zoom:1 속성을적용해본다. 3. float 된요소에 display:inline 을적용해본다. 가장빈번하게발생하는문제의해결방법. 그밖의문제는상황에따라서.
XE 템플릿문법
변수 {$lang->title} {$odocument->gettitle()} {$odocument->getcontent()}... XE 내부에서사용되는변수를사용할수 있다. 유사스킨을참조하는것이좋다.
조건문 <!--@if( 조건식 )--> 만약게시물이없으면이것을출력하고 <!--@elseif( 조건식 )--> 공지사항이면이것을출력하고 <!--@else--> 이것도저것도아니면이것을출력 <!--@end--> 데이터유형이나, 로그인여부에따라서기타등등조건에따라다른데이터를출력하고자할때.
반복문 <!--@foreach($document_list as $no => $document)--> <tr> <td class="num">{$no}</td> <td class="title">{$odocument->gettitle()}</td> </tr> <!--@end--> 데이터를목록형태로출력할때 <tr>, <li> 와같은항목들을반복시킨다.
HTML 템플릿포함 <!--#include(" 파일의상대경로 ")--> HTML 템플릿파일을현재문서의선언위치에포함시킨다. PHP 파일은 include 불가.
CSS/JS 불러오기 <!--%import("xy.css")--> <!--%import("xy.js")--> 이렇게불러오는파일은선언된위치와무관하게 HTML 최종문서의 <head>...</head> 안에포함된다.
CSS/JS 제외하기 <!--%unload("xy.css")--> <!--%unload("xy.js")--> 공통 CSS/JS 또는다른모듈이나위젯에서불러오는 CSS/JS 파일이충돌을일으킬때제외할수있다.
Thank you.