인쇄용 word문서 다운 받기 : Zero_XE_Manual-1.doc


출처 : http://www.zeroboard.com/?mid=manual&pageid=684681



이 페이지에서는 zeroboard XE(이하, zbXE) 스킨 코딩을 위한 기초 문법인 'XHTML의 개념' 과 'HTML에서 XHTML 로 전환'의 필요성을 알기 쉽게 설명하려 합니다.

조금 길어 질 수도 있지만 이 한페이지로 'zbXE의 스킨을 제작하기위한 XHTML'을 이해하는데, 도움이 될 것이라 기대해봅니다.

XHTML과 CSS에 대해서, 이 페이지 외에 한국소프트웨어진흥원(KISA)에서 만든 pdf파일을 참고하시는것도 도움이 될 겁니다.web-standard-guide-2005_KIPA_200512.pdf

 

  • 스프링노트는 링크에 Target을 걸 수가 없습니다.
  • 많은 참조 링크가 있으니, 링크를 새창으로 열고 싶으신 분께서는 "Shift + 클릭"을 하시기 바랍니다.

 

 

XHTML#

XHTML (eXtensible Hypertext Markup Language) 이란 무엇인가?

[위키백과 참조 : http://ko.wikipedia.org/wiki/XHTML ]

[W3C XHTML 1.0 규격 권고안(설명서,지침) 영문 : http://www.w3.org/TR/xhtml1/ ]

[W3C XHTML 1.0 규격 권고안(설명서,지침) 한글번역문(by http://trio.co.kr/) : http://trio.co.kr/webrefer/xhtml/overview.html ]

 

요약하자면 이렇습니다.

  • XHTML 은 'HTML 버전4'를 XML(확장생성언어)을 적용하여 재구성한 언어로서 'XHTML 1.0'이 2000년 1월 26일, W3C의 권고안이 된 후 계속적으로 개선, 개발 되고있습니다. (HTML은 더이상 개발되지 않습니다.)
  • XHTML은 대부분의 최신 웹브라우저에서 정확하게 해석되고 있으며, XHTML이 HTML에 거의 포함되기 때문에 구형 브라우저에서도 별 문제가 없이 해석됩니다. 즉, 요즈음 브라우저는 '구버전 HTML 문서' 및 '최신 XHTML 문서'를 모두 거의 정확하게 해석하여 표현해 줍니다.
  • XHTML은 HTML의 문법을 대부분 그대로 계승하고 있지만 그 문법을 좀 더 엄격하게 지키도록 요구합니다.
  • 좀 더 엄격한 버전의 HTML 즉, XHTML의 필요를 느끼게 된 가장 큰 이유는 웹 콘텐츠가 전통적인 '컴퓨터'를 벗어나 여러 가지 장치(이동통신기기, 장애인을 위한 점자&음성브라우저 등...)에서 이용되면서, 부정확한 HTML을 해석하는데 많은 어려움이 생겨났기 때문입니다.
    즉, 하나의 웹문서가 여러 가지 장치, 여러 가지 브라우저 에서 모두 그 내용(콘텐츠)를 제대로 이해하고 보여줄 수 있도록 할 필요성이 있는 시대가 이미 시작되었고, 그렇게 할 수 있도록 만들어주는 것이 XHTML의 존재이유입니다.

 

위와 같은 내용을 보면 HTML과 XHTML 이 크게 다르지 않게 느껴집니다.

문법이 크게 다르지 않아서 차이를 느끼지 못한데다가, 구버젼 HTML 문서, 심지어 많은 문법적 오류를 가진 HTML 문서 까지도 최신 웹브라우저에서 큰 문제없이 해석해주는 이유 때문에 이미 오래전에 발표된 XHTML이 아직까지도 대부분의 웹 디자이너에게 멀게만 느껴지도록 방치된 원인이 아닐까합니다. (필자도 얼마전까지 그래왔습니다. zbXE의 스킨을 만들어보기 시작하면서 XHTML관련 책을 한권 사서 보고 나서야 XHTML을 써야겠구나 하는 생각이 들었으니까요.)

 

XHTML 걱정하지 마세요.

기존 HTML로 홈페이지를 직접 만들어 보신 여러분들 께서는 이미 XHTML의 대부분의 문법을 알고 계십니다.

단, 알면서도 지키지 않았거나, 그 테그의 의미를 잘못 이해하고 있었던 것이 조금 있을 뿐입니다.

 

이제 XHTML문서를 작성하는 방법을 하나 하나 알아보도록 하겠습니다.

 

*핵심정리 : XHTML은 "하나의 문서를 여러 가지 장치, 여러 가지 브라우저가 그 내용을 제대로 이해하고 보여줄 수 있도록 하는 것"을 목적으로 탄생하였습니다.

 

*추가 : 문서를 보는데 도대체 얼마나 다양한 "여러가지 환경"이 있길래 이런 고민을 하는 것인지
           다음 페이지를 보시면 느낌이 확~ 오실 것입니다.

웹 접근성 관계요소 (by 정찬명 님) : http://www.zeroboard.com/12663405

 

 

 

XHTML 문서의 구조#

XHTML은 문서의 구조(Structure)표현(Presentation)을 분리하여 작성합니다.

이것은 XHTML의 탄생 목적을 달성하기 위한 중요한 방법입니다.

 

구조는 한마디로 문서의 내용 이라고 볼 수 있고,

표현은 그 내용을 표시해주는 방법 즉, 디자인 이라고 보면 되겠습니다.

 

구조 (Structure)        = 내용 (Contents)

표현 (Presentation)    = 디자인 (Design)

 

대부분의 프로그램들이 흔히말하는 "코드와 디자인의 분리" 를 시도하고있습니다.

이것의 장점은 개발과 디자인의 완벽한 분업화가 가능하며, 디자이너는 개발언어를 완벽하게 이해할 필요가 없어지며, 서로간의 간섭을 줄여 오류발생의 가능성도 줄여줍니다. 그리고, 유지보수 측면에서도 유리하게 됩니다.

 

zbXE 역시 이러한 이유로 코드스킨을 분리시켜 놓았습니다. 그래서 스킨 디자이너는 머리아픈 PHP코드를 모두 이해할 필요가 없어졌습니다.

 

그리고, 스킨은 역시 같은 이유로  '구조'와 '표현'으로 다시한번 분리되는 것입니다.

디자인을 변경할 때는 디자인만 신경 쓰면 되고, 그 내용은 손 댈 필요가 없으며 의도하지 않게 내용이 변경되는 일도 없습니다.

 

이해를 돕기 위해서 다음 그림을 보시겠습니다.

xhtml_structure.gif

 

위 그림을 보면 XHTML 만가지고는 브라우저에 우리가 의도한 이쁜(?)문서를 뿌려줄 수 없다는 것을 알 수 있습니다.

표현 방법을 결정하기 위해서 XHTML 과 함께 CSS를 필요로 합니다.

 

구조 (Structure)        = 내용 (Contents)   = HTML (XHTML)

표현 (Presentation)    = 디자인 (Design)  = CSS

* CSS (Cascading Style Sheets) : 위키백과 , 네이버백과

 

구조를 지키는 것은 브라우저 (컴퓨터 또는 여러 가지 장치)를 위한 것이며,

표현은 그 내용을 보는 사람을 위한 것이라고 볼 수도 있겠네요.

 

이제 우리는 다음장을 통하여 이런 구조를 유지하면서 웹페이지를 작성하는 방법을 구체적으로 알아보도록 하겠습니다.

 

 

 

 

 

 

XHTML 작성방법#

XHTML 알고보면 별거 아닙니다!!!

교과서에 충실히 따르라는 지침 일 뿐, 바뀌는 것은 많지 않습니다.

이 페이지에서 모든 변경사항을 일일이 설명하기는 힘들고 중요한 몇 가지만 정리해 보겠습니다.

문서형 선언 (Document Type Definition)#

'문서형 선언' 이란 웹문서를 작성할 때 사용한 언어(문서의 형태)를 결정하고 그 내용을 브라우저에게 알려주는 방법을 말합니다.

문서형 선언은 웹문서의 가장 첫번째 행에 <!DOCTYPE ~내용~> 이라는 테그를 입력하면 됩니다.

 

웹디자이너(혹은 개발자)가 선택할 수 있는 문서형은 아래와 같은 것들이 있습니다.

  • HTML 4.01 Transitional
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • HTML 4.01 Strict
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • XHTML 1.0 Transitional - (zbXE의 기본 문서형입니다.) 기존 HTML의 장점을 사용할 때 그리고 Lynx등 CSS를 이해못하는 브라우져에서의 호환성을 고려할때 사용합니다.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • XHTML 1.0 Frameset - HTML Frame(프레임)을 문서내에서 사용코자 할때에는 Frameset DTD을 사용합니다. HTML 엘레멘트의 컨텐트(content) 모델을 제외하고는 HTML 4.01 과도기적(transitional) DTD와 같은데, 프레임세트(frameset) 문서에서는 "BODY"  엘레멘트 자리에 "FRAMESET" 엘레멘트를 사용합니다.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  • XHTML 1.0 Strict - 완벽한 XML호환의 XHTML문서 (v1.0)를 작성할시 가장 엄격한 문서 정의(Strict DTD)를 지정합니다. CSS를 사용할 수 있습니다.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • XHTML 1.1
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

브라우저는 '문서형 선언'을 통해 지정된 형식을 기준으로 문서를 이해하게 됩니다.

 

StrictTransitional 에 관하여...

사전적 의미 :

  • Strict = "엄격한, 꼼꼼한 ; 정밀한 ; 완전한"
  • Transitional = "변천하는 ; 과도적인, 과도기의"

W3C가 제안한 HTML 4.01 규격의 Transitional DTD항목에서 다음과 같이 설명하고 있습니다.

(영문 : http://www.w3.org/TR/1999/REC-html401-19991224/sgml/loosedtd.html )

(한글 번역문서 링크 : http://trio.co.kr/webrefer/html/sgml/loosedtd.html )

This is the HTML 4.01 Transitional DTD, which includes presentation attributes and elements that W3C expects to phase out as support for style sheets matures. Authors should use the Strict DTD when possible, but may use the Transitional DTD when support for presentation attribute and elements is required.

 

이것은 과도기적인 HTML 4.01 문서형 선언으로, W3C가 스타일시트(style sheets)를 발달, 장려하기 위하여 단계적으로 제거할 "표현(presentation) 엘리먼트" 를 포함하고있다. 개발자는 가능한 엄격한(Strict) 문서형을 사용해야한다. 그렇지만  표현 속성과 엘리먼트를 지원해야 할 필요가 있을 경우에는 과도기적 문서형을 사용할 수도있다.

 

* may use 의 의미는 '규격에 적합하지 않지만 사용할 수 있도록 허용은 해준다.' 는 정도의 의미로 해석되겠습니다.
  번역문 - http://trio.co.kr/webrefer/xhtml/overview.html#terms "2.1 용어" 부분을 참조하시기 바랍니다.

  영문 - http://www.w3.org/TR/xhtml1/#terms

* 링크된 번역문서의 번역도 좀 이상한 부분이 있어서 필자가 다시 번역했습니다.^^;

 

즉, W3C의 의도는

이미 HTML 4.01 때 부터 구조와 표현의 분리를 지향해왔고,

이 문법을 '엄격하게 지킬 것'을 권장하고 있지만, '완벽한 문법'으로의 전환에 어려움을 느끼는 개발자를 위해 Transitional DTD를 (임시로) 만들어 주었고, zbXE 역시 아직 '엄격한 XHTML'에 익숙하지 않은 상당수의 디자이너&개발자와 구버젼HTML 문법으로 구성된 기존 콘텐츠를 고려하여 XHTML 1.0 Transitional DTD를 선택한 것이라고 볼 수 있겠습니다.

 

HTML 태그(Tag)의 의미를 수호하라!!!#

HTML 문법 안에 있는 모든 태그(Tag)들은 명확한 의미을 가지고 있습니다. 우리는 그 태그의 의미에 맞게 문서를 작성해야 브라우저는 문서의 구조를 제대로 이해할 수 있습니다.

태그의 의미에 맞게 작성한다는 것이 어떤 것인지 이해하기 위해서 몇가지 예를 들어 설명해 보겠습니다.

● 예제 1 - 이것은 제목입니다.

문서안에 아래와 같은 내용이 있다고 합시다.

  1. 짬뽕의 역사
  2. 중국요리의 일종으로...

위와 같은 문서에서 '짬뽕의 역사'를 제목으로 만들어 보겠습니다.

XHTML을 알기전의 우리는 이런 식으로 코딩을 해왔습니다.

  1. <font size="6"><b>짬뽕의 역사</b></font><br>
  2. 중국요리의 일종으로...

결과는 이렇게 보이죠.

ex01-01.gif

보기에는 제목처럼 보입니다. 그러나 브라우저는 어느 것이 제목인지 어느것이 본문인지 구분하지 못합니다.

우리는 브라우저에게 "'짬뽕의 역사'를 굵게 그리고 글꼴크기를 크게 표현해달라." 고 표현(presentation)에 관한 설명만 한 것입니다.

문서의 구조는 전혀 설명해주고 있지 않습니다.

 

다시한번 기억해야 할 것은 XHTML의 문법은 HTML 파일에서 오직 '문서의 구조'만 표현하길 권장하고 있다는 것입니다. 그리고, 엄격한 XHTML 규정 안에서는 표현과 관련된 대부분의 요소(element)와 속성(attribute)들은 없어졌습니다. 즉, 엄격한 XHTML문법에서는 이미 없어진 '표현과 관련된 요소와 속성들'을 사용하면 오류(Error)로 인식됩니다.

그렇다고 너무 걱정하실 필요는 없습니다. 대부분의 브라우저는 오류가 있는 문서라도 가능한 제대로 보여주려고 나름대로의 방법으로 노력해주기 때문에 여러분의 사이트는 오류(Error)메시지 없이 잘 돌아가고 있긴 할테니까요. 한정된 브라우저에서만 말이죠.

 

문법적인 오류가 있는지 검사하는 방법에 관하여 이 페이지 마지막 "XHTML 유효성 검사 도구"에서 배우게 될 것입니다.

 

그러면 XHTML 문법에 맞게 작성해 보겠습니다.

  1. <h1>짬뽕의 역사</h1>
  2. <p>중국요리의 일종으로</p>

결과는 이렇게 보입니다.

ex01-02.gif

똑같아 보인다구요?

그렇지만 의미는 크게 다릅니다.

 

<h1>태그의 "h" 는 'headline'의 첫글자를 따서 만들어진 태그입니다. 즉 제목을 의미합니다.

<p>태그의 "p" 는 'paragraph'. 즉 문단을 의미합니다.

 

문서의 구조를 이루는 요소들은 제목, 소제목, 여러 문단으로 이루어진 본문, 목록, 표, 인용구, 강조문 등의 여러가지가 있습니다. 그리고 HTML은 그 요소들을 위한 태그를 대부분 가지고 있습니다. 우리는 태그를 그런 의미에 따라 올바게 사용함으로서 브라우저에게 문서의 구조를 정확하게 알려주어야 하는 것입니다.

 


질문있어요!!!

  1. <h1>태그로 둘러싼 부분은 '글자의 크기가 커지고 굵기도 굵게 표현'되는데요.
    이것은 <h1>태그가 제목이라는 구조 외에도 표현에 관한 의미까지 포함하는 것 아닌가요?

    그렇게 생각하실 수도 있지만 아닙니다.
    분명 <h1>태그는 브라우저에게 "이것은 제목이다." 라는 구조만 알려주고있습니다. 그런데 모든 브라우저는 '브라우저 나름 데로의 기본 CSS'을 가지고있습니다. 그리고 대부분 브라우저의 기본 CSS는 그 스타일이 매우 비슷합니다.
    즉, 브라우저는 그 문서의 개발자가 따로 스타일을 지정하지 않은 모든 요소 들에 데하여 자기가 가진 기본 CSS의 스타일을 적용해주는 것입니다.
  2. <h1>태그를 이용한 제목의 모양이 마음에 안드는데요. 크기도 너무 크고 글꼴도 마음에 안드는데... 모양을 바꾸고 싶을 때는 어떻게 하죠?
    CSS를 통해서 제목의 표현(모양)을 마음대로 바꾸실 수 있습니다.
    HTML에서는 <h1> 태그를 통해서 제목이라는 구조만 결정하고 CSS에서는 <h1>태그를 사용한 부분을 어떻게 표현되도록 할 것인지 디자인을 결정해주면 되는 것입니다.
●예제 2 - 이왕이면 다홍치마

문장의 일부를 강조하고 싶을 때 자주 쓰는 태그가 있습니다.

바로 <b></b>태그죠. <b>태그는 글자를 굵게(bold) 표시해줍니다.

그리고, <i></i>태그 역시 문장의 일부를 기울어진 이탤릭체(italic)로 강조해줍니다.

 

이 두 태그의 이름이 가지는 의미 자체가 "굵게!" , "기울여!" 라는 표현(presentation)의 의미입니다.

그래서, 이 태그는 XHTML 에서는 사라졌습니다.

 

 

XHTML 문법에서는 대신 아래와 같은 태그를 지원합니다.

<b>글자</b> → <strong>글자</strong>

<i>글자</i> → <em>글자</em>

 

<em>      = emphasis (강조) = 대부분의 브라우저는 기울어진 이탤릭체(italic)로 표현합니다.

<strong> = stronger emphasis (강한 강조) = 대부분의 브라우저는 굵게(bold) 표현합니다.

 

물론, XHTML 1.0 Transitional DTD 에서는 구버젼 태그인 <b><i>를 허용은 해줍니다. 그리고 웬만한 브라우져들은 <b> 태그와 <i> 태그를 기존에 하던 데로 굵게, 기울어지게 표현해 줍니다.

 

즉, zbXE의 스킨을 만들 때 같은 효과라면 <strong>을...

이왕이면 다홍치마라고 XHTML 규격에 맞는 태그를 사용하는 것이 좋겠습니다.

 

 

 

약간 바뀐 HTML 태그(Tags) 규칙#
  1. <html xmlns="http://www.w3.org/1999/xhtml">
    <html> 엘리먼트에 위와 같이 xmlns 속성을 추가해줍니다.
    이것은 문서형 선언(DTD)과 비슷하게 html이 어떤 XML 언어에 속해있는지 식별하도록 하는데 사용됩니다.
  2. 빈태그 표기법 : empty elements (elements without closing tags)
    대부분의 태그는 '시작(열기)태그'와 '종료(닫기)태그'의 한짝으로 구성되어 있습니다.
    그렇지만 <br><img> 태그와 같이 짝이 없이 혼자 작동하는 태그들도 있습니다. 이런 짝없는 태그를 '빈요소(Empty Elements)' 라고 부르며 이런 빈요소 들을 표기할 때는 브라우저에게 "예는 짝이 없으니 종료태그를 찾느라고 수고할 필요가 없어!!" 라고 친절하게 알려주어야 합니다.
    마지막 ">" 앞에 슬래시를 넣어주면 됩니다.
    <br> 태그를 예로 들면 <br /> 라고 적어야 한다는 것이죠.
    <img> 태그는 <img src="dir/image.gif" alt="imgName" /> 이런식으로 적어 주셔야합니다.
    슬래시 앞에 공백을 하나 추가해주는 것이 좋은데 그것은 슬래시 앞에 공백없이는 "/>"를 인식하지 못하는 옛날 브라우저들을 위해서입니다. 하위 버젼과의 호환성을 위해서 슬래시 앞에 공백을 꼭 넣어주세요.
  3. 대체 텍스트 입력 : <img> 엘리먼트에는 반드시 alt 속성을 넣어줍니다.
    alt (alternate : 교체하다, 대리인) 속성은 이미지 파일이 없어졌을 때 대신 표시해줄 이름(text)를 적어 주는 것입니다. 이는 파일이 없어졌을 때 외에도 그림을 보지 못하는 시각장애인을 위한 브라우저 등에서도 그 이미지가 가진 의미를  이해하도록 돕는 역할을 합니다.
  4. 속성의 값들은 반드시 따옴표로 둘러싼다.
    틀림: <table rows=3>
    옳음: <table rows="3">
  5. 간소화된 속성의 사용 금지

    틀림: <textarea readonly>READ-ONLY</textarea>
    옳음: <textarea readonly="readonly">READ-ONLY</textarea>
    이 외에도 checked , nowrap 등과 같은 약식표기는 허용되지 않습니다.

  6. 태그이름 속성은 반드시 소문자로 표기
    틀림: <BODY><P>The Best Page Ever</P></BODY>
    옳음: <body><p>The Best Page Ever</p></body>
  7. 모든 인라인 요소 블록 요소에 둘러싸여야 한다.
    틀림: <body>Welcome to my page.</body>
    옳음: <body><p>Welcome to my page.</p></body>
    본문(body)에 직접 텍스트를 삽입할 수 없습니다. 반드시 <h1><p><table><div>태그와 같은 블록 요소로 감싸주어야합니다.
    * 블록 요소와 인라인 요소 에 관하여 모르시는 분은 다음 "DIV 레이아웃" 단원의 설명을 참조해주세요.
  8. name 속성은 폐기, id 속성만 사용

    'name' 속성은 엘리먼트에 이름을 주어 스타일쉬트나 스크립트에서 참조 할 수 있게 해 주었습니다.
    XHTML에서는 문서내의 엘리먼트에 유일한 이름을 부여하기 위해서 'id' 속성 만을 사용합니다.
    * 사실 name 속성은 그다지 많이 사용되는 편이 아니었을 것입니다. 별문제가 되지 안는 변경사항이죠.

 

위 8가지 목록은 모든 변경사항을 설명 한 것은 아니지만 쉽게 접하게될 주요 변경목록이라고 볼 수 있습니다. 그다지 많이 달라지지는 않았죠?
"/>"를 추가하고 "alt" 속성을 꼭 적어주라는 좀 귀찮아 진 규칙과, 기존 문법을 정확하게 지켜야 한다는 내용이 대부분 입니다. 그렇지 않으면 XHTML은 오류(Error)로 인식 할 것이라는 내용이죠.

 

기타 변경사항 참조 :

 

 

 

 

 

 

DIV 레이아웃#

많은 디자이너 분들께서 이제까지 웹디자인을 할 때 홈페이지의 큰 틀인 레이아웃을 만드는 작업을 할 때 <table>태그를 주로 이용해 오셨을 것입니다. 그러나 그것은 HTML 문법에 적합한 방식이 아니었습니다. <table>태그는 단지 "표"를 그리기 위해서 만들어졌기 때문입니다.

HTML문법에 적합하지 않게 작성된 문서는 웹표준에 벗어난다고 보시면 됩니다.

zbXE의 스킨제작을 공부하시기 위해서 대부분 "zbXE공식스킨"을 분석해 보는 것 부터 시작하실 텐데, 기존 <table>을 이용한 레이아웃 제작에만 익숙하셨던 분들은 새로운(?)방식에 적응하기 힘드셨을 것입니다.

 

이 단원에서는 그런 분들을 위해서 기본적이고 이론적인 내용들을 설명하고자 합니다.

 

 

 

블록 엘리먼트와 인라인 엘리먼트의 이해#

구조화된 내용들을 원하는 곳에 배치하려면 꼭 이해해야하는 부분입니다.

사전적 의미 :

  • Block = "덩어리, 토막, 한 벌, 한 묶음"
  • In Line = "그때마다 즉시 처리하는, 직렬의, 일렬로 늘어선"
  • Element = "요소, 성분, 구성요소, 원소, 분자"

 

HTML문서에서 본문(body)에 들어가는 모든 HTML태그는
크게 '블록 엘리먼트(block-level elements)'과 '인라인 엘리먼트(inline elements)' 로 구분할 수 있습니다.

 

블록 엘리먼트는 하나의 덩어리로 표현되는 요소를 말합니다.

인라인 엘리먼트는 그 덩어리 안에서 부분적으로 처리되는 요소들을 말합니다.

 

블록 엘리먼트와 인라인 엘리먼트를 쉽게 구분하는 방법이 있는데 '항상 앞과 뒤에 줄넘김(line break)을 하는 요소'는 모두 블록 엘리먼트 라고 보시면 됩니다.

 

예를 들면 <h1> 태그는 블록 엘리먼트 입니다.

<h1></h1>로 둘러싸인 제목은 줄넘김을 하기위해 <br /> 태그를 뒤에 붙이지 않아도 무조건 줄넘김을 합니다.

 

그리고, <p> 태그와 <br /> 태그의 용도가 비슷해 보인다고 생각해 오셨던 분도 계실 것입니다.

'정확한 문법'을 중요하게 생각하지 않았던 시절에는 줄넘김을 위해 <p>태그를 사용한 적도 있었으니까요. 하지만 이제는 <p>태그를 제대로 써야합니다. 시작태그 <p>와 종료태그 </p>를 반드시 함께 사용해 주어야하며 내용은 그 안에 들어가 줘야합니다. 이렇게 함으로서 하나의 묶음(문단)을 만들어 내는 것이고 그 묶음이 끝나는 지점에서 줄넘김이 생기는 것입니다.

즉, <p> 태그는 '블록 엘리먼트'이고 <br />태그는 '인라인 엘리먼트'입니다.

 

이렇게 <h1>,<p>,<br />태그로 만들어진 페이지의 구조를 그림으로 표현해 보겠습니다.

block_element-1.gif

이와 같이 블록 엘리먼트는 덩어리 구조를 가지게 됩니다.

●예제 3 - <q>, <blockquote> 라는 태그를 비교해봅시다.

이 두 태그는 모두 "인용(quote)" 이라는 의미를 가지고 있습니다.

 

  1. <p>짬뽕이 <q>나는 짜장면보다 맛있어!</q>라고 말했습니다. <blockquote>짬뽕과 자장면은 중화요리의 쌍벽을 이룬다.</blockquote></p>

이런 코드는 아래와 같이 표시됩니다.

block_element-2.gif

<q>태그로 둘러싼 텍스트는 FF(파이어폭스)2 에서 "" 로 둘러싸여 표현됩니다. MS IE(익스플로어)6 에서는 일반 텍스트와 똑같이 표시됩니다. 이것은 FF와 IE가 각각 나름 데로 가지는 기본 CSS의 차이 일 뿐 브라우저는 <q></q>로 둘러 싸인 부분이 인용문구 라는 의미는 똑같이 이해하고 있습니다. <blockquote>태그는 역시 "인용"이라는 의미를 가지지만 태그이름에서 추측할 수 있듯이 <blockquote></blockquote>로 둘러싸인 부분을 하나의 덩어리구조로 만들어 줍니다.

 

즉, <q>태그는 "인용"이라는 의미를 가지는 인라인 엘리먼트 이고,

<blockquote>태그는 "인용"이라는 의미를 가지는 블록 엘리먼트 입니다.

 

의미는 같지만 구조가 다른 쌍둥이 태그라고 볼 수 있습니다.

위 예제에서 블록 요소인 <blockquote>태그가 역시 블록 요소인 <p> 태그안에 포함되어 있는 것을 보실 수 있습니다. 여기에서 알수있는 한가지 사실은 "블록요소는 블록요소에 포함될 수 있다."는 것입니다. 이렇게 HTML 문서는 블록단위의 계층구조를 가질수 있습니다. 사실 문서의 '내용을 구성하는 모든 요소'는 이미 최상위 블록인 <body></body>에 포함되어 있습니다.

 

한가지 중요한 사실은 이러한 계층구조를 통하여 "하위블록들은 상위블록의 속성을 상속받는다."는 것입니다.

예를들어, <body> 태그에 font-size : 50px;  이라는 속성을 부여하면, font-size(글꼴크기)와 관련된 별도의 속성을 가지지 않은 블록의 텍스트들은 50px 이라는 어마어마한 크기의 속성을 상속받게 됩니다. 이러한 '속성' 및 '속성의 상속'에 관해서는 CSS를 공부하시면서 좀 더 자세하게 아실 필요가 있습니다.

 

블록 엘리먼트모양을 마음대로 바꾸기 위해서는 CSS의 박스모델(Box Model)을 필요로 합니다.

박스모델에 관한 자세한 설명은 CSS2 규격 한글 번역문 8.박스모델 (http://trio.co.kr/webrefer/css2/box.html) 을 참조하세요.

박스모델이 가지는 마진(margin:바깥여백), 패딩(padding:안여백), 테두리(border) 같은 기본적인 속성은 반드시 숙지하시기 바랍니다.

 

체계적인 DIV씨#

사전적 의미 :

  • Division = "분할, 구획, 배분, 구분, 경계선, 분류, (육군)사단, (학교)반, (회사)부 국 과 ..."

 

<div>태그는 여러가지 요소를 한데 묶어 하나의 그룹으로 만들어 주블록 엘리먼트 입니다.

 

div-1.gif

위 그림을 보면 4가지 음식에 관하여 설명을 하는 페이지의 구조를 개념적으로 표현한 것입니다. 음식이름을 제목으로하고 그 다음에 음식에 관한 설명 문단이 나오는 구조가 4번 반복되고 있습니다. 똑같은 형태가 반복되어 내용이 한눈에 들어오지는 않습니다. 음식의 수가 많아지면 더 심하겠죠.

 

그런데 자세히 보면 크게 한식과 중식의 두가지로 분류가 가능하다는 것을 알 수 있습니다. 이런 논리적인 분류를 <div>태그를 이용해서 그룹으로 묶어 보겠습니다.

div-2.gif

이런 식으로 묶어주니 큰 덩어리가 눈에 들어오면서 훨씬 이해하기 쉬워지겠죠.

DIV 태그는 공통된 부분을 필요에 따라 그룹으로 묶어 줌으로서 문서를 훨씬 구조적이고 체계적이며 논리적으로 정리해 줄 수 있는 중요한 도구입니다.

 

태그는 이렇게 작성됩니다.

  1. <div id="한식">
  2. <h1>김치볶음밥</h1>

  3. <p>김치볶음밥 자세한 설명</p>

  4. <h1>불고기</h1>

  5. <p>불고기 자세한 설명</p>

  6. </div>
  7. <div id="중식">
  8. <h1>짬뽕</h1>

  9. <p>짬뽕 자세한 설명</p>

    <h1>자장면</h1>

  10. <p>자장면 자세한 설명</p>

  11. </div>

id 속성은 해당 엘리먼트에 주어지는 고유한 이름으로 한 문서안에서 중복되어서는 안됩니다. CSS는 이 고유한 이름을 통해서 그 엘리먼트가 어떻게 표현될 것인지를 정확하게 지정해 줄 수 있게 됩니다.

 

질문있어요!!!

  1. 그룹을 지어주는 태그는 블록 엘리먼트인 DIV 밖에 없나요? 인라인 엘리먼트는요?
    있습니다. 인라인 엘리먼트인 <span></span> 이 있습니다. <span>태그는 문단 안에서 내용의 흐름을 방해하지 않으면서 부분적으로 특유의 속성을 지정하고싶을 때 사용하게 됩니다.

 

 

DIV 위치지정#

이제는 제대로 레이아웃을 잡아 보도록 하겠습니다.

 

DIV 블록을 원하는 위치로 보내기 위해서는 미리 알아 두셔야 할 속성들이 있습니다.
바로 margin(바깥여백), padding(안여백), float(유동) 이렇게 3가지 속성이 주로 사용되고, 추가로 position(위치) 속성이 사용될 때도 있습니다. 위에서 언급했던 "CSS의 박스모델" 에 관한 속성들과 "유동(float)"에 관한 속성들 입니다. 링크된 페이지들을 참조해서 공부해 주시고 어느정도는 아신다는 가정하에서 진행하도록 하겠습니다.

 

예제를 작성할 때 사용한 브라우저는 'Firefox 2'를 사용하였습니다.

최종적으로는 IE 또는 Safari , Opera 같은 다른 브라우저에서도 똑같이 잘 보여야 하겠지만 실습하시면서 혼선이 생길 까봐 미리 말씀을 드립니다. 모든 브라우저에서 동일한 디자인으로 표현되도록 하는 작업은 속성들을 바꿔가며 각각의 브라우저에서 계속적으로 테스트를 해보는 수 밖에 없습니다. (특히 IE6는 -.-;;; OTL)

 

 

자 그럼 시작해 보겠습니다.

아래 그림과 같은 블록단위 구조를 가진 페이지가 있습니다. 한번 살펴볼까요?

layout-01.gif

레이아웃은 이 블록단위의 덩어리들을 어떻게 배치할 것인가를 결정하는 것이라고 말할 수 있겠죠.

이 예제의 목표는 두번째 서브메뉴 블록을 좌측으로 배치시키는 2단 컬럼 레이아웃을 만드는 것입니다.

 

 

소스코드는 이렇습니다.

* 소스코드를 보기 편하게 하기 위해서 이 페이지의 좌우 넓이를 충분히 넓혀주시면 좋습니다.

* CSS코드의 {}안에서 공백은 무시하시면 됩니다. 보기 좋게 하기위해서 많이 띄웠을 뿐입니다.
* 단계별로 추가 및 수정된 부분에는 색깔을 넣어서 보시기 편하게 하겠습니다.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>xhtml</title>
  3. </head>
  4. <body>
  5. <div id="bodyWrap">
  6. <div id="header">[로고] 홈 | 회사소개 | 제품소개 | 짬뽕정보</div>
  7. <div id="columnLeft">
  8. 소개<br />인사말<br />연혁<br />오시는길
  9. </div>
  10. <div id="content">
  11. 안녕하십니까?<br />짬뽕주식회사입니다.<br />짬뽕주식회사는 최고의 짬뽕을 만들기 위해 50년간 한우물을 파다가 기름이 나와서 기름장사를 하려다가 기름이 하루만에 바닦나서  포기하고 어제부터 다시 짬뽕을 만들기 시작한 굴지의 중화요리 전문 기업입니다.
  12. </div>
  13. <div id="footer">저작권은 (주)짬뽕에 있는거 같아요.</div>
  14. </div>
  15. </body>
  16. </html>

 

대충 살펴보면, 빨간색으로 표시된 4개의 블록 엘리먼트가 있고 그 4개의 블록을 bodyWrap 이라는 블록이 감싸고 있습니다.

bodyWrap 블록이 하는 역할은 나중에 설명하도록 하겠습니다.

 

지금부터는 문서의 구조(body부분)는 손을 댈 필요가 없습니다.

표현을 담당하는 CSS만 수정하면 원하는 레이아웃으로 바꿀 수 있는 것입니다.

 

우선 브라우저로 확인해보죠.

layout-02.gif

아무런 스타일을 적용하지 않았기 때문에 블록단위를 눈으로 파악하기 힘들군요. 원활한 진행을 위해서 블록에 배경색을 넣어서 구분하기 쉽게 만들도록 하겠습니다.
HTML 문서의 <head> 와 </head> 사이에 아래와 같은 코드를 입력합니다.

  1. <style type="text/css">
    <!--
    #header {     background: #CCCCEE; }
    #columnLeft { background: #CCEECC; }
    #content {    background: #EECCCC; }
    #footer {     background: #CCCCEE; }
    -->
    </style>

* zbXE에서 스킨을 만드실 때는 스타일시트(CSS)를 HTML 파일에 직접 입력하지 않지만 편의상 직접입력하겠습니다.

소스코드를 보시면 CSS가 "#id이름 { 속성 }"과 같은 형식으로 특정블록을 지정할 수 있다는 것을 알 수 있습니다. 이 형식에서 앞에 붙어있는 "#id이름" 부분을 선택자(selector) 라고 부릅니다. 선택자에 관한 문법은 링크를 참조하세요.

layout-03.gif

 

자 이제 블록의 구조를 알아보기가 쉬워졌습니다.

 

내용과 브라우저 사이에 하얀 공백이 있는 것은 문서의 내용상 최상위 블록인 <body>블록이 가지는 margin 값 때문입니다.

CSS에 " body { margin: 0; } " 라는 코드를 한줄 추가해주면 없앨 수 있지만 그냥 가도록 하겠습니다.

 

자 이제 본격적으로 시작됩니다.

그림에서 보시는 바와같이 블록은 가로 크기가 100%를 기본으로 합니다. 그래서 브라우저의 좌,우 방향으로 꽉 차는 영역을 차지하게 됩니다. 이것은 역시 기본값이 가로100%인 <body>태그로 부터 상속받은 크기를 기준으로 100% 인 것입니다.

 

우리가 만드려는 사이트의 가로크기를 편의상 320px (픽셀)의 작은 크기로 정하겠습니다. 내용이 들어가있는 4개의 블록을 모두 감싸고있는 bodyWrap 블록에 가로크기 속성을 정해주도록 하겠습니다.

  1. #bodyWrap {   width: 320px; }
  2. #header {                   background: #CCCCEE; }
  3. #columnLeft {               background: #CCEECC; }
    #content {                  background: #EECCCC; }
    #footer {                   background: #CCCCEE; }

위와 같이 한줄을 추가해주면 이렇게 됩니다.

layout-04.gif

모든 내용의 가로크기가 320px 안에 들어갔습니다. 4개의 블록에는 width 값을 정해주지 않아도 상위블록인 bodyWrap 블록의 width 값을 상속받아 최대치가 320px이 된 것입니다. 최대치가 320px 로 정해졌다고 해서 이 영역을 절대 벗어나지 못하는 것은 아닙니다. 그렇지만 이번단원에서 그런 자세한 속성은 다루지 않겠습니다.

여기서 우리는 블록의 좌우정렬 기본값은 좌측정렬 이라는 것을 알 수 있습니다.

 

홈페이지를 브라우저의 가운데에 위치하도록 조절해 봅시다.

  1. #bodyWrap {  width: 320px;   margin: 0 auto 0 auto; }
  2. #header {                                           background: #CCCCEE; }
  3. #columnLeft {                                       background: #CCEECC; }
    #content {                                          background: #EECCCC; }
    #footer {                                           background: #CCCCEE; }

margin 속성에 4개의 값이 들어가있습니다. 이것은 순서대로 Top(상), Right(우), Bottom(하), Left(좌)를 의미합니다. 순서는 위쪽방향을 기준으로 시계방향입니다. 이것을 풀어서 비교해보면 이렇게 됩니다.

 

  1. #bodyWrap { width: 320px;  margin: 0 auto 0 auto; }
  2. #bodyWrap { width: 320px;  margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; }

위 두 줄의 CSS 코드는 같은 의미입니다. 앞으로 짧은 약식표기를 사용하도록 하겠습니다.

그 의미는 좌,우의 바깥여백을 자동으로 맞추도록 한것입니다. 양쪽 다 자동(auto)이니까 같은 비율의 여백을 갖게 되는 것입니다.

 

결과를 볼까요?

layout-05.gif

 

이제는 columnLeft 블록의 가로크기를 80px 로 줄이겠습니다.

  1. #bodyWrap {   width: 320px;   margin: 0 auto 0 auto; }
  2. #header {                                            background: #CCCCEE; }
  3. #columnLeft { width: 80px;                           background: #CCEECC; }
    #content {                                           background: #EECCCC; }
    #footer {                                            background: #CCCCEE; }

layout-06.gif

columnLeft 블록은 이제는 bodyWrap으로 부터 상속받은 width 속성을 무시하고 자신만의 width 속성을 가졌습니다.

 

서브메뉴를 원하는 크기로 줄였지만 4개의 블록은 여전히 위에서 아래로 순서대로 늘어놓여있습니다. 블록 엘리먼트의 정렬 기본속성이 수직나열입니다. 우리가 해야할 것은 이 수직나열을 수평나열로 바꾸어 주는 것입니다. 마치 인라인 엘리먼트처럼 수평으로 싸여나가도록 만들어 줌으로서 columnLeft 블록과 content 블록 간의 위치를 조절할 것입니다.

  1. #bodyWrap {                  width: 320px;   margin: 0 auto 0 auto; }
  2. #header {                                                           background: #CCCCEE; }
  3. #columnLeft {  float: left;  width: 80px;                           background: #CCEECC; }
    #content {                                                          background: #EECCCC; }
    #footer {                                                           background: #CCCCEE; }

layout-07.gif

columnLeft 블록이 좌측으로 유동(float) 되면서 수직정렬에서 벗어났습니다.

columnLeft 블록이 content 블록 위에 떠있다고 보시는게 이해하시기 편할 것입니다.

content 블록은 여전히 가로 320px의 너비를 가지고 수직정렬 되고 있지만 그 내용은 columnLeft 블록을 피해서 흘러갑니다.

 

여기서 한가지 실험을 해보고 넘어가겠습니다.

columnLeft 블록의 내용이 많아서 세로길이가 길어지면 어떻게 되는지 봅시다.

  1. #columnLeft {  float: left;  width: 80px; height: 180px;        background: #CCEECC; }

layout-08.gif

columnLeft 블록이 content 블록뿐 아니라 footer 블록까지도 영향을 미치는 군요.

이것은 float 되는 블록이 자기자신 이후에 오는 정상흐름(수직정렬)중인 모든 블록에 영향을 준다는 뜻이됩니다.

이런 현상을 방지하기 위해서 footer 블록의 CSS를 다음과 같이 고치도록 하겠습니다.

  1. #footer {         clear: both;                                     background: #CCCCEE; }

layout-09.gif

clear 속성은 해당 블록이 유동(float)블록을 허용할 것인지 결정해주는 속성입니다. 들어 갈 수있는 값은 none(기본값), right, left, both, inherit(상속받은값) 입니다. both를 값으로 주었기 때문에 footer 블록은 좌우모든 방향에서 자신위에 다른 블록이 떠있는 것을 허용하지 않습니다.

 

columnLeft 블록의 세로길이를 원래대로 돌려놓겠습니다.

layout-07.gif

 

다음으로 할 것은 content 블록 이 columnLeft 블록과 겹치지 않도록 만들어 주는 것입니다.

 

방법은 두가지 이상 존재합니다.

  1. content 블록도 columnLeft 블록처럼 float (좌측) 시키고 너비를 240px (320px-80px) 로 정해준다.
    #content {    float: left;     width: 240px;    background:#EECCCC; }
  2. content 블록도 columnLeft 블록처럼 float (우측) 시키고 너비를 240px (320px-80px) 로 정해준다.
    #content {    float: right;   width: 240px;    background:#EECCCC; }
  3. content 블록에 왼쪽 margin 속성을 주어서 80px 만큼 떨어지게 만든다.

이런 여러가지 방법중에 서 어느것을 선택할 지는 여러가지 브라우저의 특성에 따라 다르게 보이는 경우가 없는지 실험해가면서 제대로 보이는 쪽을 선택하면 됩니다. 테스트 해보니 2번째 방법은 IE에서 약간 다르게 보이는군요.

3번째 방법으로 진행하겠습니다.

  1. #bodyWrap {                  width: 320px;   margin: 0 auto 0 auto; }
  2. #header {                                                           background: #CCCCEE; }
  3. #columnLeft {  float: left;  width: 80px;                           background: #CCEECC; }
    #content {                                   margin: 0 0 0 80px;    background: #EECCCC; }
    #footer {      clear: both;                                         background: #CCCCEE; }

layout-10.gif

자~ '중간정렬 2단(컬럼) 레이아웃'이 완성되었습니다.

 

한가지만 더 손을 볼까요?

columnLeft 블록 아래쪽에 보이는 하얀색 영역은 <body>태그의 기본색을 보여주고 있습니다. 좀 어색하군요. 이 영역은 content 블록에 속해있습니다. 정확하게 말하면 content 블록의 margin 영역이죠. 그리고 투명하기 때문에 <body>의 색깔이 보이고 있습니다.

이 곳에 columnLeft 블록과 같은색이 들어가있으면 좋겠습니다.

그런데 margin 영역은 색상속성을 가질 수 없기 때문에 모든 내용블록을 둘러 싸고있는 bodyWrap 블록에 배경색을 넣어주면 되겠습니다.

  1. #bodyWrap {                  width: 320px;   margin: 0 auto 0 auto;  background: #CCEECC; }
  2. #header {                                                            background: #CCCCEE; }
  3. #columnLeft {  float: left;  width: 80px;                            background: #CCEECC; }
    #content {                                   margin: 0 0 0 80px;     background: #EECCCC; }
    #footer {      clear: both;                                          background: #CCCCEE; }

layout-11.gif

음... 근데 또 고민이 생겼습니다.

좌측단보다 우측단이 내용이 적어서 세로길이가 짧아지면 content 블록 아래쪽에 #CCEECC이런 색상이 보이게 되겠군요. 해결책은 배경색이 아니라 배경이미지를 사용하는 것입니다. 좌측 80px은 #CCEECC색을가지고 우측 240px은 #EECCCC색을 가지는 높이 1px짜리 이미지를 배경으로 만들어 background:url(./bg.gif) repeat-y left top; 이렇게 넣어 주는 것이 더 좋겠습니다.

 

추가로 '3단(컬럼) 레이아웃' 을 만들어 볼까요?

아래 코드를 눈으로 한번 분석해보시기 바랍니다.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>xhtml</title>
  5. <style type="text/css">
  6. <!--
    #bodyWrap {                   width:320px;   margin: 0 auto 0 auto;   background: url(./bg.gif) repeat-y left top; }
    #header {                                                             background: #CCCCCC; }
    #columnLeft {  float: left;   width: 80px;                            background: #CCEECC; }
    #columnRight { float: right;  width: 80px;                            background: #CCCCEE; }
    #content {                                    margin: 0 80px 0 80px;  background: #EECCCC; }
    #footer {      clear: both;                                           background: #CCCCCC; }
    -->
  7. </style>
  8. </head>
    <body>
    <div id="bodyWrap">
  9. <div id="header">[로고] 홈 | 회사소개 | 제품소개 | 짬뽕정보</div>
  10. <div id="columnLeft">
  11. 소개<br />인사말<br />연혁<br />오시는길
  12. </div>
  13. <div id="columnRight">
  14. 추천제품 :<br />고추짬뽕<br />삼선짬뽕<br />해물짬뽕
  15. </div>
  16. <div id="content">
  17. 안녕하십니까?<br />짬뽕주식회사입니다.<br />짬뽕주식회사는 최고의 짬뽕을 만들기 위해 50년간 한우물을 파다가 기름이 나와서 기름장사를 하려다가 기름이 하루만에 바닦나서  포기하고 어제부터 다시 짬뽕을 만들기 시작한 굴지의 중화요리 전문 기업입니다.
  18. </div>
  19. <div id="footer">저작권은 (주)짬뽕에 있는거 같아요.</div>
  20. </div>
  21. </body>
  22. </html>

layout-12.gif

 

이 단원을 통해 설명한 방법이 전부는 아니지만 DIV 블록 엘리먼트를 통한 레이아웃을 잡는 방법에 관하여 이해하시는데 도움이 되셨길 바라면서 마치겠습니다.

 

 

 

zbXE 공식사이트 레이아웃 분석#

이제는 zbXE에 기본적으로 포함되어 있는 "zbXE 공식사이트 레이아웃 ver 0.1" 의 구조를 한번 살펴봅니다.

 

  1. <div id="bodyWrap">
        <div id="header">
            ~상단 내용~
        </div>
        <div id="contentBody">
            <div id="columnLeft">
                ~좌측 내용~
            </div>
            <div id="columnRight">
                ~콘텐츠 영역~
            </div>
        </div>
        <div id="footer">
            ~하단 내용~
        </div>
    </div>

앞의 단원들을 이해하셨 다면 이정도 문서는 구조가 한눈에 쏙~ 들어오시겠죠?

웬만한 사이트는 척보면 구조가 훤히 보이시나요? 매트릭스는 어디에나 존제합니다. 빨간약을... 쿨럭~. (-.-;;)

 

(이 단원은 작성중입니다.)

 

 

 

 

 

 

XHTML 유효성 검사도구#

XHTML 유효성이란 작성된 문서가 XHTML 문법에 적합한가에 관한 판단입니다.

 

아래 사이트들은 여러분이 작성한 문서가 얼마나 규격에 맞게 만들어졌는지 판단하는데 도움을 줄 것입니다.

 

XHTML 유효성 검사 도구 : http://validator.w3.org/

KLDP의 한글화된 CSS 유효성 검사 서비스 : http://css-validator.kldp.org/

 

에러가 하나도 없는 완벽한 XHTML 문서작성에 도전해 보세요. !!! 아자 !!!

 

(이 단원은 작성중입니다.)

 

기타 :

브라우저의 쿼크모드 (Quirks Mode : 변덕모드)

모든 브라우저는 웹표준을 준수하지 않는 페이지를 해석할 때에도 나름대로의 방법으로 가능한 제대로 보여주기 위해서 최선을 다하는데 이것을 쿼크모드 라고 합니다. 여기에서 "나름대로의 방식"이 브라우저마다 다르기 때문에 브라우저 마다 다르게 보이는 것입니다.

http://naradesign.net/wp/2007/03/27/118/

http://www.quirksmode.org/css/quirksmode.html

 

 

 

출처 : http://www.zeroboard.com/?mid=manual&pageid=729589

스킨 시스템의 이해

 

zbXE를 이용해서 홈페이지를 만들 때 디자인을 마음데로 바꿀 수 있도록 해주는 것이 바로 스킨(Skin) 입니다.

이 단원에서는 "스킨을 만든다."는 것은 제로보드 시스템에서 "어느 부분을 작업하는 것인가?" 를 이해하고 그 처리과정을 살펴보고자 합니다.

skin_structure-1.gif

위 그림은 하나의 웹페이지가 완성되기 까지 zbXE시스템이 스킨을 가져와서 어떻게 처리하고 최종적으로 브라우져로 뿌려지는지에 관한 개념을 그림으로 간략하게 설명하고 있습니다.

 

zbXE는 크게 Skin부분 과 Program부분으로 나누어 볼 수 있습니다.

사전적 의미 :

  • Skin = "피부, 살갗, 표피, 가죽"

 

Skin부분은 사전적 의미처럼 피부와 같이 겉으로 드러나 보이는 '모양'을 결정하는 부분입니다. 기본적인 피부는 XHTML로 이루어지고 CSSImage로 화장을 하고 옷을 입으며, JS(JavaScript)와 같은 장신구도 달 수 있습니다. 그리고 XML로 이름표를 답니다.

 

Program부분은 '심장'이나 위장, 간, 신장 등과 같이 내부적인 '기능'을 가지고 있는 부분이며 PHP 언어로 만들어져 있습니다. zbXE의 '심장'Core(코어)입니다. Core는 Skin을 읽어내고, 각 모듈(Mudule)에드온(Addon), 위젯(Widet)의 기능을 통해 얻은 결과를 조합하고 최적화(Optimize) 해서 브라우저로 보내주는 기능 등을 포함하고 있습니다.

 

그리고 SkinProgram을 연결해주는 것이 바로 Template Script 입니다.

 

그림에 관한 추가설명 :

Skin은 기본적으로 XHTML 문법으로 만들어지며 디자인을 위해서 Image 파일과 CSS를 이용합니다.

 

JavaScript를 이용해서 페이지를 동적으로 만들기도 합니다. 예를들어, "ZBXE 공식 레이아웃"에서 JS가 하는 역할은 메뉴의 특정부분을 보였다 안보였다 할 수 있도록 해주는 기능을 가집니다. 이런 기능은 필요에따라 마음대로 추가할 수 있습니다.

 

XML은 해당 스킨에 관한 정보를 (필요에 따라 여러가지 언어로) 기록하고 확장변수를 설정하는 등의 역할을 합니다. 여기에서 '스킨에 관한 정보'란 스킨의 이름, 스킨의 버전(Version), 스킨을 디자인한 디자이너의 이름, 코딩한 프로그래머의 이름을 기록하거나 간략한 사용법 등을 기록하는 것을 말합니다. 확장변수는 해당 스킨을 관리하는 관리자모드에서 사용할 수 있는 옵션을 만들고, 그 값에 따라 스킨을 다르게 보이게 만들 수 있도록 해줍니다. 예를들어, 같은 디자인인데 전체적인 색상을 흰색, 검은색, 붉은색 등으로 바꿀 수 있는 옵션을 가질 수 있도록 하는 것이 확장변수이며 이 확장변수는 XHTML안에서 Template Script(템플릿 스크립트)를 이용해서 활용되고 zbXE의 Core에 포함된 Template Handler 가 그 문법을 해석해서 기능하도록 해줍니다.

 

이런 여러가지 요소로 이루어진 스킨을 zbXE 프로그램이 읽어들여 DB와 연동시키고 레이아웃스킨, 모듈스킨, 위젯스킨 등을 조합해서 하나의 웹페이지를 만들어 냅니다.

 

zbXE의 프로그램이 계산해서 완성된 페이지 및 요소들(위젯 등)은 files/cache 폴더에 별도로 저장해 두었다가 (설정에 따라) 다시 계산할 필요가 없는 부분을 요청받으면, 이런 일련의 계산과정을 다시 하지 않고 저장된 내용을 꺼내서 보여주어 효율성을 높여줍니다.

 

스킨을 이루는 각각의 요소들에 관한 자세한 설명은 다른 단원들을 통해서 설명될 것입니다.

* 특히, "Template Script"에 관해서는 스킨문법(템플릿 스크립트 문법) 단원을 참조하십시오.

 

 

 

좀 더 자세하게 들여다 보겠습니다.

skin_structure-2.gif

그림과 같이 모듈위젯 별로 각각의 Skin이 여러개 존재합니다.
레이아웃과 메뉴구성, 내용 및 위젯의 위치를 결정하는 레이아웃 스킨 + 내용을 표시하는 모듈 스킨(주로 게시판) + 부가적인 내용을 표시하는 위젯 스킨(예,최근게시물)이 zbXE 프로그램에 의해 조합 되었을 때 비로소 하나의 완성된 웹페이지가 됩니다.

 

즉, 각각의 Skin은 하나의 완성된 웹페이지일 수 없습니다.

 skin_structure-3.gif

Skin은 HTML문법으로 작성되지만 정작 기본 구조인<html></html> 태그도 가지고 있지 않습니다. Skin은 단지 <body></body> 태그 안에 들어갈 내용의 디자인만 가지고있습니다. zbXE가 이 스킨과 정보를 조합한 내용을 최종적으로 <html><head></head><body>내용</body></html> 태그를 만들어 줌으로서 완성된 웹페이지가 된다는 점에 유의하십시오.

 

위 그림에서 보시면 각각의 스킨에 포함되어있는 CSS 파일과 JS 파일은 import 라는 Template Script 명령어를 통해서 최종적으로 완성될 페이지의 <head></head> 안에 모이게 됩니다.

 

정리 :

아시다시피 Skin을 구성하는 언어인 XHTML, CSS, JavaScript, XML은 zbXE와는 별도로 독립적으로 존재하는 언어입니다. 그런데 이런 별도의 언어들zbXE 프로그램과의 연결고리가 바로 스킨 시스템이며, 스킨 시스템은 Template Script를 통해서 작동합니다.

 

 

zbXE에서 Skin이 어디에 들어있는지 알아보겠습니다.

skin_structure-4.gif

 

 

스킨 시스템을 이해하시는데 도움이 되셨기를 바랍니다.

 

 

출처 : http://www.zeroboard.com/?mid=manual&pageid=392287

제로보드 XE의 스킨은 4와 다르게 PHP로 다시 변환되는 특수한 템플릿 언어를 사용합니다. 따라서 스킨을 제작하면서 자신이 원하는 내용을 넣기 위해 본 내용을 숙지해야 합니다.

 

변수

변수는 PHP와 동일하게 사용되며, Zeroboard XE 내부에서 사용되는 여러가지 변수를 그대로 이용할 수 있습니다. 단, 출력시에는 {...}문을 사용합니다.

 

  1. {$document_srl}

 

위의 문장은 $document_srl이라는 변수를 출력하도록 만듭니다. 아울러 여러가지 출력함수를 매칭시켜 화면출력을 시킬 수도 있습니다.

 

  1. {$oDocument->getTitleText()}

 

그러나 {...}안에 출력될 수 없는 문장등을 기재하면 안됩니다.

 

각 스킨별로 어떤 변수를 쓸수 있는지에 대해서 미리 이해하는 것이 필요하기 때문에 배포본에 함께 동봉된 다른 스킨들이 어떤 변수를 쓰고 있는지 숙지하시기 바랍니다.

 

제어문

스킨에 간단한 제어문을 사용할 수 있습니다.

 

조건문

 

  1. <!--@if(조건식)-->
  2. <!--@elseif(조건식)-->
  3. <!--@else-->

 

위의 문장등을 이용하여 조건에 맞추어 스킨 출력을 제어합니다. 조건문에 의한 실행 블록(block)을 정의하기 위하여 반드시

 

  1. <!--@end-->

 

위와 같이 end문을 반드시 기입해야 합니다. 예를 들어 newest_document 위젯의 스킨에서 다음과 같은 조건문 처리가 가능합니다.

 

  1. <!--@if(count($widget_info->document_list) > 0)-->
  2.      .... 문서정보 출력...
  3. <!--@else-->
  4.      최근 문서가 없습니다.
  5. <!--@end-->

 

조건식(Condition Expression)안의 내용은 PHP로 곧바로 해석되기 때문에 PHP에서 가능한 여러가지 연산자를 쓸 수 있습니다.

 

  1. <!--@if($logged_info && $logged_info->is_admin)-->

 

위의 조건문은 스킨에서 현재 유저가 로긴을 했는지, 그리고 관리자인지 검사하는 것을 보입니다.

 

반복문

 

배열등을 처리하기 위하여 foreach문장을 사용할 수 있습니다. 반복문 역시 end로 해당 블록을 반드시 명시해야 합니다.

 

  1. <!--@foreach($widget_info->document_list as $oDocument)-->
  2. <!--@end-->

 

foreach의 조건식 역시 PHP의 foreach에 사용되는 것과 동일하게 해석되므로, Key와 Value를 분리하기 위해 다음과 같이 쓸 수도 있습니다.

 

  1. <!--@foreach($widget_info->document_list as $key => $oDocument)-->
  2. <!--@end-->

 

 

간단한 PHP문 사용

 

템플릿 파일에서 {@...}문을 이용하면 간단한 PHP문장을 해석하도록 해줍니다. 예를 들어,

 

  1. {@$is_logged=Context::get('is_logged')}

 

위와 같이 사용할 수 있습니다.(예문은 현재 로그인했는지 확인하는 XE 기본 문항을 스킨에 쓸수 있도록 해준 것입니다.

그러나 {@...}을 사용할때 안에 들어가는 것은 한문장으로 해석가능한 완전한 PHP문이어야 합니다. 예를 들어,

 

  1. {@$test = 364; $test=$test*$test}

 

위와 같이 PHP상에선 별 문제없어보이는 식이지만 이미 하나의 문장이 아니기 때문에 에러를 일으킵니다.(사이트가 보이지 않는 등의 치명적인 문제를 일으키기도 합니다.)

 

※ 내부적으로 {@...}안의 문장은 PHP의 eval() 함수를 이용하여 파싱됩니다.

 

 

파일의 분할

 

공통적으로 사용되는 템플릿 파일들을 나누어 관리할 수 있습니다.

 

  1. <!--#include('파일경로')-->
  2. <!--#include("파일경로")-->

 

주의: 위의 include문은 php의 include와 다르게 작동됩니다. 어디까지나 분할된 템플릿 파일을 include한다는 사실에 유의하십시오. 일반 PHP 파일은 include 해도 PHP로 해석되지 않습니다.

 

 

CSS/자바스크립트와의 연결

 

CSS나 자바스크립트를 사용하기 위하여 다음과 같이 <!--%import(경로)-->문법을 이용합니다.

 

  1. <!--%import("js/blog.js")-->

 

위의 예제는 js/blog.js파일을 현재의 스킨과 연결시키기 위해 사용된 문장입니다. 한편으로 이 문장은

 

  1. {@Context::addJsFile("js/blog.js")}

 

과 동일한 실행결과를 가집니다.

 

  1. <!--%import("css/common.css")-->

 

위의 예제는 css/common.css파일을 현재의 스킨과 연결시키기 위해 사용된 문장입니다. 한편으로 이 문장은

 

  1. {@Context::addCSSFile("css/common.css")}

 

과 동일한 실행결과를 가집니다.

 

주의: 이렇게 import된 JS파일은 선언된 위치와 상관없이 HTML의 <HEAD>안에 자동으로 삽입됩니다.

 

 

링크

'아야 어디가'님의 '레이아웃을 처음부터 만들고 싶은...' 강좌 시리즈

 

출처 : http://www.zeroboard.com/?mid=manual&pageid=392293

zbXE에서는 사이트의 메뉴와 디자인을 레이아웃 기능을 통해서 쉽게 적용할 수 있습니다.

레이아웃은 메뉴 모듈과 위젯등을 이용해서 홈페이지, 블로그등 다양한 형태로 사이트를 운영할 수 있게 합니다.

 

zbXE의 레이아웃과 제로보드4의 헤더/푸터

제로보드4에서 사이트의 디자인을 위해 사용되던 헤더/푸터 파일의 사용은 일괄적인 관리를 할 수 없고 그 내용에 따라 잘못된 결과물을 출력할 수 있던 방법이였습니다.
html 규격에 어긋나는 등의 좋지 않은 결과가 생겨나기도 하였구요.


반면에 zbXE의 레이아웃은 게시판의 스킨처럼 손쉽게 적용할 수 있고 제로보드4의 헤더/푸터 기능에 비해서 더 강력하고 쉽게 제작할 수 있습니다.
또한 공유(배포)하기에 더욱더 편리한 형태를 가지게 되었습니다.

  • zb4 레이아웃
    zb4layout.png

 

  • 제로보드XE 레이아웃lyt.gif
    layout.html

    1. (헤더 내용)...
      {$content}
      (푸터 내용)...

이와같이 헤더와 푸터 파일을 각각 만들필요없이 layout.html 파일 하나로 간단히 레이아웃을 제작할 수 있습니다.

 

 

 

 

레이아웃 만들기

  1. 먼저 원하는데로 body부분의 레이아웃을 작성합니다.
    body 외의 html태그나 head는 XE가 알아서 처리합니다. 따라서 <body></body>태그 사이에 들어갈 부분만 작업하면 됩니다.
    또한 이때 컨텐츠, 통합검색, 로그인위젯, 메뉴, 언어선택 등이 차지할 공간을 미리 알맞게 비워두고 제작합니다.
  2. css와 js파일 삽입방법

    레이아웃 파일 가장 처음부분에 아래와 같은 방법으로 삽입합니다.

    1. <!--%import("(폴더)/(파일명).js")-->
      <!--%import("(폴더)/(파일명).css")-->

    보시는 것처럼 js파일과 css파일 삽입방법은 같습니다.
    컬러셋을 여러개로 제작하실 경우엔 조건문을 사용하여 각 컬러셋마다 다른 파일을 삽입하실 수 있습니다.

    1. <!--@if($layout_info->colorset == "white")-->
          <!--%import("css/white.css")-->
      <!--@elseif($layout_info->colorset == "black")-->
          <!--%import("css/black.css")-->
      <!--@else-->
          <!--%import("css/default.css")-->
      <!--@end-->

    위와 같이 조건문을 사용하여 여러 컬러셋에 대해 서로다른 css파일을 삽입할 수 있습니다.
    컬러셋은 info.xml에서 extra_vars로 사용자로부터 입력받을수 있게 하시고
    조건문에 관한 자세한 설명은 스킨 문법을 참고하세요.

  3. 이제 컨텐츠, 로그인위젯, 메뉴, 언어선택 등을 넣어봅시다.
    이 메뉴얼에선 제로보드XE 공식사이트 스킨(xe_official)에 쓰인 것들만 설명합니다.
    • 컨텐츠 부분
      게시판, 페이지 등이 나타날 부분으로, 꼭 넣어주셔야 합니다.
      간단히 {$content} 를 넣으면 됩니다.
    • 언어선택 부분
      언어 선택 버튼이 나타날 부분입니다.

      1. <ul>
           <!--@foreach($lang_supported as $key => $val)-->
              <!--@if($key!= $lang_type)-->
                 <li><a href="#" onclick="doChangeLangType('{$key}');return false;">{$val}</a></li>
              <!--@end-->
           <!--@end-->
        </ul>

      기본적으로 위와같이 넣으시면 됩니다.
      꼭 ul,li태그를 사용하실 필요는 없으며 css를 이용하여 다듬으셔도 무방합니다. (언어선택을 원치않으실 경우엔 아예 넣지 않으셔도 됩니다.)

    • 1차 메뉴 부분

      1차 메뉴가 나타날 부분으로, 꼭 넣어주셔야 합니다.
      먼저 info.xml에서 extra_vars에서 메뉴를 받아야합니다.
      그후에 레이아웃의 원하는 부분에 아래와 같은 코드를 넣어주시면 됩니다.

      1. <ul>
           <!--@foreach($main_menu->list as $key => $val)-->
              <!--@if($val['text'])-->
                 <!--@if($val['selected'])-->
                    {@ $menu_1st = $val }
                 <!--@end-->

                 <li <!--@if($val['selected'])-->class="on"<!--@end-->>
                    <a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a>
                 </li>

              <!--@end-->
           <!--@end-->
        </ul>

      언어선택 부분과 마찬가지로 꼭 ul,li태그를 사용하실 필요는 없으며 css를 이용하여 다듬으셔도 무방합니다.

       

    • 통합검색 부분
      통합검색 폼과 검색버튼이 나타날 부분입니다.

      1. <form action="{getUrl()}" method="post" id="isSearch">
                    <input type="hidden" name="mid" value="{$mid}" />
                    <input type="hidden" name="act" value="IS" />

                    <input name="search_target" type="radio" value="title" id="search_target" class="searchOrder" checked="checked" title="search option" />
                    <label for="search_target" class="checked" id="search_target_label" onclick="showHide('selectOrder'); return false">{$lang->title}</label>
                    <ul id="selectOrder">
                        <li>
                            <input type="radio" name="search_target" value="title" id="search_target1" />
                            <label for="search_target1" onclick="chkIsKind(1, '{$lang->title}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->title}</label>
                        </li>
                        <li>
                            <input type="radio" name="search_target" value="content" id="search_target2" />
                            <label for="search_target2" onclick="chkIsKind(2, '{$lang->content}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->content}</label>
                        </li>
                        <li>
                            <input type="radio" name="search_target" value="title_content" id="search_target3" />
                            <label for="search_target3" onclick="chkIsKind(3, '{$lang->title}+{$lang->content}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->title}+{$lang->content}</label>
                        </li>
                        <li>
                            <input type="radio" name="search_target" value="comment" id="search_target4" />
                            <label for="search_target4" onclick="chkIsKind(4, '{$lang->comment}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->comment}</label>
                        </li>
                        <li>
                            <input type="radio" name="search_target" value="tag" id="search_target5" />
                            <label for="search_target5" onclick="chkIsKind(5, '{$lang->tag}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->tag}</label>
                        </li>
                    </ul>
                    <input name="is_keyword" type="text" class="inputText" title="keyword" />

                    <input type="image" src="./images/{$layout_info->colorset}/buttonSearch.gif" alt="{$lang->cmd_search}" class="submit" />
                </form>

      마찬가지로 알맞게 스타일을 수정하셔도 무방합니다.

    • 로그인위젯
      배포가 목적이라면 로그인 위젯공간은 비워두시거나 기본 로그인스킨을 사용하시기 바랍니다. 이유는 만약 다른 사용자가 가지고있지 않은 로그인스킨 위젯 코드를 추가한다면 다른 사용자에게 혼란이 빚어질 것이기 때문입니다.

      제로보드XE 기본 로그인위젯 스킨(xe_official) 코드 (제로보드XE에 기본으로 포함되어 있습니다.)

      1. <img src="./images/blank.gif" class="zbxe_widget_output" widget="login_info" skin="xe_official" colorset="{$layout_info->colorset}" />
    • 이외에도 여러 extra_vars를 활용해 사용자정의로 설정할수있는 여러부분을 만드실 수 있습니다.


      이로써 레이아웃 틀의 제작이 끝났습니다.

  4. 레이아웃 설명달기 (info.xml)

    1. <?xml version="1.0" encoding="utf-8"?>
      <layout version="0.1">
          <title xml:lang="ko">레이아웃 이름</title>
          <author email_address="제작자 email" link="제작자 홈페이지 주소" date="작성일">
              <name xml:lang="ko">제작자 이름</name>
              <description xml:lang="ko">
                  레이아웃에 대한 간단한 설명
              </description>
          </author>
      </layout>

    위와 같은 형식으로 간단히 작성하시면 됩니다.
    레이아웃을 누가 만들었고 어떤 목적으로 만들었는지에 대한 내용을 info.xml 이라는 파일에 적어서 저장합니다.
    info.xml 파일로 레이아웃의 저작자가 누구인지 알릴 수 있고 차후에 자신이 볼때도 내역을 다시 확인할 수 있습니다.
    더불어 확장변수/메뉴연결 등을 지정할 수 있습니다.
    layout_location.gif
    info.xml은 conf폴더 내에 넣어두시면 됩니다.

 

파일 정리

레이아웃 이름으로 된 폴더를 만드신 후,
layoutfolder.png
위와 같이 layout.html, conf폴더와 이미지, js, css파일들을 넣으시면 됩니다.

 

링크

'아야 어디가'님의 '레이아웃을 처음부터 만들고 싶은...' 강좌 시리즈




출처 : http://www.zeroboard.com/?mid=manual&pageid=905090

홈페이지 형태의 레이아웃을 제작하는 예제를 통해 레이아웃 제작 하는 방법을 소개합니다.

레이아웃등을 포함한 모든 스킨은 다음과 같은 순서로 제작됩니다.


스킨 제작을 위한 필수 사항

  1. 디자인
    zbXE의 스킨들은 로그인 유무에 따라서 모양이나 기능이 변할 수 있습니다. 
    이에 맞춰서 디자인을 해주어야 합니다. 
  2. 퍼블리싱
    퍼블리싱이란 이미지로 되어 있는 디자인을 HTML과 CSS 혹은 Javascript로 만드는 것을 이야기합니다.
    이 과정에는 적절한 크기와 형태로 이미지를 나누어야 하고 HTML/CSS를 이용하여 이를 다시 합치는 작업이 있습니다. 
  3. 스킨 제작
    퍼블리싱이 끝난 결과물은 브라우저에서 잘 보여지지만 내용이 없는 껍데기일 뿐입니다.
    여기에 zbXE에서 작성된 컨텐츠와 연동될 수 있도록 생명력을 부여해야 합니다.
    이때는 02. zbXE 템플릿 스크립트 문법을 이용합니다. 

 

1. 디자인 - 스킨 제작을 위한 구성 설계

레이아웃은 홈페이지 혹은 블로그등의 사이트 껍데기라고 간단히 이야기할 수 있습니다.

즉 내용이 출력되는 부분을 제외한 나머지를 담당하고 있는 것입니다.

여기에 메뉴(menu) 모듈에서 생성한 메뉴를 연동하게 되면 하나의 훌륭한 사이트 레이아웃이 되어 멋지게 동작할 수 있습니다.

 

레이아웃에는 다음과 같은 구성 요소 및 고민 사항이 필요합니다.

  1. 메뉴와의 연동
    레이아웃에 연동되는 메뉴를 몇개를 할 것인지와 각 메뉴마다 몇단계까지 지원할 것인지를 정해야 합니다.
    Javascript로 구성될 경우에 한해서 무한 단계까지 가능하겠지만 보통의 UI(usre interface)들은 2~3단계로 구성되어 있습니다.
  2. 기본으로 탑재될 위젯
    레이아웃에 위젯들을 기본설치 할 수 있습니다.
    이 위젯들은 위젯 관리 페이지에서 생성된 코드를 삽입함으로서 편하게 추가가 가능합니다.
    보통 홈페이지형 레이아웃에는 로그인정보만을 기본으로 탑재하고 블로그형  레이아웃은 최신글/댓글등의 블로그툴에서 자주 사용되는 위젯들을 기본 탑재하게 됩니다.

 

위 사항을 고려하여 먼저 디자인을 합니다.

디자인시에 마우스 오버시 혹은 선택되었을때의 효과도 미리 고려하는 것이 좋습니다.

 

2. 퍼블리싱 - 최대한 가볍고 여러가지 환경에서 변함 없이..

최근에는 웹표준을 준수하는 것에 대한 요구가 높아지고 있습니다.

웹표준을 준수하는 방법이나 지침서들은 많이 있으니 여유가 있을때 공부하시는 것을 추천드립니다.

다만 웹표준이란 결국 다양한 환경에서, 그리고 출력되는 컨텐츠가 단순히 이쁘게 하기만을 위한 것이 아니라 의미를 가지도록 하기 위한 방법이므로 웹표준이 최우선이지는 않습니다.

하지만 웹표준을 준수하여 퍼블리싱을 할 경우 차후 유지보수시에 매우 편하기도 하니 가능한 준수하는 것이 좋습니다.

 

웹표준과 별도로 다양한 브라우저에서 잘 보이게 하기 위한 크로스 브라우징은 늘 고민거리이지만 가능한 지키는 것이 좋습니다.

크로스 브라우징은 정성을 들여야 하는 것이니만큼 충분한 시간적 여유를 두고 진행하시는 것이 좋습니다.

 

레이아웃의 퍼블리싱은 대부분 간단하지만 메뉴의 선택에 따른 동적 변화를 준다든지 컨텐츠의 양에 따라 레이아웃이 깨어지지 않도록 하는 부분등은 유의를 하여 테스트를 하여야 합니다.

 

3. 스킨제작 - 생명을 부여하자

zbXE의 스킨으로 생명력을 부여하기 위해서는 02. zbXE 템플릿 스크립트 문법을 이용합니다.

다행히 레이아웃에는 많은 문법이 사용되지 않고 대부분 기존에 제작된 레이아웃들의 문법을 가져오는 것으로 쉽게 적용할 수 있습니다.

그리고 레이아웃에서 동적으로 변화를 주고 싶은 부분을 변수화 하여 직접 입력받아 사용하도록 할 수 있습니다.

 

 

위의 3단계로 실제 레이아웃을 만들어 보는 예제를 소개하도록 하겠습니다.

01. 디자인 으로 넘어가봅시다.

 

출처 : http://www.zeroboard.com/?mid=manual&pageid=905214

레이아웃 제작을 위한 디자인은 funny4u님께서 해주신 것으로 하겠습니다.
( 참고 : http://www.zeroboard.com/16573853 )

 

layout2.jpg

 

일단 위와 같은 디자인 요소로 되어 있습니다.

간단히 하기 위해서 메뉴는 1개만 있고 3단계까지 가능하도록 합니다.

통합 검색 폼과 로그인 정보 위젯 1개를 기본 탑재하도록 합니다.

 

제일 상단 메뉴의 경우  마우스 오버시/ 선택시 배경 이미지가 살짝 달라지도록 하면 될 것 같습니다.

 

위와 같이 디자인을 하였으면 02. 퍼블리싱으로 넘어갑니다.


출처 : http://www.zeroboard.com/?mid=manual&pageid=905300

  • 01. 디자인에서 만든 디자인을 퍼블리싱하기 위해서 각각의 동작을 구현하기 위해서 여러부분으로 잘라야 합니다.

여러가지 방법이 있겠지만 아래와 같이 자르도록 하겠습니다.

 

이미지 자르기

layout2.jpg 

 

위와 같이 목적을 가지고 자르도록 합니다.

자를때는 아래에서 소개하는 파일 포맷을 잘 이해하여 정교하게 하는 것이 좋습니다.

 

이미지 파일은 gif, jpg, png등이 일반적으로 사용됩니다.
각각 목적과 효과가 다릅니다.

  1. gif 
    상대적으로 작은 용량으로 저장할 수 있고 투명/ 애니메이션 효과가 가능하지만 큰 이미지에는 사용을 자제하는 것이 좋음
    그리고 gif파일은 color index를 포함하므로 가능한 색상 수가 적을 수록 파일 크기가 작아짐
  2. jpg 
    이미지를 압축 저장하기 때문에 큰 파일 저장할때 유리하고 직접 압축질을 선택할 수 있어서 상황에 따라 파일 크기 조절 가능
    다만 압축 저장이 되어 원본이 훼손 될 수 있으니 연결되는 분위를 자를 경우 색상의 변화가 생길 수 있음
  3. png
    gif처럼 투명 효과도 제공하고 특히 alpha값, 즉 투명도를 반영할 수 있어서 매우 편하고 강력히 사용할 수 있지만 IE6에서 제대로 지원이 되지 않는다는 단점이 있음.
    단 zbXE에서는 iePngFix등과 같은 className을 부여할 경우 정상적으로 투명/알파채널의 값이 반영이 됨  

 

HTML 문서 작성 준비

먼저 잘 잘라진 이미지를 이용하여 형태를 구성하여야 합니다.

HTML 문서는 여러가지 DocType(document type)을 가지고 그에 따라 조금씩은 다른 모습을 보여줍니다.

zbXE에서는 XHTML 1.0 Transitional 을 이용하고 있습니다.

먼저 손쉽게 작업하기 위해서 layout_sample.zip 파일을 다운로드 받으세요.

이 파일에는 레이아웃을 생성하기 위한 가장 기본적인 파일들이 있습니다.

각 파일들의 구성 요소는 다음과 같습니다.

  • conf/info.xml : 레이아웃 제작자 정보 및 컬러셋/ 확장변수등을 입력받기 위한 설정 파일입니다. 
  • css/layout.css : utf8로 저장되어 있고 utf8을 사용한다고 명시된 css 파일입니다. 
  • images/ : 이미지가 저장될 위치의 빈 폴더입니다. (다른 이름이어도 됩니다) 
  • layout.html : 가장 기본적인 코드가 포함된 html 파일입니다.

 

layout_sample.zip 파일을 다운로드 받아서 압축을 풀어 적당한 곳에 놓으세요.

그리고 layout.html 파일을 더블클릭하거나 브라우저에 끌어다 놓으면 아래와 같은 내용만 출력됩니다.

{$content}

 

이제 퍼블리싱을 위한 기본 준비는 끝났고 실제 예제 이미지를 html 코드로 만들어 봅시다.

 

HTML 퍼블리싱

HTML문서는 특별한 경우(dhtml등)이 아니면 위에서부터 아래로 읽으면서 표시를 합니다.

여러가지 제작 방법이 있겠지만 여기서는 전체 그림을 대상으로 분할을 하고 진행하겠습니다.

layout3.jpg

 

 위와 같이 영역을 분할하는 것은 대부분 구성 요소의 배치를 보면 자연스럽게 되지만 이 레이아웃 디자인에서 좌우 그림자 배경때문에 조금 중첩이 되는 구조로 잘려집니다.

 

위와 같이 분할 하여 퍼블리싱한 결과는 다음 파일을 받으시면 됩니다.

 layout_sample_published.zip

 

파일을 다운 받으시고 압축을 풀고 layout.html 파일을 더블클릭하시거나 브라우저로 끌어 놓으면 결과가 보입니다.

 

일단 다음과 같은 유의점들이 있으니 참고하여 분석하시기 바랍니다.

  1. 가능한 가로/세로 길이가 정해진 것이 작업하기 편합니다.
    그렇지 않은 경우는 보다 세밀한 작업이 필요합니다.
  2. div는 한줄을 다 차지하는 속성을 가지지만 style의 float:left 나 float:right로 한 줄에 여러개가 나오게 할 수 있습니다.
    단 이 경우 각 div의 높이를 잘 지정해 주어야 원하는 배치가 가능합니다.
    그리고 FF/Safari/Opera에서는 div 속성에 overflow:hidden 을 추가해줌으로서 그 div의 높이가 정확히 파악이 되지만 IE계열에서는 float를 사용한 div들 제일 끝에 <div style="clear:both"></div>를 삽입해주어야 합니다.
    div의 배치를 할때 border:1px solid red; 와 같이 외곽선을 그리는 방법으로 배치방법을 확인할 수 있습니다.
  3. 메뉴링크의 경우 가능한 ul/ li 태그로 꾸미는 것이 차후 여러모로 도움이 됩니다.
    이 때 ul에 margin:0; padding:0; list-style:none; 을 지정함으로서 div와 똑같은 모양으로 만들 수 있습니다. 

 

 div로 레이아웃을 꾸미는 것은 다음 style들을 알면 어렵지 않게 할 수 있습니다.

 

  • float
    div의 좌우위치를 정합니다. left와 right값이 있습니다.
  • clear
    float로 인한 값을 무효화 시킵니다. left/ right/ both 가 있습니다.
  • width
    가로 길이를 지정합니다. 100px 과 같이 꼭 단위(px, pt, em등)을 지정해야 합니다.
  • height
    세로 길이를 지정합니다. 100px 과 같이 꼭 단위(px, pt, em등)을 지정해야 합니다. 
  • overflow:hidden
    정해진 크기를 벗어나면 튀어나온 부분을 숨기게 하거나 float로 된 div의 세로 높이를 정확히 파악하게 합니다.
  • margin
    div의 외부 여백을 조절합니다.
    margin:상px 우px 하px 좌px; 로 사용됩니다.
    margin:0 auto; 로 하면 가운데 정렬을 합니다.
  • padding
    div의 내부 여백을 조절합니다.
    padding:상px 우px 하px 좌px; 로 되며 IE계열에서는 width에 좌/우가 포함이 되어버리는 버그가 있습니다.

 

 

퍼플리싱까지 끝났다면 이제 03. 스킨 적용을 통해서 실제 zbXE의 레이아웃으로 동작할 수 있도록 합시다.



출처 : http://www.zeroboard.com/?mid=manual&pageid=907006


퍼블리싱된 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형식으로 되어 있지만 어렵지 않은 구조입니다.

info.jpg

 

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

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

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

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

 

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

  1.     <title xml:lang="ko">레이아웃 sample</title>
        <author email_address="제작자 메일 주소" link="http://제작자 홈페이지/블로그 주소" date="작성일자(년.월.일)">
            <name xml:lang="ko">작성자이름</name>
            <description xml:lang="ko">
               레이아웃에 대한 설명
            </description>
        </author>

title에는 레이아웃의 이름이, author의 각각 한글로 되어 있는 부분에는 해당하는 정보를 넣어주시면 됩니다.

함께 작업한 분들이 있는 경우 팀의 이름 또는 description에 상세 내용을 적으면 됩니다.

 

[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



출처 : http://www.zeroboard.com/?mid=manual&pageid=392290


위젯의 스킨 제작은 레이아웃인이나 다른 모듈의 스킨 제작과 크게 다르지 않습니다. 아울러 모든 스킨들중 가장 간단하기 때문에 스킨의 제작난이도가 낮아 제로보드XE 스킨제작에 대한 기초를 배우실 수 있습니다.

 

다만 위젯의 스킨 제작은 각 위젯이 제공하는 변수가 각각 다르기 때문에 제작하시려는 스킨에 대응되는 위젯의 내용을 잘 이해하실 필요가 있습니다.



출처 : http://www.zeroboard.com/?mid=manual&pageid=467575

게시판 스킨은 ZBXE 설치 디렉토리 아래의 modules/board/skins아래에 위치합니다. 디렉토리명은 스킨 제작자가 마음대로 정의할 수 있습니다. 반드시 정의되어야 하는 게시판 스킨 파일은 다음과 같습니다.

 

  • list.html : 가장 중요한 파일입니다. 게시판(또는 게시물)이 출력될 때의 형태를 정의합니다.
  • input_password.html : 암호를 입력해야 할 때 출력되는 파일입니다.(게시물이나 댓글)
  • write_form.html : 게시물을 작성할 때 참조되는 파일입니다.
  • delete_form.html : 게시물을 삭제할 때 참조됩니다.
  • comment_form.html : 댓글을 수정하거나 댓글의 답글을 달때 출력되는 파일입니다.
  • delete_trackback_form.html : 트랙백을 삭제할 때 출력되는 파일입니다.
  • message.html : 게시판과 관련된 메시지(에러 메시지와 같은)를 출력할 때 참조되는 파일입니다.
  • skin.xml : 스킨 정보를 담고 있는 파일. 아울러 제공할 옵션을 이곳에 명시합니다.

 

xe_official이나 cozy_simple처럼 XE와 배포되는 스킨의 디렉토리를 보시면 훨씬 많은 파일이 있습니다만 대부분 list.html에 모두 기재하기 어렵기 때문에 기능에 따라 분할된 파일들입니다. (list.html 파일을 보시면 <!--#include()-->문으로 각 파일들을 참조하는 것을 확인하실 수 있습니다.)

 

게시판 스킨을 만들때 중요한 변수

 

  • $oDocument : 현재 보여질 게시물이 있다면 해당 게시물의 내용을 담고 있는 인스턴스. (documentItem 클래스)
  • $document_list : 현재 보여질 게시물 목록
  • $module_info : 게시판 정보를 담고 있는 인스턴스. skin.xml에서 제공했던 변수를 사용할 수 있습니다. 예를 들어 skin.xml에 display_author라는 이름의 변수를 제공했다면, $module_info->display_author로 접근이 가능합니다.

 

제로보드XE는 스킨에 전달하는 대부분의 변수를 클래스의 인스턴스로 전달하기 때문에 중요한 변수들이 제공하는 메소드/프로퍼티들을 숙지해야 할 필요가 있습니다. 이에 대한 자세한 내용은 http://doc.zeroboard.com의 문서를 참조하시기 바랍니다.


출처 : http://www.zeroboard.com/?mid=manual&pageid=392064


개발자 Manual

아래와 같은 내용으로 매뉴얼이 구성되어 있으며 모자란 부분은 계속 추가되어 나갈 예정입니다.

  1. 제로보드XE의 구조
  2. 기본 구성 요소 안내
  3. 라이브러리 소개
  4. Action 소개
  5. 세션
  6. 마이그레이션 툴 개발
  7. 개발시 주의사항/팁
  8. 코딩 가이드 라인

 

참고 페이지

개발과 관련된 페이지를 소개합니다.

  1. 이슈트래킹 TRAC : 마일스톤/ 이슈를 관리하고 기본 문서들이 존재합니다.
    http://trac.zeroboard.com
  2. 자동문서 페이지 : 제로보드XE의 trunk를 이용하여 매일 자동으로 문서들을 생성합니다.
    http://doc.zeroboard.com : HTML 버전으로 된 개발문서입니다.
    http://doc.zeroboard.com/zeroboard_xe.pdf : PDF 버전으로 된 개발문서입니다.
  3. 관련 사이트

    http://www.zeroboard.com/dev_main : ZBXE 개발자 포럼 사이트입니다.
    http://www.zeroboard.com : 제로보드 공식사이트입니다.


출처 : http://www.zeroboard.com/?mid=manual&pageid=392294


제로보드XE 기본 구조

제로보드XE의 ROOT에는 아래와 같이 하나의 파일과 8개의 디렉토리(1개는 설치후 자동생성)가 있습니다.
모든 입출력은 index.php를 통해서 이루어집니다.
files 디렉토리는 설치시 생성되며 업로드되는 파일이나 내부적인 캐시파일, DB및 환경 설정 파일들이 저장됩니다.

 

디렉토리 구조

index.php : 제로보드XE index file
classes/ : 기본 클래스 라이브러리들
common/ : 공통 TPL(템플릿), CSS, JS, Images들
config/ : 기본 설정 및 함수들
modules/ : 모듈들
addons/ : 애드온들
layouts/ : 레이아웃들
widgets/ : 위젯들
files/ : 설치후 생성되는 디렉토리, 첨부파일 및 캐싱 파일들

 

기본 동작 절차

  1. index.php : 환경 설정 및 기본 library load, Context 초기화, ModuleHandler를 이용한 모듈 찾기 & 출력
  2. Context 초기화 (./classes/context/Context.class.php)
    1. DB및 환경 정보파일인 ./files/config/db.config.php load
    2. 언어타입 설정 : 쿠키정보로 언어를 결정. 쿠키정보가 없다면 HTTP_ACCEPT_LANGUAGE로 언어 결정 및 쿠키 세팅
    3. 기본 언어파일 로드 : ./common/lang/*.lang.php 중 언어타입에 맞는 파일을 load
    4. HTML(GET/POST/FILES) & XML등의 request type지정 및 변수를 set()
    5. 인증 관련 데이터를 세팅 (is_logged, logged_info)
    6. rewrite 모듈 사용 상태 체크 및 절대 경로를 구함
  3. 모듈핸들러 실행 (./classes/module/ModuleHandler.class.php)
    1. module, act, mid, document_srl에 대한 변수를 찾음 (이 4가지 변수중 하나는 필수. 아무것도 없으면 기본 mid찾음)
    2. 1번의 변수를 바탕으로 요청된 모듈을 찾아서 module config등의 초기화 실행
    3. 2번에서 찾아진 $oModule로 권한 및 모듈정보를 설정하고 모듈 실행
  4. 모듈의 실행 (./classes/module/ModuleObject.class.php의 상속)
    1. 3-3에서 찾아진 모듈을 바탕으로 호출된 act(Action)에 해당하는 변수를 찾음.
    2. act는 ./modules/모듈명/conf/module.xml 에 <actions>..</actions>에 정의되어 있음.
    3. 4.2에 정의된 action이 아닌 경우 action_forward 테이블에서 act값을 바탕으로 module을 찾음. (action forwarding)
    4. act변수는 (disp|proc)ModuleName(Admin)Act 로 네이밍 됨.
    5. 모든 action은 type, admin_index, standalone의 값을 가짐
      1. type : view, controller, model
      2. admin_index : true|false, 해당 모듈의 관리자 페이지의 index임을 지정
      3. standalone : true|false, mid없이 단독 실행 가능한지에 대한 설정
    6. act값에 의해 type이 정해졌으면 아래와 같은 규칙으로 class파일을 찾음
      1. 서비스 클래스 : ./modules/모듈명/모듈명.{type}.class.php
      2. 관리자 클래스 : ./modules/모듈명/모듈명.Admin.{type}.class.php
      3. 관리자 클래스는 act값에 Admin이 포함되어 있을시 사용되며 php파일의 load를 줄이기 위해서 분리
  5. ModuleHandler::displayContent($oModule)로 모듈에서 실행된 결과를 출력
    1. Display Class(./classes/display/DisplayHandler.class.php)는 $oModule, 즉 실행이 완료된 모듈객체를 받음
    2. 출력방식(HTML/XMLRPC)에 따라서 결과를 html 혹은 simple xml로 출력할지를 결정.

 

추가정보

  1. 필수 변수 4가지 : 아래 4가지 변수중 하나는 꼭 호출이 되어야 한다.
    1. document_srl(문서번호) : 제로보드XE의 모든 문서(document)는 고유한 값(sequence)를 가지고 있으며 이 값으로 문서모듈(document module)을 통해 요청된 문서의 모듈(module)의 값을 구한다.
    2. mid : 모듈(module)로 생성된 개체의 고유한 이름이며 이를 바탕으로 어떤 모듈을 호출하려는지 찾아낸다.
    3. act : 모듈(module)의 action 명세서의 등록된 값을 의미하며 view/model/controller에 해당하는 동작을 파악하고 유효한 요청인지에 대해서 검사를 하고 해당 요청을 실행하기 위한 준비를 할 수 있다.
    4. module : mid(모듈의 개체)가 아닌 모듈 자체를 호출할 수 있다.
    5. 아무런 변수가 없을 경우 mid중 기본으로 설정된 것을 강제로 호출하게 된다.
  2. Context의 set/get
    1. Context는 가장 기본적인 DB및 환경설정부터 템플릿엔진으로의 변수 전달등 ZBXE내에서 모든 정보를 관리하고 있다.
    2. GET/POST등의 변수는 자동으로 Context::set(key, value)를 통해서 내부 관리를 하게 되고 모듈등에서 setting되는 변수들 역시 동일한 관리가 됨
    3. php코드에서 Context::set('a', 1234)을 하게 되면 템플릿에서는 {$a} 로 사용 가능
  3. module, mid, act
    1. ZBXE에서는 module + act으로 모든 동작이 이루어짐. ("누구(module)"에게 "무엇(act)"을 해라는 의미)
    2. mid는 module의 instance(객체)로서의 의미를 가짐.
    3. 특정 module(or mid)에 존재하는 않는 act를 호출하게 되면 action_forward라는 DB 테이블에서 act에 해당하는 module을 찾아서 실행함. 이로 얻게 되는 장점은 특정 module(or mid)의 정보나 레이아웃을 그대로 유지한채 다른 모듈의 display를 연동할 수 있음.
    4. module의 클래스 파일은 모듈.class.php 1개와 모듈.{Admin|none}.{view|model|controller}.class 6개, 총 7개까지 구성이 되며 불필요한 부분은 생략 가능.
    5. module의 클래스 파일을 나눈 이유는 목적에 구분하여 trace를 쉽게 하고 인터프리터 언어인 php의 특성상 하나의 파일에 너무 긴 코드가 있음으로 인하여 불필요한 load발생을 줄이기 위함.
    6. module은 mid를 생성하여 사용할 수 있는 부분과 standalone으로 자체적으로 동작할 수 있는 2가지 동작 모델이 있음. standalone의 경우 통합 환경이나 관리 기능등에서 사용됨.



출처 : http://www.zeroboard.com/?mid=manual&pageid=392319


 ./classes

제로보드XE 내의 모듈/애드온/플러그인등의 각 개별 요소들이 공통적으로 사용하는 라이브러리들의 모읍니다.

기본 배포 버전은 아래와 같은 클래스를 가지고 있습니다.

참조 : 도표로된 클래스 분류 체계

 

./classes/context

Request Argument에 대한 정리 및 언어팩/DB 정보등을 관리합니다. 제로보드XE내에서 거의 모든 변수가 Context class를 통해서 관리됩니다.

./classes/context/Context.class.php

 

./classes/db

DB Handling을 위한 class 파일들이 위치함

./classes/db/DB.class.php : 모든 DB handling class의 상위 class. 공통 인터페이스를 가지고 있으며 설정된 DB에 해당하는 객체 생성
./classes/db/DBCubrid.class.php : cubrid를 지원하는 class 파일. ORDBMS인 Cubrid를 관계형DB 스타일로 이용하는 실험적 단계임.
./classes/db/DBMysql.class.php : MySQL을 MyIsam방식으로 사용할 수 있도록 하는 class 파일 (transaction 미지원)
./classes/db/DBMysql_innodb.class.php : MySQL을 innoDB로 사용할 수 있도록 하는 class 파일 (transaction 지원)
./classes/db/DBPostgresql.class.php : Postgresql을 지원하는 class 파일
./classes/db/DBSqlite2.class.php : sqlite2를 지원하는 class 파일
./classes/db/DBSqlite3_pdo.class.php : php의 PDO를 이용하여 sqlite3를 지원하는 class 파일 (추천)

 

./classes/display

모듈객체를 받아서 Response Method에 따라(HTML, XMLRPC) 결과 document를 생성하고 출력을 담당하는 클래스

./classes/display/DisplayHandler.class.php

 

./classes/editor

제로보드XE의 에디터컴포넌트의 상위 클래스. 에디터 컴포넌트 개별 객체에 대해 설정값을 세팅하는 기능만 있음

./classes/editor/EditorHandler.class.php

 

./classes/file

파일과 디렉토리를 생성/삭제하는 function을 모아 놓은 class 파일

./classes/file/FileHandler.class.php

 

./classes/handler

접미사로 Handler인 class의 상위 class.

./classes/handler/Handler.class.php

 

./classes/httprequest

다른 서버에 HTTP Request를 전송하고 result를 받아오는 클래스

./classes/httprequest/XEHttpRequest.class.php

 

./classes/mail

이메일 전송을 담당하는 클래스

./classes/mail/Mail.class.php

 

./classes/module

요청된 module을 찾아서 객체 생성/ 실행을 하는데 관련된 class file들이 있음
- ModuleHandler : request arguments를 이용하여 필요한 module을 찾아 객체 생성후 실행을 하고 return
- ModuleObject : 모든 module의 상위 객체. 모듈 기본 정보 및 레이아웃/템플릿의 관리 및 실행에 관련

./classes/module/ModuleHandler.class.php
./classes/module/ModuleObject.class.php

 

./classes/object

제로보드XE의 가장 상위 class file.
에러코드와 메세지, 추가변수에 대한 set/get/add를 담당.
제로보드내에서 에러코드와 에러메세지를 return시 object class를 생성하여 사용

./classes/object/Object.class.php

 

./classes/optimizer

JS/CSS파일등을 특정한 규칙에 맞게 하나의 파일로 만들어서 client에서 가져갈 수 있도록 성능향상을 지원하는 클래스

./classes/opimizer/Optimizer.class.php

 

./classes/page

페이지 네비게이션을 담당하는 class files. 전체갯수/페이지수/목록수등을 인자로 받고 PageHandler::getNextPage()를 이용하여 페이징 표시 가능

./classes/page/PageHandler.class.php

 

.classes/template

제로보드XE의 템플릿 엔진. 템플릿 파일의 컴파일 및 캐싱, 실행을 담당

./classes/template/TemplateHandler.class.php

 

./classes/widget

제로보드XE의 widget의 상위 class files. 특정 widget의 객체를 return하고 실행을 담당

./classes/widget/WidgetHandler.class.php

 

./classes/xml

Xml의 파싱 및 제로보드XE내의 xml query, xml js filter의 parser등이 있음

./classes/xml/XmlParser.class.php : xml 파싱
./classes/xml/XmlJsFilter.class.php : xml js filter의 컴파일 및 실행, 캐싱
./classes/xml/XmlQueryParser.class.php : xml query의 컴파일 및 실행, 캐싱

 

출처 : http://www.zeroboard.com/?mid=manual&pageid=392324

./common

제로보드XE에서 필수로 사용되는 자원들이 있습니다.

 

./common/css/default.css

가장 기본적인 style 및 제로보드XE 고유의 style이 정의되어 있습니다.

 

./common/js

기본 javascript file들이 있습니다.

./common/js/common.js : 창띄우기, 이미지크기 변경, 큰이미지 레이어로 보기, 회원 팝업메뉴등의 기본 js code
./common/js/tree_menu.js : 메뉴 관리 모듈에서 사용하는 tree 구조를 그려주는 js code
./common/js/x.js : Cross-Browser.com에서 배포하는 크로스브라우징을 위한 js code 라이브러리 (GNU GPL)
./common/js/xml_handler.js : 제로보드XE의 ajax 라이브러리 js code
./common/js/xml_js_filter.js : 제로보드XE에서 form의 submit시에 입력항목 체크 및 xml_handler를 이용한 서버와의 통신을 관리하는 js code
./common/js/iePngFix.htc : Internet Explorer에서 투명 PNG이미지를 표현하기 위함

 

./common/lang

기본 언어팩이 등록되어 있습니다. 기본 언어팩의 제일 앞 글자에 따라서 지원 가능한 언어팩이 설정이 됩니다.

./common/lang/ko.lang.php : 한국어
./common/lang/en.lang.php : 영어
./common/lang/jp.lang.php : 일본어
./common/lang/zh-CN.lang.php : 중국어
./common/lang/es.lang.php : 스페인어
./common/lang/ru.lang : 러시아어
./common/lang/fr.lang : 프랑스어

 

./common/tpl

출력을 위한 기본 레이아웃 및 회원가입등에 이용하는 calendar파일들이 있습니다.

./common/tpl/calendar.php : calendar 출력 (차후 변경 필요)
./common/tpl/common_layout.html : 기본 레이아웃, html의 header등을 지정하는 가장 기본적인 레이아웃 파일입니다.
./common/tpl/default_layout.html : 출력물을 작성하고 plugin, edit component등의 설정을 위해 거쳐가는 파일입니다.
./common/tpl/popup_layout.html : 팝업창(툴바,스크롤바 등이 없는 윈도우)을 내용의 크기에 맞게 윈도우 크기를 맞춰주는 레이아웃 파일입니다.
./common/tpl/refresh.html : 페이지 refresh를 위한 template 파일입니다.
./common/tpl/css/ : calendar.css, popup.css 가 존재합니다.
./common/tpl/images/ : 달력, 이미지 원본보기, 트리메뉴 그리기 위한 이미지 파일들과 flv확장자의 동영상 플레이어가 있습니다.

 

출처 : http://www.zeroboard.com/?mid=manual&pageid=392326

./config

기본 설정 및 자주 사용되는 함수 모음 파일이 있습니다.

 

./config/config.inc.php

디버그 설정 및 내부 php파일의 악의적인 호출을 막기 위한 상수 선언. 기본 class 파일들의 require, 세션시작을 선언합니다.

 

./config/func.inc.php

자주 사용되는 혹은 편의를 위한 함수 모음집입니다.


출처 : http://www.zeroboard.com/?mid=manual&pageid=392327

./modules

제로보드XE의 모든 동작은 모듈을 통해서 이루어집니다. 모듈은 아래와 같은 구성요소를 갖추어야 정상적으로 동작이 됩니다.

queries, schames, view/controller/model중 일부등은 모듈의 성격에 따라서 없을 수도 있습니다.

./modules/모듈이름/ : 모듈의 위치
./modules/모듈이름/conf/info.xml : 모듈의 제목/설명, 제작자의 정보
./modules/모듈이름/conf/module.xml : 모듈의 권한정보 및 action명세서
./modules/모듈이름/lang/*.lang.php : 모듈의 기본 언어팩
./modules/모듈이름/queries/*.xml : 모듈에서 사용하는 xml query 파일들
./modules/모듈이름/schemas/*.xml : 모듈에서 사용하는 DB 테이블의 schema xml 파일들
./modules/모듈이름/skins/ : 모듈의 스킨 파일들
./modules/모듈이름/모듈이름.class.php : 모듈 MVC파일의 상위 클래스 및 설치/update/제거등의 method 존재
./modules/모듈이름/모듈이름.view.php : 컨텐츠의 출력을 담당하는 view class
./modules/모듈이름/모듈이름.controller.php : 데이터의 controll을 담당하는 controller class
./modules/모듈이름/모듈이름.model.php : 모듈의 데이터 model class
./modules/모듈이름/모듈이름.admin.view.php : 모듈 관리페이지의 출력을 담당하는 view class
./modules/모듈이름/모듈이름.admin.controller.php : 모듈 관리페이지의 데이터 controll을 담당하는 controller class
./modules/모듈이름/모듈이름.admin.model.php : 모듈 관리페이지의 데이터 model class



출처 : http://www.zeroboard.com/?mid=manual&pageid=392328

 ./addons

제로보드XE의 애드온은 사용자의 요청 - 결과물 출력 사이에 아래와 같은 4군데서의 프로세스를 가로채서 입출력 결과를 변경하거나 동작은 중지 시킬 수 있습니다.
애드온은 단순이 enable/disable 설정만 가능하며 추가 설정이 필요한 경우 모듈과 연동하여 사용할 수 있습니다. (spamfilter애드온 참고)

 

애드온 동작 시점

모듈 객체 생성 이전 : before_module_init
모듈의 실행 이전 : before_module_proc
모듈의 동작 이후 : after_module_proc
결과 출력 이전 : before_display_content

 

애드온의 구성

애드온은 아래와 같은 구성요소를 갖추어야 정상적으로 동작이 됩니다.

./addons/애드온이름 : 애드온의 위치
./addons/애드온이름/conf/info.xml : 애드온의 제목, 설명과 제작자 정보
./addons/애드온이름/애드온이름.addon.php : 애드온 실행 class file


출처 : http://www.zeroboard.com/?mid=manual&pageid=392329

./layouts

제로보드XE에서 레이아웃은 컨텐츠(모듈)를 감싸는 껍데기를 의미합니다.
레이아웃은 단독으로 사용될수도 있고 레이아웃 제작자가 정한 메뉴(menu)와 연동하여 사용이 가능합니다.
레이아웃 템플릿 파일에는 플러그인/ 에디터컴포넌트의 코드를 직접 이용하여 꾸밀 수 있습니다.

 

레이아웃은 다음의 구성요소를 만족하여야 정상적으로 동작이 가능합니다.

./layouts/ : 레이아웃들이 위치합니다.
./layouts/레이아웃이름/conf/info.xml : 레이아웃의 제작자, 설명, 추가변수, 연동 메뉴의 개수와 이름이 정의되어 있습니다.
./layouts/레이아웃이름/layout.html : 레이아웃의 템플릿파일입니다.
./layouts/레이아웃이름/... : 레이아웃의 이미지파일, CSS파일, JS파일등은 자유롭게 구성이 가능합니다.



출처 : http://www.zeroboard.com/?mid=manual&pageid=392330

./widgets

위젯은 화면에 표시되는 작은 프로그램입니다.
최근게시물이나 회원정보(로그인 폼)등 모듈과 연동된 위젯도 있고 외부 Open API와 통신하는 위젯도 있습니다.
위젯은 아래와 같은 공통 구조를 꼭 준수하여야 정상적으로 실행이 가능합니다.

 

./widget/위젯이름 : 각 기능별 위젯의 위치
./widget/위젯이름/위젯이름.class.php : 위젯의 클래스 파일 (데이터 가공 및 템플릿 파일의 지정)
./widget/위젯이름/conf/info.xml : 위젯의 제목, 설명, 제작자, 추가변수에 대한 설정 파일
./widget/위젯이름/skins/스킨이름 : 위젯의 스킨들이 존재
./widget/위젯이름/skins/스킨이름/skin.xml : 스킨의 이름, 설명, 제작자, 컬러셋의 정보에 대한 설정 파일
./widget/위젯이름/skins/스킨이름/... : 템플릿파일이나 이미지, CSS파일들이 존재

 

템플릿파일, 이미지, CSS파일등은 스킨디렉토리 내에서 자유롭게 구성이 가능합니다


출처 : http://www.zeroboard.com/?mid=manual&pageid=392333

 ./files

제로보드XE 설치후 nobody권한으로 생성되는 디렉토리입니다. 첨부파일, 캐싱파일들이 존재합니다.

./files/_debug_message.php : /config/config.inc.php에서 __DEBUG_OUTPUT__ = 0 으로 할 경우 메세지들이 attach됩니다.
./files/attach/binaries/... : gif|jpg|png|swf|mpeg외의 첨부파일들이 저장됩니다.
                                       (악의적 공격을 방지하기 위해 fpassthru()로 직접 내용을 뿌려주는 대상)
./files/attach/images/... : 브라우저에서 바로 접근할 수 있는 이미지/동영상등의 파일들이 저장됩니다.
./files/cache/activated_addons.cache.php : enable시킨 애드온들을 실행하기 위한 php code
./files/cache/... : 각 모듈에서 캐시파일을 저장 (모듈별로 저장 가능)
./files/config/db.config.php : DB설정 파일
./files/member_extra_info/attach/image_mark/ : 회원 이름 앞 마크 이미지 저장
./files/member_extra_info/attach/image_name/ : 회원 이미지이름 저장
./files/member_extra_info/attach/signature/ : 회원 서명 저장



 

profile