<![CDATA[xe-제로보드]]> ko Sun, 22 Nov 2009 04:50:44 +0900 43 <![CDATA[zbXE의 레이아웃의 헤더/푸터 사용법]]>

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

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

 

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

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


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

  • zb4 레이아웃
     zb4layout.png

 

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

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

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

 

lyt.gif

 

 

레이아웃 만들기#

  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를 활용해 사용자정의로 설정할수있는 여러부분을 만드실 수 있습니다.


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

  5. 레이아웃 설명달기 (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파일들을 넣으시면 됩니다.

 

링크#

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

]]> Sun, 01 Jun 2008 00:53:17 +0900 <![CDATA[xlink_skins 관련글(사용법,수정방법등)...북마크용보드]]> 사용법/1

이프로그램을 사용하는 방법입니다.
제작하신 분의 설명이 없어서 대신 설명문을 올려드립니다.
(아시는 분은 쉽겠지만 초보자도 많을거 같아서 먼저본 제가 올려드립니다)

폴더를 올리는 경로 /zbxe/modules/board/skins/xlink1

글 등록시에 홈주소를 적는곳을 나오게 하려면? : 게시판정보수정으로 들어가서 "확장변수이용"

제목 : "홈페이지 주소" 라고 적어주세요.
형식 : "홈페이지 형식" 을 선택하세요.
필수항목 : "체크" 해주세요.

그리고 마지막으로 등록 클릭하세요



질문/

1-건의-1) Go밑에 타겟사이트가 보이는데요, 그 위치를 수정하고 싶습니다. 어떻게 하면 되나요?
즉, 타겟 사이트 우측 옆에(or  밑이나)  Go를..위치 시키고 싶어요^^(리스트 형에서 옆에 Go위치)(즉, 줄 차지가 적도록)

건의-2) 현재 올려주신 것은 갤러리 형인데요, 리스트형과 분류(카테고리) 가능하도록 부탁드립니다^^

건의-3) 현재는 Go 버튼링크를 클릭해야 새창으로 링크되는데, 버튼없이 제목 텍스트 글자를 바로 클릭하면 새창으로 이동하도록

할수는 없는지요? list형식에서요^^(갤러리 형식은 페이지 상하 소요가 많습니다.ㅠ.ㅠ.반면 리스트는 빼곡하게....가능)

수정-1) 현재 올려주신 image디렉토리 안에 gobu.png라는 이름인데요? go_button.png가 아닌지요??

stle.gallery.html의 17째줄에는,

 <input type="button" name="go_button" id="go_button" value="GO"라고..되어 있어서요.^^



답변/1

1의 답.
stle.gallery.html 에서 단순히 위치만 바꿔주셔도 가능합니다.
span의 경우 앞에쓰면 왼쪽앞, 뒤에쓰면 오른쪽뒤 가로정렬이 되고..
div의 경우 앞에쓰면 위, 뒤에쓰면 아래쪽으로 세로정렬이 되죠..?? 아마도..;;
2의 답.
리스트나 웹진 등도 style 로 시작하는 파일을 위 구조를 보고 베껴넣어 주시면 구동될듯 합니다.
이미지는 필요 없을래나요..;;
3의 답.
마찬가지로 게시물 제목 앞뒤로 링크를 걸어주시면 됩니다. 버튼에 달려있는놈을..
수정1의 답.
<input type="button" name="go_button" id="go_button" value="GO"라고..되어 있어서요.^^ <-- 클래스나 네임은 파일명이랑은 상관없는데..;


답변/2

<div class="thumbnailBox">

                <!--@foreach($document_list as $no => $document)-->
                <!--@if(!$document->isNotice())-->

                <div class="cell" style="width:{$module_info->thumbnail_width+30}px;height:{$height}px;">  <ㅡㅡ 넓이와 높이
                    <!--@if($document->thumbnailExists($module_info->thumbnail_width, $module_info->thumbnail_height, $module_info->thumbnail_type))-->
                        <a href="{htmlspecialchars($document->get('extra_vars1'))}" onclick="window.open(this.href);return false;"><img src="./images/common/gobu.png" border="0" alt="" class="thumb" width="{$module_info->thumbnail_width}" height="{$module_info->thumbnail_height}" /></a> <ㅡㅡ 규칙을 발견하세요. 태그는 아시니 구체적인 설명은 생략하겠습니다.
                    <!--@else-->
                        <a href="{htmlspecialchars($document->get('extra_vars1'))}" onclick="window.open(this.href);return false;"><img src="./images/common/gobu.png" border="0" alt="" class="thumb" width="{$module_info->thumbnail_width}" height="{$module_info->thumbnail_height}" /></a> <ㅡㅡ 마찬가지 입니다. if 문 에서 다른 조건에도 동일 반응하도록 하였습니다. (if문을 빼두 되는거였죠.)                    
                    <!--@end-->

                    <div class="title">
                        <!--@if($module_info->use_category == "Y" && $document->get('category_srl'))-->
                       
                        <!--@end-->

                        <!--@if($grant->is_admin)-->
                            <input type="checkbox" name="cart" value="{$document->document_srl}" onclick="doAddDocumentCart(this)" <!--@if($document->isCarted())-->checked="checked"<!--@end--> />
                        <!--@end-->

                        <a href="{getUrl('document_srl',$document->document_srl, 'listStyle', $listStyle, 'cpage','')}">{$document->getTitle($module_info->subject_cut_size)}</a> <ㅡㅡ 게시물 글 클릭하면 넘어가게 하고 싶다고 하셨죠? 그럼 이 부분의 href="주소" 부분을 위에서 버튼을 눌렀을때 실행되는 내용a href="{getUrl('document_srl',$document->document_srl, 'listStyle', $listStyle, 'cpage','')}"으로 바꿔주세요.
대신에 그렇게 하면 수정이나 삭제를 하려면 글 주소를 일일이 찾아내어 들어가서 삭제하거나 수정해야 합니다. (관리자가 아니라면요)

                        <!--@if($document->getCommentCount())-->
                            <span class="replyAndTrackback" title="Replies">(<strong>{$document->getCommentCount()}</strong>)</span>
                        <!--@end-->

                        <!--@if($document->getTrackbackCount())-->
                            <span class="replyAndTrackback" title="Trackbacks">[<strong>{$document->getTrackbackCount()}</strong>]</span>
                        <!--@end-->
                        {$document->printExtraImages(60*60*$module_info->duration_new)}

                        <div class="nameAndDate">
                            <!--@if($document->get('extra_vars1'))-->
<!--
                <a href="{htmlspecialchars($document->get('extra_vars1'))}" onclick="window.open(this.href);return false;">{$document->get('extra_vars1')}</a>
-->
                <!--@else-->
                &nbsp;
                <!--@end-->

                            <!--@if($module_info->display_regdate!='N')--><div class="date">{$document->getRegdate('Y.m.d')}</div><!--@end-->
                        </div>
                    </div>
                </div>
                <!--@end-->
                <!--@end-->
                <div class="clear"></div>

여기서 덩어리를 나누는 머리와 꼬리 구획을 div 라고 한다면,
div는 세로로 정렬이 됩니다.
그러니 span으로 태그를 바꿔 보세요.
<div>...</div> <div>...</div> 이렇게 div 덩어리가 두개일 경우, 옵션이나 스타일시트에 설정(CSS파일에 설정내용)이 없으면,
 세로로 배열됩니다.
그래서 가로로 만들어 주고 싶으시다면,
ㅡㅡ>
 <span>...</span> <span>...</span> 으로 바꿔주셔야 됩니다.

어디가 머리고 어디가 꼬린지.. 잘라내서 순서만 바꿔 주시면 됩니다.

div class="cell" <--이렇게 시작하는 놈이 있죠.
                               이 태그 안에 이놈--> <a href="...">버튼코드</a> 을 넣어줘야 됩니다.
                               그리고 위에 나온 설명대로 사이즈를 바꿔주셔야 됩니다.
                               만약 순순히(?) 옆으로 뻗지 않는다면 그 태그를 <span>으로 감싸주시고.. 그 앞에것도 감싸주세요.(막감싸면 안됩니다.)
                               그리고, 그냥 넣기만 하면 간격이 맞지 않겠죠? --> 위의 내용을 참고해 사이즈를 조정해 주시고..
                               갯수는 스킨에서 조정해 주시고요.
                               백업식으로 하나씩 카피해 놓고 코딩과 복구를 반복해 주시면 되겠습니다.
                               고수건 초심자건 똑같아요. 이건.
                               그러면 가로정렬이 됩니다.
                               html 태그 아시는 분이시니.. 직접 하실 수 있다고 스스로에게 자신감을 갖으십시오..
                             

앞으로 제로보드를 계속 꾸준히 심도있게 사용하실 생각이시라면 더 공부하시길 권해 드립니다.

" 나는 모르니까 자세히 가르쳐 줘야 한다. 개구리 올챙이적 생각..." <-- 이말이 틀린건 아니지만..

저도 코딩이 쉬워서 전공이라서 고수라서 하는 것은 아닙니다.. 컴퓨터 켰다 껐다만 할 줄 알던게 얼마 전입니다...;
아무리 잘하는 사람이라도 한두해 쉬면 기반이 바껴서 모릅니다..;;

저도 여러번 틀려가면서 배웁니다.
책을 보고 배우는 것도 아닙니다.

어떤부분이 어떤기능을 하는지 보고
그 기능의 옵션을 어떻게 바꿔줘야 하는지, 명령어는 뭐가 있는지..
저같은 일자무식도 지식인 봐가면서 떠듬떠듬 해나가고 있기 때문에,
질문 하시는 분도 기간이 걸리더라도 차근차근 대하시면 쉬이 할 수 있으리라 생각합니다.


답변/3

추가 팁입니다.
모듈과 명령어들에 대해서 기초적인 공부를 하시길 권해드리며,
참고로 영어로 된 놈들의 뜻(?)을 잘 헤아려 보시기 바랍니다.
$module_srl  <-- 모듈의 srl 이 뭘까를 잘 생각해 보시고 어디에서 쓰이는지 알면 아! 하실 겁니다. 모듈 주소입니다.
$module_title <-- 모듈의 타이틀이면 제목이 되겠죠?
$document_title <-- 문서의 제목이겠죠?
저는 메뉴얼을 보는것두 귀찮아서 이런식으로 유비추리(?) 하였습니다.....ㄷㄷㄷ
프로그램은 사람의 말과 정말 유사하다고 생각합니다.
논리적으로 말 하는 것과 논리적으로 프로그램을 전개하는것은 반쯤은 관계있지 않나 싶습니다.
수학 반 어학 반.
후라이드 반 양념 반.

]]> Thu, 27 Mar 2008 03:46:52 +0900 <![CDATA[초보의 호스팅 이전(XE->XE)레드맨]]>

안녕하세요. 한번도 호스팅을 이전해 본적이 없는데 이번에 해봤습니다. -_-;; 그래서 고생깨나 했는데 혹시나 도움되실 분들 있을까봐 과정을 쭉 써볼게요.


여기에는 다음과 같은 것들이 적혀 있습니다.
 > utf-8/euc-kr을 지원하는 ftp, 변환기,에디터 등
 > phpAdmin으로 백업하고 import하는 방법
 > 백업한 DB올릴때 한글깨지는 문제 해결방법
 > 백업한 소스 및 DB 수정할 때 주의 사항



[준비물]
- UTF-8을 지원하는 FTP클라이언트 : Filezila 등 --> 이거 없으면 한글이름으로 된 파일은 백업 못합니다. ㅡㅡ;
- UTF-8과 euc-kr 양쪽 모두 변환가능한 유틸리티 : All Converter 등 --> 이전할 곳의 DB의 기본언어셋을 확인하시기 바랍니다. 현재 쓰고 있는 DB와 다를 경우 반드시 필요합니다.
- UTF-8을 지원해주는 에디터 : 드림위버 등  --> 당연히 필요합니다.

참고) 절대 알-FTP를 백업받는데 사용하지 마시기 바랍니다.



[환경]
참고삼아 적는 건데요...

* 저의 경우는 XE를 뜯어고친 부분이 너무 많기 때문에 제로님의 마이그레이션 툴을 이용할 경우 이전할 곳에 zbxe를 설치해서 제로님의 마이그레이션툴로 백업받은 데이터를 다시 복구한 후 사이트 구조 다시 만들고 소스들 다시 모두 수정해야 하는것이 싫었구요(그렇게 하면 사이트 하나 새로 만드는 것과 진배없다는...-_-;;),  경험담쪽에서 보면 File폴더의 권한문제 때문에 이전하고나서 원래 가지고 있던 File폴더의 파일들을 엎어치지 못하는 문제도 생기는 것 같아서 고민했습니다.
그러다보니 제로님이 만들어주신 마이그레이션 툴은 백업만 해 놓고 정작 쓰지는 못했네요. ㅡㅡ;

*원 소스가 있는 곳의 환경 - Mysql 4.1.6 , phpAdmin 2.6.1, DB기본언어셋: utf-8
*이전할 곳의 시스템 환경 - Mysql 5.0.41, phpAdmin 2.10.3, DB기본언어셋: euc-kr
*양쪽다 ssh지원 안하고 FTP만 지원합니다.


[파일백업순서-Filezila이용]
-utf-8을 지원하는 FTP프로그램으로 백업을 받습니다.

1. Filezila는 GNU로 무료입니다. 최신버전이 3.x이고 어느정도는 한글화가 되어 있습니다.
2. 빠른 접속으로 마시고 사이트 관리자로 접속 사이트 세팅을 하시면 UTF-8로 세팅하실 수 있습니다. 굉장히 좋은 프로그램입니다만 간혹 사소한 문제가 좀 있습니다.^^;(숨겨진 파일보기, 실패하거나 못받은 파일의 대기문제...등)  아무튼 알-FTP에 비해 엄청나게 좋은 프로그램입니다.
3. 먼저 원소스쪽으로 FTP접속을 해서 모두 백업받습니다. 하시기 전에 XE관리자 모드에서 캐쉬재생성 한번 해주시고 로그아웃하시면 세션파일크기가 좀 줄더군요. 백업 받을때는 모든 파일을 백업받으시고 그러기 위해 FTP에 숨겨진 파일 보기를 꼭 선택해주셔야 합니다.

Tip) Filezila에서의 팁입니다.
 - 숨겨진 파일보기가 좀 이상하게 동작합니다. 현재 상태에서 안보이거든 숨겨진 파일보기를 한번 클릭해주시고 프로그램을 종료하셨다가 다시 실행하시면 보일 겁니다.
 - 전송되지 않고 큐에 남아 대기중인 파일이 꼭 끝에 몇개가 남더군요. 가만 놔두면 엄청 오래 시간을 끕니다. 윗쪽 메뉴에 보시면 토글방식의 큐진행아이콘과 접속 끊기 아이콘이 있습니다. 우선 큐진행아이콘을 한번 클릭하셔서 큐진행을 중단하시고 접속끊기를 누릅니다. 그리고 다시 접속아이콘을 눌러서 접속하시고 큐진행아이콘을 눌러서 큐에 남아있는 파일의 전송을 진행시킵니다. 그래도 안되면 계속 저런 순서를 반복합니다.
 - 설정에서 로그인 딜레이 시간을 너무 짧게 하거나 동시접속 수를 너무 많게 하면 서버에서 동시접속제한때문에 접속을 강제종료시켜버리거나 로그인 딜레이시간이 짧아서 제대로 비밀번호를 인식 못할 수 있습니다.


[DB백업순서-phpAdmin이용]
-phpAdmin으로 들어가셔서 DB백업을 받습니다.

1. 가장 왼쪽 약간 위쪽에 보시면 전체 테이블이름이 나옵니다. 보통 'DB계정명_db' 라는 식의 이름이니까 예를들면 redman_db이런식인거죠. 그 이름을 클릭하시면 오른쪽 화면이 바뀌면서 위쪽에 '내보내기'라는 메뉴가 보일 겁니다. 그걸 클릭합니다.
2.그러면 오른쪽의 화면이 또 바뀌면서 '내보내기', 'SQL옵션','구조','데이터','파일로 저장' 이렇게 크게 5개의 분류로 이뤄진 화면이 나타납니다.
3. 여기서 SQL:옵션부터 건드려 봅니다. '모두 선택'을 클릭하시고  아래 콤보박스에서 SQL을 선택합니다.(보통 디폴트로 콤보박스는 SQL로 선택되어 있더군요. '모두 선택'만 클릭하시면 될거구요, 그러면 모든 테이블이 선택됩니다.)
4. 그다음으로 구조에 체크하시고(보통 체크되어 있습니다.) 그 아래 항목들 다 선택해주시는데 앞에 Add...로 시작하는 항목들이 있거든 안하셔도 됩니다.(예를들어, add into comments나 Add CREATE PROCEDURE / FUNCTION 같은 것들요. 잘은 모르지만 이전할때는 그닥 필요없는 것 같습니다.)
5. 그다음은 데이터에 체크해주시고(보통 체크되어 있습니다.) 그 아래 항목들을 선택해주시는데 Use delayed inserts, Use ignore inserts 빼고 나머지는 다 체크해 주세요.
6. 마지막으로 파일로 저장에 체크해주시고(이건 기본이 체크안되어 있을 겁니다. 체크 꼭 하세요.) 압축하시고 싶으시면 하시고 안하고 싶으시면 안하는 걸로 해서 하시면 됩니다.
7. 실행클릭하시면 용량에 따라 생성시간이 좀 틀리지만 마지막에 파일명.sql을 어디다 저장할거냐고 묻습니다. 그러면 저장하시면 되구요.



[우선 XE한번 설치해보기]
- 이전 할 곳의 시스템에 XE를 테스트 삼아서 설치합니다. 이유는 환경세팅을 위해서와 경로명을 정확히 알기 위해서 입니다. 파악이 다 됐으면 XE를 삭제해 버립니다. DB와 파일모두~ 그러구 나서 백업받아놨던 파일들과 DB들을 올리는 겁니다.

1. 먼저 이전할 곳의 호스팅 서버에 FTP로 접속 해서 초기 상태를 살펴봅니다. 삭제할 때 뭘 삭제해야 할지 정확히 알기 위해서 입니다.
2. DB쪽에도 접속해서 처음 상태를 확인합니다. 보통은 텅비어 있을 겁니다.
3. XE를 설치합니다. 설치 할때 적어야 하는 DB환경세팅을 위한 변수들을 잘 기억해 두시고 설치도 잘 됐나 보시기 바랍니다. 나중에 DB백업받은 파일에 직접 적어줘야 하기 때문입니다.
4. 절대 경로명을 꼭 기억해 두시기 바랍니다. 설치하고 나면 초기 관리자 페이지에 절대경로명이 나오고 외부페이지를 생성해보시면 거기에도 절대경로가 나옵니다.
5. 다 파악 하셨으면 FTP로 파일들을 모두 삭제하고 원래 상태로 만듭니다. DB도 모든 테이블을 없앱니다. 하지만 데이터베이스는 없애지 못하니까 그냥 놔두시기 바랍니다. 어차피 같은 이름 사용하실거 아닌가요? ^^;



[환경과 경로명 수정하기]
-수정을 해야하는 이유는 이렇게 안하면 이전할 곳의 서버에 zbxe를 새로 설치하고 원래 사용하던 사이트구조, 소스 등을 모두 찾아서 일일이 수정해야 하는 번거로움을 피하기 위해서 입니다.

1. 우선 환경변수부터 고쳐보죠. 파일백업 폴더로 가서 DB환경부터 이전할 곳에 맞게 수정합니다. DB환경에 대한 내용은 위에서 zbxe를 설치해 보면서 기억해 두셨죠? 파일명은 db.config.php이고 위치는 /zbxe/files/config/ 밑에 있습니다.
백업받은  DB에서도 고치셔야 합니다. 여기에도 DB환경에 대한 내용이 있습니다. 파일명.sql 에서 찾아주세요. 쉽게 찾는 방법은 앞에서 db.config.php를 수정할 때 원래 있던 곳의 DB환경들에 해당하는 단어들을 파일명.sql에서 찾으면 됩니다.


2. 경로명을 고치셔야 합니다. 실은 이게 가장 큰 문제입니다.ㅡㅡ; 소스를 작성하실때 조금만 주의하시면 XE에서 정의한 변수들로 고치면 되지만 몇 개의 것들은 그냥 알아서 저절로 URL이나 절대경로가 삽입되는 경우가 있습니다.(위젯, 외부페이지 등).
 - 백업한 파일들은 윈도우즈의 검색기능을 이용해서 고쳐야할 경로명의 특징적인 단어를 검색합니다. (검색 잘 됩니다.^^;)
 - 백업한 DB는 수정해 주실 때 특히 그 앞에 있는 s:숫자 에 주의 하세요. 그 숫자는 뒤의 문자열의 길이를 가지고 있습니다. 따라서 경로나 URL수정시 문자가 늘거나 줄면 그 앞에 있는 숫자도 맞게 수정하셔야 합니다. 예를들어, s:26:"http://...." 였던 것이 s:32:"http://.../zbxe/
"가 되어야 한다는 것이죠. 숫자는 " "안의 문자들의 갯수를 말합니다.


3. 주의할 사항 입니다. 백업한 파일이든 DB든 수정하실 때 물론 준비물에서 보셨다시피 XE니깐 UTF-8로 불러들이시고 저장하셔야 합니다만...이게 기본인건 맞는데 DB는 조금 틀립니다. 결론적으로 말하자면 DB는 이전할 곳의 기본 언어셋으로 저장되어야 합니다. 그러니까, 원래 있던 곳의 DB와 이전할 곳의 DB가 UTF-8을 모두 기본 언어셋으로 정의하고 있다면 무조건 utf-8로 저장하는게 맞습니다. 그런데 어떤 DB들은 euc-kr과 utf-8을 모두 지원하기 위해서 기본 언어셋을 euc-kr로 해둔 곳이 있습니다. 이럴 경우에는 아까 준비물에서 써놨던 변환 유틸을 준비하셔서 euc-kr로 변환하시기 바랍니다. 쉘로 들어가서 하거나 고민할 필요가 없습니다. ^^



[수정한 백업파일 올리기]
- 그냥 이전할 서버에 FTP로 올려주시면 됩니다. 아직 백업한 DB를 안 올렸으니까 작동할리 없으니 테스트는 안하셔도 됩니다. ^^;



[수정한 백업DB올리기-phpAdmin이용]
 -phpAdmin으로 들어가셔서 DB를 올립니다.

1. 최근의 phpAdmin은 아까 백업 할 때처럼 왼쪽 위의 DB네임(보통 DB계정명_db)을 클릭하면 오른쪽화면이 바뀌면서 import라는 메뉴가 윗쪽에 나타납니다. 그걸 클릭하면 되구요, 좀 오래된 phpAdmin의 경우는 왼쪽 위의 DB네임(보통 DB계정명_db)을 클릭하면 오른쪽화면이 바뀌면서 SQL이라는 메뉴가 나타납니다. 그걸 클릭하면 아래쪽에 SQL파일의 위치를 찾아 올릴 수 있도록 되어 있습니다.

2. 올려서 실행하시면 테이블이 쏵~ 만들어집니다. 고생한 거에 비해선 너무 금방이죠. ;; 테이블들이 만들어지면 한글이 깨졌나 안깨졌나 부터 살펴봅니다. 한글이 일단 안깨졌으면 다행인 것이고 깨졌다면 변환프로그램으로 기본 언어셋에 맞게 sql파일을 변환하셔서 지금 만들어진 테이블들을 모두 삭제하고 다시 올리시기 바랍니다.



[마지막입니다. 테스트!]
1. 이제 원래 하던대로 브라우저에서 홈페이지를 들어가 봅니다. 우선 어드민으로 들어가서 캐쉬파일 재생성을 한번 해주시고 하나하나 메뉴를 살펴보시기 바랍니다. 에러 메시지 나오는 곳은 없는지 살펴보세요. 혹시 에러메시지가 나온다면 우선 경로명이 맞는지와 문자갯수를 다시 살펴보시기 바랍니다.

2. 회원들과 첨부파일들이 제대로 보이는지 보시기 바랍니다.



끝이네요...^^; 
너무 긴가 싶긴한데...저같은 분들을 위해서 최대한 자세하게 써봤습니다.


]]> Fri, 14 Mar 2008 22:23:59 +0900 <![CDATA[게시물 읽을 때마다 카운터 증가하기(v1.0 기준) 백성찬(白星燦)]]>

zbxe\modules\document에서 document.controller.php를 수정해주시면 됩니다.

documnet.controller.php에 325번째 라인부터 357까지를

아래 코드를 복사하셔서 붙여넣으시면 됩니다.

        /**
         * @brief 해당 document의 조회수 증가
         **/
        function updateReadedCount($oDocument) {
            $document_srl = $oDocument->document_srl;
            $member_srl = $oDocument->get('member_srl');
            $logged_info = Context::get('logged_info');

            // 조회수 업데이트가 되면 trigger 호출 (after)
            $output = ModuleHandler::triggerCall('document.updateReadedCount', 'after', $oDocument);
            if(!$output->toBool()) return $output;
            // session에 정보로 조회수를 증가하였다고 생각하면 패스
           /* if($_SESSION['readed_document'][$document_srl]) return false;

            // 글의 작성 ip와 현재 접속자의 ip가 동일하면 패스
            if($document->ipaddress == $_SERVER['REMOTE_ADDR']) {
                $_SESSION['readed_document'][$document_srl] = true;
                return false;
            }

            // document의 작성자가 회원일때 글쓴이와 현재 로그인 사용자의 정보가 일치하면 읽었다고 판단후 세션 등록하고 패스
            if($member_srl && $logged_info->member_srl == $member_srl) {
                $_SESSION['readed_document'][$document_srl] = true;
                return false;
            }*/

            // 조회수 업데이트
            $args->document_srl = $document_srl;
            $output = executeQuery('document.updateReadedCount', $args);

            // 세션 등록
            $_SESSION['readed_document'][$document_srl] = true;
        }

]]> Wed, 12 Mar 2008 15:59:04 +0900 <![CDATA[소마세월님의 마우스오버시 2차메뉴 출력팁]]> 소마세월님의 팁 원문..


음..
명칭이 생각 안나서 메뉴에 마우스 갖다대면 뜨는 메뉴 만드는 방법 이라고 했습니다..

생각 해보면 아주 간단합니다
각자의 레이아웃을 열어서.. (혹시 모를 오류를 대비하세요.. =ㅁ=;)

//레이아웃의 1차메뉴 출력
//다른것과 다른게.. $idx 카운트를 하죠.. 음.. 1차메뉴 갯수를 바로 뽑을수 있다면 필요 없겠죠.. 아직 모르니....      
  <ul id="gnb">
            <!-- main_menu 1차 시작 -->
            {@ $idx = 1 }
            <!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
                <!--@if($val['selected'])-->
                    {@ $menu_1st = $val }
                <!--@end-->

                <li onMouseOver="menu({$idx});" <!--@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-->
            {@$idx++}
            <!--@end-->
            <!-- main_menu 1차 끝 -->
  </ul>   

//이 스크립트는 1차메뉴의 갯수를 지정하는 곳입니다.
<script language="javascript1.2">
var menuLen={$idx-1};
</script>

// 메뉴별로 2차 메뉴를 뽑아 내야 합니다.
// 위의 1차 메뉴에서는 만들기가 어려워서 한번 더 돌려야 합니다.
// 1차메뉴 출력부분을 빼고 2차 메뉴만 출력 하면 되지요..ㅎ.ㅎ

            <!--히든 레이어 메뉴-->
            <!-- main_menu 1차 시작 -->
            {@ $idx = 1 }
            <!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
                         <!--2차메뉴-->
                        <div class="subMenu" id="subMenu_{$idx}" style="<!--@if($val['selected'])-->display:block;<!--@else-->display:none;<!--@end-->">
                        <!--@foreach($val['list'] as $key1 => $val1)--><!--@if($val1['text'])-->
                        <!--@if($val1['selected'])--><!--@end-->
                            <a id="lnb1" href="{$val1['href']}" <!--@if($val1['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val1['text']}</a>
                        <!--@end-->
                        <!--@end-->
      </div>
            <!--@end-->
            {@$idx++}
            <!--@end-->
            <!-- main_menu 1차 끝 -->       


//스크립트 부분
function menu(idx){
 for (i=1;i<=menuLen;i++){
  eval("document.getElementById('subMenu_"+i+"').style.display='none'");
 }
 eval("document.getElementById('subMenu_"+ idx +"').style.display='block'");
}

script에 요고 추가 하시면 위의 코드로도 충분히 돌아갑니다...
음..... 위치 지정은 css에서 하시면 되구요

행운이 있기를!

쉽죠? (밥 로스가 아냐!!)

어디에 적용 되어 있냐구요??

 

여기쏘스에요


질문 하시는 분이 계셔서 추가.....

CSS에 추가 해야 할것이 뭣이냐 하면..

.subMenu{position:absolute; left:210px; top:120px; background-color:#FFFFFF;width:750px;height:24px;}
#lnb1{text-decoration:none;color:#000000;padding-left:10px; line-height:2em; position:relative;white-space:nowrap; }
#lnb1:hover,focus {color:#000000}

이 내용 입니다..
서브 메뉴의 위치를 설정 해 주셔야 이쁘게 되겠죠..
빨간색으로 된 부분 수정 하셔서 위치 지정 해 주시면 되요..




정리해서 올립니다.


layout.html 에서 수정해야 할부분...

<ul id="gnb">
            <!-- main_menu 1차 시작 -->
            {@ $idx = 1 }
            <!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
                <!--@if($val['selected'])-->
                    {@ $menu_1st = $val }
                <!--@end-->

                <li onMouseOver="menu({$idx});" <!--@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-->
            {@$idx++}
            <!--@end-->
            <!-- main_menu 1차 끝 -->
  </ul>   

<script language="javascript1.2">
var menuLen={$idx-1};
</script>

            <!--히든 레이어 메뉴-->
            <!-- main_menu 1차 시작 -->
            {@ $idx = 1 }
            <!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
                         <!--2차메뉴-->
                        <div class="subMenu" id="subMenu_{$idx}" style="<!--@if($val['selected'])-->display:block;<!--@else-->display:none;<!--@end-->">
                        <!--@foreach($val['list'] as $key1 => $val1)--><!--@if($val1['text'])-->
                        <!--@if($val1['selected'])--><!--@end-->
                            <a id="lnb1" href="{$val1['href']}" <!--@if($val1['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val1['text']}</a>
                        <!--@end-->
                        <!--@end-->
      </div>
            <!--@end-->
            {@$idx++}
            <!--@end-->
            <!-- main_menu 1차 끝 -->       


script 부분 추가 해야 할 부분

위치 : layouts/해당레이아웃/js/?????.js

function menu(idx){
 for (i=1;i<=menuLen;i++){
  eval("document.getElementById('subMenu_"+i+"').style.display='none'");
 }
 eval("document.getElementById('subMenu_"+ idx +"').style.display='block'");
}


CSS 추가해야 할 부분

위치 : layout/해당레이아웃/css/?????.css

.subMenu{position:absolute; left:210px; top:120px; background-color:#FFFFFF;width:750px;height:24px;}
#lnb1{text-decoration:none;color:#000000;padding-left:10px; line-height:2em; position:relative;white-space:nowrap; }
#lnb1:hover,focus {color:#000000}


]]> Fri, 07 Mar 2008 00:42:02 +0900 <![CDATA[[zbXE 동영상강좌] 3. 레이아웃 완성하기 ...서기]]>

드림위버에서 편집후 관리자모드에서 연결해서 사이트를 완성하는 방법입니다.
(xe를 이용한 원프레임 홈페이지라고 보시면 되겠네요..)
예제사이트 : http://php.singsinghe.co.kr/zbxe  

]]> Fri, 29 Feb 2008 17:45:54 +0900 <![CDATA[[zbXE 동영상강좌] 2. 포토샵에서 레이아웃 만들기서기]]>

포토샵에서 기본적인 레이아웃을 만드는 방법에 대해 알아보겠습니다.
예제사이트 : http://php.singsinghe.co.kr/zbxe  
psd파일 : http://php.singsinghe.co.kr/singsinghe.psd

]]> Fri, 29 Feb 2008 17:43:57 +0900 <![CDATA[XHTML & CSS 개요]]>

이 페이지에서는 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">

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

 

Strict 와 Transitional 에 관하여...

사전적 의미 :

  • 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>
        <ul 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


원문보기

]]> Fri, 29 Feb 2008 17:11:06 +0900 <![CDATA[글쓰기창 input 배경 넣기 (태그와 확장변수)]]>

* 각 컬러의 이미지폴더마다 추가되는 이미지가 있습니다.

css/common.css


 1. 변경 전 (361 행)

view plaincopy to clipboardprint?
  1. .EditorInputTag {width:99%;height:15px;text-align:left; vertical-align:middle;font-family:"돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; font-size:1em;} /* 태그,확장변수text - 컬러셋 */  

 1. 변경 후 (361 행)


view plaincopy to clipboardprint?
  1. .EditorInputTag {width:90%;height:15px;text-align:left; vertical-align:middle;font-family:"돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; font-size:1em;padding:2px 0 0 3.5em;} /* 태그 - 컬러셋 */  

 2. 변경 전 (363 행)


view plaincopy to clipboardprint?
  1. .EditorInputTextarea {width:99%;height:100px;text-align:left; vertical-align:middle;font-family:"돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; font-size:1em; line-height:150%;} /* 확장변수Textarea */  

2. 변경 후 (363 행)

view plaincopy to clipboardprint?
  1. .EditorInputTextarea {width:90%;padding:1px 0 0 3.5em;height:100px;text-align:left; vertical-align:middle;font-family:"돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; font-size:1em; line-height:150%;} /* 확장변수Textarea - 컬러셋 */  



 3.  .EditorInputText 코드를 추가합니다.  저는 /* 12-1-2 원본글의 입력창  */ 에 추가했습니다.


view plaincopy to clipboardprint?
  1. .EditorInputText {width:90%;height:15px;text-align:left; vertical-align:middle;font-family:"돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; font-size:1em;padding:2px 0 0 3.5em;} /* 확장변수Text(input) - 컬러셋 */  


 4.  .EditorInputHomepage코드를 추가합니다.  저는 /* 12-1-2 원본글의 입력창  */ 에 추가했습니다.

view plaincopy to clipboardprint?
  1. .EditorInputHomepage {width:60%;height:15px;text-align:left; vertical-align:middle;font-family:"돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; font-size:1em;padding:2px 0 0 2em;} /* 확장변수Homepage(input) - 컬러셋 */  


5.  .EditorInputEmail 코드를 추가합니다.  저는 /* 12-1-2 원본글의 입력창  */ 에 추가했습니다.


view plaincopy to clipboardprint?
  1. .EditorInputEmail {width:60%;height:15px;text-align:left; vertical-align:middle;font-family:"돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; font-size:1em;padding:2px 0 0 2em;} /* 확장변수mail(input) - 컬러셋 */  


6. .EditorInputTelExchangeNum 코드를 추가합니다.  저는 /* 12-1-2 원본글의 입력창  */ 에 추가했습니다.


view plaincopy to clipboardprint?
  1. .EditorInputTelExchangeNum {width:60px;height:15px;text-align:left; vertical-align:middle;font-family:"돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; font-size:1em;padding:2px 0 0 2em;} /* 확장변수tel국번 - 컬러셋 */  







extra_var_form.html


 3. 변경 전 (16 행)  :  <!-- 일반 text --> 주석아래에 있는 input의 class 코드변경


view plaincopy to clipboardprint?
  1. <input type="text" name="{$val->column_name}" value="{htmlspecialchars($val->value)}" class="EditorInputTag" />  

 3. 변경 후 (16 행) 


view plaincopy to clipboardprint?
  1. <input type="text" name="{$val->column_name}" value="{htmlspecialchars($val->value)}" class="EditorInputText" />  


 4. 변경 전 (20행)  :  <!-- 홈페이지 주소 --> 주석아래에 있는 input의 class 코드변경


view plaincopy to clipboardprint?
  1. <input type="text" name="{$val->column_name}" value="{htmlspecialchars($val->value)}" class="EditorInputTag" />  


4. 변경 후 (20행)

view plaincopy to clipboardprint?
  1. <input type="text" name="{$val->column_name}" value="{htmlspecialchars($val->value)}" class="EditorInputHomepage" />  

 5. 변경 전 (24행)  :  <!-- Email 주소 --> 주석아래에 있는 input의 class 코드변경


view plaincopy to clipboardprint?
  1. <input type="text" name="{$val->column_name}" value="{htmlspecialchars($val->value)}" class="EditorInputTag" />  


5. 변경 후 (24행)


view plaincopy to clipboardprint?
  1. <input type="text" name="{$val->column_name}" value="{htmlspecialchars($val->value)}" class="EditorInputEmail" />  

 6. 변경 전 (28행)  :  <!-- 전화번호 --> 주석아래에 있는 input의 class 코드변경 (3줄의 input중 첫째줄의 input을 변경합니다.)

view plaincopy to clipboardprint?
  1. <input type="text" name="{$val->column_name}" value="{htmlspecialchars($val->value[0])}" class="EditorInputTel" /> -   


6. 변경 후 (28행)


view plaincopy to clipboardprint?
  1. <input type="text" name="{$val->column_name}" value="{htmlspecialchars($val->value[0])}" class="EditorInputTelExchangeNum" /> -   





css/green.css, css/white.css, css/skyblue.css, css/pink.css   

(위의 색상지정된 문서명은 아래의 수정소스의 색상과 일치합니다.)

1. 각 컬러의 css문서마다  .EditorInputTag 코드의 속성을 수정합니다. 아래는 수정 완료한 내용입니다.


.EditorInputTag {border:1px solid #bedbb3; color:#517451; background:#e6f3e8 url(../images/green/tag.gif) no-repeat 3px .23em;} /* 태그 - 컬러셋 */
.EditorInputTag {border:1px solid #e8c5de; color:#834c74; background:#f8e7f0 url(../images/pink/tag.gif) no-repeat 3px .23em;} /* 태그 - 컬러셋 */
.EditorInputTag {border:1px solid #c5cae8; color:#3d5f82; background:#e6ecf3 url(../images/skyblue/tag.gif) no-repeat 3px .23em;} /* 태그 - 컬러셋 */
.EditorInputTag {border:1px solid #cccfcb; color:#595a5c; background:#e8e9e9 url(../images/white/tag.gif) no-repeat 3px .23em;} /* 태그 - 컬러셋 */

2. 각 컬러의 css문서마다  .EditorInputTextarea 코드의 속성을 수정합니다. 아래는 수정 완료한 내용입니다.


.EditorInputTextarea {border:1px solid #bedbb3; color:#517451; background:#e6f3e8 url(../images/green/html.gif) no-repeat 3px .23em;} /* 확장변수Textarea - 컬러셋 */
.EditorInputTextarea {border:1px solid #e8c5de; color:#834c74; background:#f8e7f0 url(../images/pink/html.gif) no-repeat 3px .23em;} /* 확장변수Textarea - 컬러셋 */
.EditorInputTextarea {border:1px solid #c5cae8; color:#3d5f82; background:#e6ecf3 url(../images/skyblue/html.gif) no-repeat 3px .23em;} /* 확장변수Textarea - 컬러셋 */
.EditorInputTextarea {border:1px solid #cccfcb; color:#595a5c; background:#e8e9e9 url(../images/white/html.gif) no-repeat 3px .23em;} /* 확장변수Textarea - 컬러셋 */

 3. 각 컬러의 css문서마다  .EditorInputText 코드를 추가합니다.


.EditorInputText {border:1px solid #bedbb3; color:#517451; background:#e6f3e8 url(../images/green/text.gif) no-repeat 3px .23em;} /* 확장변수Text(input) - 컬러셋 */
.EditorInputText {border:1px solid #e8c5de; color:#834c74; background:#f8e7f0 url(../images/pink/text.gif) no-repeat 3px .23em;} /* 확장변수Text(input) - 컬러셋 */
.EditorInputText {border:1px solid #c5cae8; color:#3d5f82; background:#e6ecf3 url(../images/skyblue/text.gif) no-repeat 3px .23em;} /* 확장변수Text(input) - 컬러셋 */
.EditorInputText {border:1px solid #cccfcb; color:#595a5c; background:#e8e9e9 url(../images/white/text.gif) no-repeat 3px .23em;} /* 확장변수Text(input) - 컬러셋 */


4. 각 컬러의 css문서마다  .EditorInputHomepage 코드를 추가합니다.


.EditorInputHomepage {border:1px solid #bedbb3; color:#517451; background:#e6f3e8 url(../images/green/cohome.gif) no-repeat 3px .25em;} /* 확장변수Homepage(input) - 컬러셋 */
.EditorInputHomepage {border:1px solid #e8c5de; color:#834c74; background:#f8e7f0 url(../images/pink/cohome.gif) no-repeat 3px .25em;} /* 확장변수Homepage(input) - 컬러셋 */
.EditorInputHomepage {border:1px solid #c5cae8; color:#3d5f82; background:#e6ecf3 url(../images/skyblue/cohome.gif) no-repeat 3px .25em;} /* 확장변수Homepage(input) - 컬러셋 */
.EditorInputHomepage {border:1px solid #cccfcb; color:#595a5c; background:#e8e9e9 url(../images/white/cohome.gif) no-repeat 3px .25em;} /* 확장변수Homepage(input) - 컬러셋 */


5. 각 컬러의 css문서마다  .EditorInputEmail 코드를 추가합니다.


.EditorInputEmail {border:1px solid #bedbb3; color:#517451; background:#e6f3e8 url(../images/green/comail.gif) no-repeat 3px .25em;} /* 확장변수mail(input) - 컬러셋 */
.EditorInputEmail {border:1px solid #e8c5de; color:#834c74; background:#f8e7f0 url(../images/pink/comail.gif) no-repeat 3px .25em;} /* 확장변수mail(input) - 컬러셋 */
.EditorInputEmail {border:1px solid #c5cae8; color:#3d5f82; background:#e6ecf3 url(../images/skyblue/comail.gif) no-repeat 3px .25em;} /* 확장변수mail(input) - 컬러셋 */
.EditorInputEmail {border:1px solid #cccfcb; color:#595a5c; background:#e8e9e9 url(../images/white/comail.gif) no-repeat 3px .25em;} /* 확장변수mail(input) - 컬러셋 */


6. 각 컬러의 css문서마다   .EditorInputTelExchangeNum  코드를 추가합니다.


.EditorInputTelExchangeNum {border:1px solid #bedbb3; color:#517451; background:#e6f3e8 url(../images/green/tel.gif) no-repeat 3px .25em;} /* 확장변수tel국번 - 컬러셋 */
.EditorInputTelExchangeNum {border:1px solid #e8c5de; color:#834c74; background:#f8e7f0 url(../images/pink/tel.gif) no-repeat 3px .25em;} /* 확장변수tel국번 - 컬러셋 */
.EditorInputTelExchangeNum {border:1px solid #c5cae8; color:#3d5f82; background:#e6ecf3 url(../images/skyblue/tel.gif) no-repeat 3px .25em;} /* 확장변수tel국번 - 컬러셋 */
.EditorInputTelExchangeNum {border:1px solid #cccfcb; color:#595a5c; background:#e8e9e9 url(../images/white/tel.gif) no-repeat 3px .25em;} /* 확장변수tel국번 - 컬러셋 */



20080203.gif

]]> Wed, 27 Feb 2008 18:35:06 +0900 <![CDATA[타이틀(제목)설정방법]]> 스킨 title이 아니고 목록에 나타나는 게시물 제목
이 기능은 XE 에서 기본으로 제공하고 있는 기능인데요, 기본설정은 관리자만 선택할 수 있게 되어있습니다.
글쓰기창에서 옵션라인을 살펴보시면 아래 그림과 같은 곳이 있을 거에요. 붉은 색 부분으로 제목의 색상을 설정할 수 있습니다.

20080214.jpg

모든 사용자가 설정 할 수 있게 하고 싶으면 write_form.html 문서를 열어 <!-- 옵션 --> 이라는 주석 아래에 있는 $grant->manager 함수를 제거하셔야합니다.
그냥 관리자만 사용하는 것이 좋을 거에요. 모든 사용자가 사용시 산만해보일 수 있거든요ㆀ]]> Wed, 27 Feb 2008 18:18:41 +0900 <![CDATA[졸졸이스토커 사용방법]]>
다운 받으신 stalker.html을 수정하셔야  됩니다. ㅡㅡ;; 위의 본문에도 적혀있는데....헐...

아마도 저만큼 초보이신듯 ^^ stalker.html을 열어보시면..

<a href="#">?꾨줈</a><br />

이렇게 써져 있습니다.

이것을 <a href="#">위로</a><br /> 이렇게 바꾸시면 되고요.

그곳에 이미지를 넣고 싶다면 일단 이미지를 만드신후에...


<a href='#' onclick='this.blur();'><img src='이미지주소'></a> 이렇게...

그리고 다른 이미지를 또 넣고 밑으로 링크를 만들고 싶다면

<a href='#' onclick='this.blur();'><img src='이미지주소'></a><br />
<a href='링크할 주소' target='_blink' onclick='this.blur();'><img src='이미지주소'></a>

위 처럼 해주시면 되고요. 세개 네개를 해도 같은 패턴으로 가시면 됩니다.

<a href='#' onclick='this.blur();'><img src='이미지주소'></a><br />
<a href='링크할 주소' target='_blink' onclick='this.blur();'><img src='이미지주소'></a><br />
<a href='링크할 주소' target='_blink' onclick='this.blur();'><img src='이미지주소'></a><br />

설명이 맞는지 모르겠습니다.
저두 현재 걍 톱이미지만 만들어 쓰고 있어서.. 두개세개도 아마 위처럼 하시면 될듯 한데요.

초보맘 잘알기에 아는 한도에서 설명드립니다.

ㅋ 틀릴지도 ㅡㅡ;;;


<img src='./images/top.gif' border='0'>
]]> Tue, 05 Feb 2008 05:14:10 +0900 <![CDATA[0.2.9 (선행) 버전으로 패치시 에디터창 안나오는 것 수정]]>

에디터창은 write_form.html 문서와 view_document.html 문서에서 불러오는데요 0.2.9선행버전에서 에디터를 불러오는 코드의 변경이 있었네요.
버전업데이트하고 나서 수정할 곳이 좀 보여서 스킨업데이트는 2~3일정도 걸릴 것 같습니다.
급한대로 에디터창 불러오는 방법입니다.

 * 검색어라고 되어있는 부분의 코드를 Ctrl+F로 검색하여 찾고, 변경이라고 되어있는 부분의 코드로 대체합니다.


copy to clipboard 로 쉽게 복사하는 것 아시죠? ^^ㆀ

 1. write_form.html (글쓰기창 수정하기)


검색어
view plaincopy to clipboardprint?
  1. {$editor}  


변경

view plaincopy to clipboardprint?
  1. {$oDocument->getEditor()}  



 2. view_document.html  (댓글(코멘트)창 수정하기)


검색어
view plaincopy to clipboardprint?
  1. {$comment_editor}  


변경

view plaincopy to clipboardprint?
  1. <font style="background-color: rgb(238, 238, 34);">{$oDocument->getCommentEditor()}</font>  



아,, 코멘트 수정창을 깜빡 했군요. -_-;;

 3. comment_form.html (댓글 수정창 수정하기)


검색어

view plaincopy to clipboardprint?
  1. <font style="background-color: rgb(238, 238, 34);">{$comment_editor}</font>  


변경

view plaincopy to clipboardprint?
<font style="background-color: rgb(238, 238, 34);">{$oComment->getEditor()}</font>
]]> Thu, 31 Jan 2008 03:42:25 +0900 <![CDATA[상단 서브메뉴 출력하기 팁(똑디님의 강좌중에서...)]]> 우선 두가지 파일을 다루셔야 합니다.

zbxe/layouts/xe_official/layout.html 파일에서 자신의 홈페이지에 알맞은 위치에 아래 소스를 넣으시기 바랍니다.

<!--GNB_sub-->
  <ul id="gnb_sub">
  <table border="0px" cellpadding="0px" cellspacing="0px" width="100%" height="40px">
  <tr>
            <td colspan="2" height="40px" nowrap style="padding:0px 20px 0px 20px;" align="center">
          
            <!-- 2차 메뉴 -->
            <!--@if($menu_1st)-->
                {@ $idx = 1 }
                <!--@foreach($menu_1st['list'] as $key => $val)--><!--@if($val['text'])-->
    
    &nbsp;<a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end--> class="submenu">
    <!--@if($val['selected'])-->
    <b>
    <img src=/images/arrow.gif border='0'>
    <font color='#ff9900'>
    {$val['text']}
    </font>
    </b>
    <!--@else-->
    {$val['text']}
    <!--@end-->
    </a>&nbsp;
    
                {@$idx++}
                <!--@end-->
                <!--@end-->
   
            <!--@end-->
            </td>
        </tr>
        </table>
  </ul>
  <!--//GNB-->

그리고 이 소스의 css 처리를 위해서

zbxe/layouts/xe_official/css/white.css 파일에서 34라인정도쯤에 아래소스를 추가해 주세요.

#gnb_sub { position:absolute; top:130px; left:10; height:90px; overflow:hidden; white-space:nowrap; margin-bottom:0px;}#gnb_sub .submenu {text-align:center; color:#333333;text-decoration:none;} /* 상단주메뉴 밑 서브메뉴 처리 부분 */


이소스는 xe_official 레이아웃템플릿에서 white css를 사용한다는 가정하에 설명을 드린것이고, 자신의 홈피에 맞는 파일을 변경해서 사용하시면 되겠습니다.
]]> Sat, 26 Jan 2008 16:03:08 +0900 <![CDATA[XHTML & CSS 개요]]>

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

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

 

  • 스프링노트는 링크에 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">

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

 

Strict 와 Transitional 에 관하여...

사전적 의미 :

  • 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>
        <ul 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

]]> Sat, 26 Jan 2008 12:54:29 +0900 <![CDATA[여러 개의 메뉴를 달아보자!]]>

빨갛게 표시된 부분만 잘 보시면 됩니다. 나머지는 잡설입니다.

제로보드 사이트를 잘 살펴보면 두 종류의 메뉴가 사용된 것을 알 수 있습니다. 방문자에게 컨텐츠를 제공하는 상단과 우측의 메뉴 한 종류와 홈페이지 운영과 관계된 내용을 연결하는 하단의 메뉴 한 종류 해서 두 가지 메뉴가 사용되고 있습니다.
이 팁에서는 이와같이 두 종류 이상의 메뉴를 생성하고 연결하는 방법을 기본 레이아웃인 xe_official과 제로보드 사이트를 예를 들어 소개하겠습니다.

보통 레이아웃과 메뉴를 연동하기 위해서는 다음의 과정을 거칩니다.
1. info.xml 에서 메뉴에 대한 변수를 설정
2. 관리자 페이지에서 메뉴를 생성
3. 레이아웃 생성시에 메뉴와 변수를 연결시킴
4. layout.html에서 변수를 불러옴

1번과 4번은 레이아웃 제작자가 신경 쓸 부분이고 2번과 3번은 레이아웃 사용자가 신경 써야 할 부분이죠.

0. 메뉴 구상
   - 아래와 같이 제로보드 홈페이지 상단 및 좌측에 나타나는 컨텐츠와 연결되는 main menu 와
      하단에 나타나는 사이트 운영과 관계된 bottom menu 로 메뉴로 구성할 예정입니다.
menus.JPG

1. info.xml에서 메뉴 변수 설정
레이아웃을 만들 때 conf폴더에 있는 info.xml은 보통 별로 신경을 쓰지 않습니다. 하지만 이 파일에서
레이아웃에 필요한 여러가지 확장변수를 설정할 수 있으므로 잘 사용한다면 매우 유용할 것입니다.
여기서 우리가 다루게 될 메뉴 부분은 info.xml 파일내에 <menus>... </menus>로 구분되어 있습니다.

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

하위 메뉴를 포함하는 한 개의 메뉴집단(또는 덩어리?)은 <menu name="...">...</menu> 부분과 일대일 대응됩니다.
우리는 상단 및 우측 메뉴 와 하단 메뉴 이렇게 두 개의 메뉴를 사용 할 것이므로 <menu> 태그가 두 개 필요합니다.
더 많은 종류의 메뉴를 사용할 것이라면 여기에서 <menu> 부분을  그 만큼 더 정의해주면 됩니다.
menu태그의 name 속성은 중요합니다. 나중에 layout에서 불러 쓸 이름이 되므로 고유하게 붙여줘야 합니다.
(<menu> 태그의 name은 layout.html에서 사용될 변수명이라고 생각하시면 됩니다.)
default="true" 는 정확히 무슨 뜻인지 모르겠습니다만, 여기서는 있으나 없으나 별 차이 없을거 같은 생각이 듭니다.
<title>은 관리자페이지에서 레이아웃 생성시에 메뉴 항목에 표시되는 제목입니다.
레이아웃을 쓰는 사람이 알기 쉽게 하는 것이 좋겠네요.
<title> 부분 바로 아래에 <description xml:lang="ko">설명</description> 을 추가하여 제목에 설명서를 달아도 될거 같은데
해보지 않아서 정확하지 않습니다.
<maxdepth>3</maxdepth>는 메뉴의 단계(깊이?) 입니다. 즉 3단계까지의 메뉴를 만들거라는 이야기입니다.

2. 관리자 페이지에서 메뉴 생성하기
메뉴 생성하는 방법은 다들 아실거라고 생각되므로 따로 설명드리지 않겠습니다.
다만 '0.메뉴구상' 에서 보신 것같이 main, bottom 두 개의 메뉴를 만들어 주면 됩니다.
이 때 메뉴 이름은 위의 name에서 정한 것과 일치하지 않아도 됩니다. 자신이 알기쉽게 붙여주면 됩니다.

3. 레이아웃 생성시에 메뉴와 변수를 연길시키기
layout_cfg.jpg
관리자페이지에서 레이아웃을 생성하면 위와같은 설정화면이 나옵니다. 위 설정화면의 내용은 info.xml에 따라서
달라집니다. 위 그림의 표시된 부분이 info.xml에서 정의한 변수와 생성시킨 메뉴를 각각 연결시켜주는 모습입니다.
"상단 메뉴"는 info.xml의 title에서 정의해준 것이고 그 아래 괄호에 있는 main_menu는 <menu>태그의 name임을
쉽게 알 수 있습니다.  그 옆에 나온 것은 메뉴관리에서 만들어준 메뉴의 이름입니다. 이름을 똑같이 만들었더니
연결하기가 편합니다. <menu>태그를 더 많이 만든다면 "하단 메뉴" 아래로 그 내용이 더 나올 것입니다.

4. layout.html 에서 메뉴 불러다 쓰기
기본 레이아웃인 xe_official의 layout.html중간에 다음과 같은 부분이 있습니다.

<!--@foreach($main_menu->list as $key => $val)-->

위의 코드가 바로 info.xml에서 지정한 name을 이용해서 레이아웃 생성시에 연결시킨 메뉴를 불러오는 것입니다.
이제는 붉게 표시된 것이 name에서 정한 이름임을 말하지 않아도 아실 겁니다.
그리고 layout.html 마지막 부분에는 아래와 같은 코드가 있습니다.

<!--@foreach($bottom_menu->list as $key => $val)-->
보시다시피 $main_menu 와 $bottom_menu는 생성시킨 메뉴와 연결되는 열쇠가 됩니다.
다른 반복제어문을 쓰더라도 이것들만 있으면 얼마든지 메뉴를 가져다가 쓸 수 있습니다.

지금까지가 메뉴를 가져오는 방법에 대한 설명이었습니다.
 "어디다가 어떻게 붙일 것인가"라는 것은 디자인을 어떻게 하고 반복-제어문을 어떻게 다룰 것인가의 문제입니다.

주~욱 길게 쓰긴 했는데 속을 들여다보니 별 내용 없네요..ㅠㅠ
다만 누구에게라도 도움이 되었으면 합니다
]]> Fri, 25 Jan 2008 05:41:24 +0900