** 다시 새로워질 디자인에 맞춰 스크린샷을 첨부하도록 하겠습니다.
XE가 업로드되어 있는 주소로 접속합니다.
예를 들어, http://자신의계정도메인/XE디렉토리 라고 입력하시면 됩니다.
- zbXE가 업로드된 url을 브라우저에서 입력하세요.
예를 들어 홈페이지 주소가 http://www.abc.com 이고 XE가 업로드 된 폴더가 xe 일경우 아래와 같이 입력하세요.
http://www.abc.com/xe - 홈페이지에서 사용하실 1) 언어를 선택하시고 2) 라이센스에 동의 합니다.
zbXE에서는 한국어, 영어, 중국어, 프랑스어, 스페인어, 일어, 러시아어, 프랑스어, 독일어 등을 지원하고 있습니다
이때 선택된 언어는 대표 사용 언어로 지정이 되고 차후 관리자 페이지에서 대표 사용 언어를 변경하실 수 있습니다.
대표 사용 언어는 홈페이지에 처음 접속한 사용자들에게 보여질 언어입니다.
-
설치 가능 여부를 확인한 후 "설치를 진행합니다" 버튼을 클릭합니다.
-
사용하시려는 DB를 선택하신 후 "설치를 진행합니다" 버튼을 클릭합니다.
설치환경에 따라 DB 종류가 나타나지 않을 수 있습니다.
각 DB에 대해서는 아래 내용을 참고하세요.- MySQL
: 대부분 많이 사용하는 Database 입니다. MyIsam방식을 이용하기 때문에 트랜잭션이 동작하지 않습니다.
안전한 사이트 운영을 위해서라면 MySQL InnoDB를 추천합니다. - MySQL InnoDB
: MySQL에서 트랜잭션을 지원하는 DB인 InnoDB를 이용할 수 있습니다.
트랜잭션을 사용할 수 있기 때문에 여러 쿼리가 실행되다가 오류가 생겼을 경우 rollback이 가능합니다.
또한 트랜잭션 begin을 통해 보다 빠른 입출력을 기대할 수 있습니다. - Sqlite2
: 파일로 DB를 구현한 Sqlite의 version2입니다.
Sqlite3에 비해 안정적이지 않을 수 있습니다.
파일로 DB내용이 저장되기 때문에 파일의 위치를 지정해주셔야 합니다. - Sqlite3 pdo
: Sqlite의 최근 버전인 version3이며 트랜잭션의 지원등 보다 안정적인 동작을 합니다.
역시 파일로 DB내용이 저장되기 때문에 파일의 위치를 지정해주셔야 합니다. - Cubrid
: ORDBMS인 큐브리드를 사용하실 수 있습니다.
트랜잭션이 지원되고 다양한 기능과 안정적이고 빠른 DBMS입니다.
국내에서 만든 DB이며 무료로 사용하실 수 있고 다양한 기술 지원이 직접 이루어지고 있습니다.
http://www.cubrid.com/ 를 참고하세요. -
PostgreSQL
: 매우 오래된 역사를 가진 전통 DBMS인 PostgreSQL을 사용하실 수 있습니다.
트랜잭션이 지원되며 안정적이고 빠른 DBMS입니다.
- MySQL
-
MySQL/ Cubrid/ PostgreSQL의 설정: 밑줄 그어진 부분은 필수적으로 확인하고 기입하셔야 할 부분이며, *(별) 표시는 꼭 하지 않으셔도 됩니다
-
DB 정보 입력
- DB 호스트네임
: DB서버의 주소를 입력하시면 됩니다.
기본적으로 localhost로 지정되어 있는데 이 DB 서버의 주소는 계정제공 업체에서 확인할 수 있습니다. - DB Port: 기본으로 사용되는 port가 지정되어 있는데 계정제공 업체에서 확인할 수 있습니다.
- 테이블 머릿말: 하나의 DB에 여러개의 zbXE를 설치할 수 있도록 DB Table 머릿말을 지정할 수 있습니다.
기본값인 xe로 하시거나 필요에 따라 다른 이름으로 바꾸실 수 있습니다. - Rewrite mod 사용: 호스팅사가 rewrite mod 지원시만 클릭하시면 됩니다.
Rewrite mod는 예쁜 주소(ex:http://domain.com/zbxe/admin)을 지원합니다. - SQLite 의 설정: SQLite는 별도의 DB 서버 없이 파일로 DB가 관리되기 때문에 설정법이 약간 다릅니다.
- DB 호스트네임
- 관리자 정보 입력
위와 같이 sqlite의 경우 DB데이터베이스 파일의 위치와 이름을 직접 입력하실 수 있습니다.
만약 XE가 설치된 곳 하단으로 생성하게 되면 누군가가 직접 파일 위치로 접근하여 다운로드 받을 수 있습니다.
가능한 웹으로 노출되지 않은 곳으로 DB 데이터베이스 파일 위치를 지정하세요.
-
위의 단계까지 모두 지나면 설치가 완료됩니다.
이제 XE의 각 구성 요소 및 관리자 페이지에 대해서 읽어주세요.
tgz파일을 서버에서 압축을 푸는 사용자는 FTP 기본 사용법을 알 것이라 가정하고, 이 페이지는 초보자를 위해 설명합니다.
-
XE 최신 버전을 공식 사이트에서 다운 받습니다.
최신 버전은 http://www.zeroboard.com/xe_issuetracker/dispIssuetrackerDownload 에서 다운 받을 수 있습니다
이 파일들 중에 원하시는 패키지를 받으시면 됩니다. 이후 진행 과정은 동일하나, 편의상 이 페이지에서는 xe.1.1.1.zip으로 진행합니다.
- 다운받은
(xe.1.1.1.zip)파일의 압축 풉니다.
-
압축을 풀면 아래 그림과 같은 파일들이 나오게 됩니다.
이 파일들을 XE를 설치할 디렉토리에 FTP로 업로드 하여 XE설치를 진행할 것입니다. 이 페이지에서 FTP 프로그램은 파일질라를 사용하였습니다.
-
FTP에서 XE를 설치할 위치에 접속합니다. 접속 후에
왼쪽 그림과 같이 XE의 압축을 풀어 나온 모든 파일을 선택하고 업로드 합니다. FTP로 업로드 중에 빠지는 파일이 생길 수 있습니다. 파일수가 많으니 빠지는 파일이 없도록 업로드 해주세요.
- 업로드가 완료되면, FTP로 XE의 모든 파일들을 업로드한 위치에 인터넷 브라우저를 통해 접속합니다.
- 이 단계 이후는 2. 설치하기 를 참고하세요
XE다운로드/업로드 방법#
XE를 설치 하기 위해서는 FTP를 이용해 업로드 하는 방법과 SVN을 이용하는 방법 2가지가 있습니다. XE를 설치하려는 서버가 SVN을 지원하는 경우 XE파일들을 바로 서버로 보낼 수 있습니다.
- 다운로드하기 : XE 다운로드 게시판
- SVN으로 전송하기 : SVN으로 전송하기 참조
안정화 버전과 개발버전의 차이#
XE는 안정화 버전 과 선행 버전 의 두가지 버전으로 제공이 됩니다.
- 안정화 버전 : 공식(정식) 배포버전 입니다. 모든 테스트 과정을 거쳐서 안정적으로 작동된다고 판단되는 버전입니다.
- 선행 버전 : 이전 버전의 버그 수정, 새로운 기능의 추가 및 성능 최적화 등 개발이 진행중인 버전으로서 아직 완벽하 게 테스트되지 않은 버전입니다.
어떤 버전을 이용해야 할까?
- 안정적인 웹사이트 구축을 원해! → 안정화 버전
- 새로운 추가기능과 버그 수정을 빨리 이용하고 싶어~! → 선행 버전
파일명에 따른 파일 내용#
XE는 최대 6개 정도의 파일을 제공하고 있습니다.
- xe.버전.zip : 전체 파일이 zip으로 압축되어 있습니다. 내 컴퓨터에서 압축을 해제하여 계정에 올리는 방법으로 사용합니다. 파일의 수가 매우 많기 때문에, 오류가 나지 않도록 주의하셔야 합니다.
파일명의 일부분에 버전번호를 포함하고 있습니다.- xe.버전.tgz : 계정에 올린 후, 리눅스 셸로 압축을 해제할 수 있는 파일로서, 파일의 버전명도 함께 포함하고 있습니다
- xe.버전.changed.zip : 이전 버전에서 최신 버전으로 수정된 파일만 변경합니다. (단, 사용시 바로 직전버전에서 업그레이드 합니다.)
xe.버전.alpha.zip :선행버전시에 배포되는 파일로, 새로운 기능이나 버그 등을 수정 후 개발자들이 제한된 환경에서 테스트를 거쳤을 뿐 다양한 환경에서 올바르게 동작함을 보장하지 못할 수 없을 때 배포됩니다. 파일의 버전명을 표시하고 있습니다.
xe.버전.alpha.tgz : 선행버전시에 배포되는 파일로, 계정에 올린 후, 리눅스 쉘로 압축을 해제할 수 있는 파일로서, 파일의 버전명도 함께 포함하고 있습니다.
xe.버전.alpha.changed.zip : 선행버전시에 배포되는 파일로, 이전 정식버전에서 선행버전으로 수정된 파일만 변경합니다. (단, 사용시 바로 직전 버전에서 업그레이드 합니다.)
배포 파일 다운로드#
XE는 공식 홈페이지에서 다운로드할 수 있습니다.
XE는 오픈소스로 제공되기 때문에, XE 공식 홈페이지 이외의 사이트에서도 XE를 수정하여 배포 할 수도 있습니다.
이 경우 버그 수정 등의 기술 지원은 해당 배포자를 통해 이루어져야 합니다.
제로보드 공식 사이트에서는 공식 사이트에서 배포하는 버전에 대한 업그레이드 및 기술지원만 이루어집니다.
.zip파일과 .tgz 파일#
XE는 .zip과 .tgz 의 두 가지 압축 형태로 제공됩니다.
리눅스 셸 명령어를 이용하실 수 있는 분들은 .tgz 파일을 다운로드 받으셔서 계정에 올린 후 압축을 푸시는 것이 편리합니다.
일반적인 윈도우 환경에서 세팅을 하시려면 .zip 파일을 받으셔서 압축을 푸신 후에 모든 파일을 FTP를 통해 업로드하시면 됩니다.
tgz 파일을 이용하는 방법은 계정에 올리기 에서 확인하실 수 있습니다.
**수정중
XHTML(eXtensible Hypertext Markup Language) 이란 무엇인가?
** 페이지 수정중입니다.
이 페이지에서는 Xpress Engine(이하, XE) 스킨 코딩을 위한 기초 문법인 'XHTML의 개념' 과 'HTML에서 XHTML 로 전환'의 필요성을 알기 쉽게 설명하려 합니다.
조금 길어 질 수도 있지만 이 한페이지로 'XE의 스킨을 제작하기위한 XHTML'을 이해하는데, 도움이 될 것이라 기대해봅니다.
XHTML과 CSS에 대해서, 이 페이지 외에 한국소프트웨어진흥원(KIPA)에서 만든 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이 아직까지도 대부분의 웹 디자이너에게 멀게만 느껴지도록 방치된 원인이 아닐까합니다. (필자도 얼마전까지 그래왔습니다. XE의 스킨을 만들어보기 시작하면서 XHTML관련 책을 한권 사서 보고 나서야 XHTML을 써야겠구나 하는 생각이 들었으니까요.)
XHTML 걱정하지 마세요.
기존 HTML로 홈페이지를 직접 만들어 보신 여러분들 께서는 이미 XHTML의 대부분의 문법을 알고 계십니다.
단, 알면서도 지키지 않았거나, 그 테그의 의미를 잘못 이해하고 있었던 것이 조금 있을 뿐입니다.
이제 XHTML문서를 작성하는 방법을 하나 하나 알아보도록 하겠습니다.
*핵심정리 : XHTML은 "하나의 문서를 여러 가지 장치, 여러 가지 브라우저가 그 내용을 제대로 이해하고 보여줄 수 있도록 하는 것"을 목적으로 탄생하였습니다.
*추가 : 문서를 보는데 도대체 얼마나 다양한 "여러가지 환경"이 있길래 이런 고민을 하는 것인지
다음 페이지를 보시면 느낌이 확~ 오실 것입니다.
웹 접근성 관계요소 (by 정찬명 님) : http://www.zeroboard.com/12663405
XHTML 문서의 구조#
XHTML은 문서의 구조(Structure)와 표현(Presentation)을 분리하여 작성합니다.
이것은 XHTML의 탄생 목적을 달성하기 위한 중요한 방법입니다.
구조는 한마디로 문서의 내용 이라고 볼 수 있고,
표현은 그 내용을 표시해주는 방법 즉, 디자인 이라고 보면 되겠습니다.
구조 (Structure) = 내용 (Contents)
표현 (Presentation) = 디자인 (Design)
대부분의 프로그램들이 흔히말하는 "코드와 디자인의 분리" 를 시도하고있습니다.
이것의 장점은 개발과 디자인의 완벽한 분업화가 가능하며, 디자이너는 개발언어를 완벽하게 이해할 필요가 없어지며, 서로간의 간섭을 줄여 오류발생의 가능성도 줄여줍니다. 그리고, 유지보수 측면에서도 유리하게 됩니다.
XE 역시 이러한 이유로 코드와 스킨을 분리시켜 놓았습니다. 그래서 스킨 디자이너는 머리아픈 PHP코드를 모두 이해할 필요가 없어졌습니다.
그리고, 스킨은 역시 같은 이유로 '구조'와 '표현'으로 다시한번 분리되는 것입니다.
디자인을 변경할 때는 디자인만 신경 쓰면 되고, 그 내용은 손 댈 필요가 없으며 의도하지 않게 내용이 변경되는 일도 없습니다.
이해를 돕기 위해서 다음 그림을 보시겠습니다.
위 그림을 보면 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 - (XE의 기본 문서형입니다.) 기존 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 용어" 부분을 참조하시기 바랍니다.
* 링크된 번역문서의 번역도 좀 이상한 부분이 있어서 필자가 다시 번역했습니다.^^;
즉, W3C의 의도는
이미 HTML 4.01 때 부터 구조와 표현의 분리를 지향해왔고,
이 문법을 '엄격하게 지킬 것'을 권장하고 있지만, '완벽한 문법'으로의 전환에 어려움을 느끼는 개발자를 위해 Transitional DTD를 (임시로) 만들어 주었고, XE 역시 아직 '엄격한 XHTML'에 익숙하지 않은 상당수의 디자이너&개발자와 구버젼HTML 문법으로 구성된 기존 콘텐츠를 고려하여 XHTML 1.0 Transitional DTD를 선택한 것이라고 볼 수 있겠습니다.
HTML 태그(Tag)의 의미를 수호하라!!!#
HTML 문법 안에 있는 모든 태그(Tag)들은 명확한 의미을 가지고 있습니다. 우리는 그 태그의 의미에 맞게 문서를 작성해야 브라우저는 문서의 구조를 제대로 이해할 수 있습니다.
태그의 의미에 맞게 작성한다는 것이 어떤 것인지 이해하기 위해서 몇가지 예를 들어 설명해 보겠습니다.
| ● 예제 1 - 이것은 제목입니다. |
|---|
|
문서안에 아래와 같은 내용이 있다고 합시다.
위와 같은 문서에서 '짬뽕의 역사'를 제목으로 만들어 보겠습니다. XHTML을 알기전의 우리는 이런 식으로 코딩을 해왔습니다.
결과는 이렇게 보이죠. 보기에는 제목처럼 보입니다. 그러나 브라우저는 어느 것이 제목인지 어느것이 본문인지 구분하지 못합니다. 우리는 브라우저에게 "'짬뽕의 역사'를 굵게 그리고 글꼴크기를 크게 표현해달라." 고 표현(presentation)에 관한 설명만 한 것입니다. 문서의 구조는 전혀 설명해주고 있지 않습니다.
다시한번 기억해야 할 것은 XHTML의 문법은 HTML 파일에서 오직 '문서의 구조'만 표현하길 권장하고 있다는 것입니다. 그리고, 엄격한 XHTML 규정 안에서는 표현과 관련된 대부분의 요소(element)와 속성(attribute)들은 없어졌습니다. 즉, 엄격한 XHTML문법에서는 이미 없어진 '표현과 관련된 요소와 속성들'을 사용하면 오류(Error)로 인식됩니다. 그 렇다고 너무 걱정하실 필요는 없습니다. 대부분의 브라우저는 오류가 있는 문서라도 가능한 제대로 보여주려고 나름대로의 방법으로 노력해주기 때문에 여러분의 사이트는 오류(Error)메시지 없이 잘 돌아가고 있긴 할테니까요. 한정된 브라우저에서만 말이죠.
문법적인 오류가 있는지 검사하는 방법에 관하여 이 페이지 마지막 "XHTML 유효성 검사 도구"에서 배우게 될 것입니다.
그러면 XHTML 문법에 맞게 작성해 보겠습니다.
결과는 이렇게 보입니다. 똑같아 보인다구요? 그렇지만 의미는 크게 다릅니다.
<h1>태그의 "h" 는 'headline'의 첫글자를 따서 만들어진 태그입니다. 즉 제목을 의미합니다. <p>태그의 "p" 는 'paragraph'. 즉 문단을 의미합니다.
문 서의 구조를 이루는 요소들은 제목, 소제목, 여러 문단으로 이루어진 본문, 목록, 표, 인용구, 강조문 등의 여러가지가 있습니다. 그리고 HTML은 그 요소들을 위한 태그를 대부분 가지고 있습니다. 우리는 태그를 그런 의미에 따라 올바게 사용함으로서 브라우저에게 문서의 구조를 정확하게 알려주어야 하는 것입니다.
질문있어요!!!
|
| ●예제 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> 태그를 기존에 하던 데로 굵게, 기울어지게 표현해 줍니다.
즉, XE의 스킨을 만들 때 같은 효과라면 <strong>을... 이왕이면 다홍치마라고 XHTML 규격에 맞는 태그를 사용하는 것이 좋겠습니다. |
약간 바뀐 HTML 태그(Tags) 규칙#
- <html xmlns="http://www.w3.org/1999/xhtml">
<html> 엘리먼트에 위와 같이 xmlns 속성을 추가해줍니다.
이것은 문서형 선언(DTD)과 비슷하게 html이 어떤 XML 언어에 속해있는지 식별하도록 하는데 사용됩니다. - 빈태그 표기법 : empty elements (elements without closing tags)
대부분의 태그는 '시작(열기)태그'와 '종료(닫기)태그'의 한짝으로 구성되어 있습니다.
그렇지만 <br><img> 태그와 같이 짝이 없이 혼자 작동하는 태그들도 있습니다. 이런 짝없는 태그를 '빈요소(Empty Elements)' 라고 부르며 이런 빈요소 들을 표기할 때는 브라우저에게 "예는 짝이 없으니 종료태그를 찾느라고 수고할 필요가 없어!!" 라고 친절하게 알려주어야 합니다.
마지막 ">" 앞에 슬래시를 넣어주면 됩니다.
<br> 태그를 예로 들면 <br /> 라고 적어야 한다는 것이죠.
<img> 태그는 <img src="dir/image.gif" alt="imgName" /> 이런식으로 적어 주셔야합니다.
슬래시 앞에 공백을 하나 추가해주는 것이 좋은데 그것은 슬래시 앞에 공백없이는 "/>"를 인식하지 못하는 옛날 브라우저들을 위해서입니다. 하위 버젼과의 호환성을 위해서 슬래시 앞에 공백을 꼭 넣어주세요. - 대체 텍스트 입력 : <img> 엘리먼트에는 반드시 alt 속성을 넣어줍니다.
alt (alternate : 교체하다, 대리인) 속성은 이미지 파일이 없어졌을 때 대신 표시해줄 이름(text)를 적어 주는 것입니다. 이는 파일이 없어졌을 때 외에도 그림을 보지 못하는 시각장애인을 위한 브라우저 등에서도 그 이미지가 가진 의미를 이해하도록 돕는 역할을 합니다. - 속성의 값들은 반드시 따옴표로 둘러싼다.
틀림: <table rows=3>
옳음: <table rows="3"> -
간소화된 속성의 사용 금지
틀림: <textarea readonly>READ-ONLY</textarea>
옳음: <textarea readonly="readonly">READ-ONLY</textarea>
이 외에도 checked , nowrap 등과 같은 약식표기는 허용되지 않습니다. - 태그이름과 속성은 반드시 소문자로 표기
틀림: <BODY><P>The Best Page Ever</P></BODY>
옳음: <body><p>The Best Page Ever</p></body> - 모든 인라인 요소는 블록 요소에 둘러싸여야 한다.
틀림: <body>Welcome to my page.</body>
옳음: <body><p>Welcome to my page.</p></body>
본문(body)에 직접 텍스트를 삽입할 수 없습니다. 반드시 <h1><p><table><div>태그와 같은 블록 요소로 감싸주어야합니다.
* 블록 요소와 인라인 요소 에 관하여 모르시는 분은 다음 "DIV 레이아웃" 단원의 설명을 참조해주세요. -
name 속성은 폐기, id 속성만 사용
'name' 속성은 엘리먼트에 이름을 주어 스타일쉬트나 스크립트에서 참조 할 수 있게 해 주었습니다.
XHTML에서는 문서내의 엘리먼트에 유일한 이름을 부여하기 위해서 'id' 속성 만을 사용합니다.
* 사실 name 속성은 그다지 많이 사용되는 편이 아니었을 것입니다. 별문제가 되지 안는 변경사항이죠.
위 8가지 목록은 모든 변경사항을 설명 한 것은 아니지만 쉽게 접하게될 주요 변경목록이라고 볼 수 있습니다. 그다지 많이 달라지지는 않았죠?
"/>"를 추가하고 "alt" 속성을 꼭 적어주라는 좀 귀찮아 진 규칙과, 기존 문법을 정확하게 지켜야 한다는 내용이 대부분 입니다. 그렇지 않으면 XHTML은 오류(Error)로 인식 할 것이라는 내용이죠.
기타 변경사항 참조 :
- 위키백과 - " 유효한 XHTML 문서 작성하기 "
- XHTML1.0 규정집 (한국어 번역문 by Trio.co.kr) - " 4. HTML4와 차잇점 "
- XHTML & CSS 관련 책을 하나 사보시는 것도 좋습니다. ^^
DIV 레이아웃#
많 은 디자이너 분들께서 이제까지 웹디자인을 할 때 홈페이지의 큰 틀인 레이아웃을 만드는 작업을 할 때 <table>태그를 주로 이용해 오셨을 것입니다. 그러나 그것은 HTML 문법에 적합한 방식이 아니었습니다. <table>태그는 단지 "표"를 그리기 위해서 만들어졌기 때문입니다.
HTML문법에 적합하지 않게 작성된 문서는 웹표준에 벗어난다고 보시면 됩니다.
XE의 스킨제작을 공부하시기 위해서 대부분 "XE공식스킨"을 분석해 보는 것 부터 시작하실 텐데, 기존 <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 />태그로 만들어진 페이지의 구조를 그림으로 표현해 보겠습니다.
이와 같이 블록 엘리먼트는 덩어리 구조를 가지게 됩니다.
| ●예제 3 - <q>, <blockquote> 라는 태그를 비교해봅시다. |
|---|
|
이 두 태그는 모두 "인용(quote)" 이라는 의미를 가지고 있습니다.
이런 코드는 아래와 같이 표시됩니다. <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>태그는 여러가지 요소를 한데 묶어 하나의 그룹으로 만들어 주는 블록 엘리먼트 입니다.
위 그림을 보면 4가지 음식에 관하여 설명을 하는 페이지의 구조를 개념적으로 표현한 것입니다. 음식이름을 제목으로하고 그 다음에 음식에 관한 설명 문단이 나오는 구조가 4번 반복되고 있습니다. 똑같은 형태가 반복되어 내용이 한눈에 들어오지는 않습니다. 음식의 수가 많아지면 더 심하겠죠.
그런데 자세히 보면 크게 한식과 중식의 두가지로 분류가 가능하다는 것을 알 수 있습니다. 이런 논리적인 분류를 <div>태그를 이용해서 그룹으로 묶어 보겠습니다.
이런 식으로 묶어주니 큰 덩어리가 눈에 들어오면서 훨씬 이해하기 쉬워지겠죠.
DIV 태그는 공통된 부분을 필요에 따라 그룹으로 묶어 줌으로서 문서를 훨씬 구조적이고 체계적이며 논리적으로 정리해 줄 수 있는 중요한 도구입니다.
태그는 이렇게 작성됩니다.
- <div id="한식">
-
<h1>김치볶음밥</h1>
-
<p>김치볶음밥 자세한 설명</p>
-
<h1>불고기</h1>
-
<p>불고기 자세한 설명</p>
- </div>
- <div id="중식">
-
<h1>짬뽕</h1>
-
<p>짬뽕 자세한 설명</p>
<h1>자장면</h1>
-
<p>자장면 자세한 설명</p>
- </div>
id 속성은 해당 엘리먼트에 주어지는 고유한 이름으로 한 문서안에서 중복되어서는 안됩니다. CSS는 이 고유한 이름을 통해서 그 엘리먼트가 어떻게 표현될 것인지를 정확하게 지정해 줄 수 있게 됩니다.
질문있어요!!!
- 그룹을 지어주는 태그는 블록 엘리먼트인 DIV 밖에 없나요? 인라인 엘리먼트는요?
있습니다. 인라인 엘리먼트인 <span></span> 이 있습니다. <span>태그는 문단 안에서 내용의 흐름을 방해하지 않으면서 부분적으로 특유의 속성을 지정하고싶을 때 사용하게 됩니다.
DIV 위치지정#
이제는 제대로 레이아웃을 잡아 보도록 하겠습니다.
DIV 블록을 원하는 위치로 보내기 위해서는 미리 알아 두셔야 할 속성들이 있습니다.
바로 margin(바깥여백), padding(안여백), float(유동) 이렇게 3가지 속성이 주로 사용되고, 추가로 position(위치) 속성이 사용될 때도 있습니다. 위에서 언급했던 "CSS의 박스모델" 에 관한 속성들과 "유동(float)"에 관한 속성들 입니다. 링크된 페이지들을 참조해서 공부해 주시고 어느정도는 아신다는 가정하에서 진행하도록 하겠습니다.
- 8. 박스모델 - http://trio.co.kr/webrefer/css2/box.html
- 9. 보이는 양식화 모델 - http://trio.co.kr/webrefer/css2/visuren.html (특히, 9.5 유동(float) 부분)
예제를 작성할 때 사용한 브라우저는 'Firefox 2'를 사용하였습니다.
최종적으로는 IE 또는 Safari , Opera 같은 다른 브라우저에서도 똑같이 잘 보여야 하겠지만 실습하시면서 혼선이 생길 까봐 미리 말씀을 드립니다. 모든 브라우저에서 동일한 디자인으로 표현되도록 하는 작업은 속성들을 바꿔가며 각각의 브라우저에서 계속적으로 테스트를 해보는 수 밖에 없습니다. (특히 IE6는 -.-;;; OTL)
자 그럼 시작해 보겠습니다.
아래 그림과 같은 블록단위 구조를 가진 페이지가 있습니다. 한번 살펴볼까요?
레이아웃은 이 블록단위의 덩어리들을 어떻게 배치할 것인가를 결정하는 것이라고 말할 수 있겠죠.
이 예제의 목표는 두번째 서브메뉴 블록을 좌측으로 배치시키는 2단 컬럼 레이아웃을 만드는 것입니다.
소스코드는 이렇습니다.
* 소스코드를 보기 편하게 하기 위해서 이 페이지의 좌우 넓이를 충분히 넓혀주시면 좋습니다.
* CSS코드의 {}안에서 공백은 무시하시면 됩니다. 보기 좋게 하기위해서 많이 띄웠을 뿐입니다.
* 단계별로 추가 및 수정된 부분에는 색깔을 넣어서 보시기 편하게 하겠습니다.
- <!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> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xhtml</title> - </head>
- <body>
- <div id="bodyWrap">
- <div id="header">[로고] 홈 | 회사소개 | 제품소개 | 짬뽕정보</div>
- <div id="columnLeft">
- 소개<br />인사말<br />연혁<br />오시는길
- </div>
- <div id="content">
- 안 녕하십니까?<br />짬뽕주식회사입니다.<br />짬뽕주식회사는 최고의 짬뽕을 만들기 위해 50년간 한우물을 파다가 기름이 나와서 기름장사를 하려다가 기름이 하루만에 바닦나서 포기하고 어제부터 다시 짬뽕을 만들기 시작한 굴지의 중화요리 전문 기업입니다.
- </div>
- <div id="footer">저작권은 (주)짬뽕에 있는거 같아요.</div>
- </div>
- </body>
- </html>
대충 살펴보면, 빨간색으로 표시된 4개의 블록 엘리먼트가 있고 그 4개의 블록을 bodyWrap 이라는 블록이 감싸고 있습니다.
bodyWrap 블록이 하는 역할은 나중에 설명하도록 하겠습니다.
지금부터는 문서의 구조(body부분)는 손을 댈 필요가 없습니다.
표현을 담당하는 CSS만 수정하면 원하는 레이아웃으로 바꿀 수 있는 것입니다.
우선 브라우저로 확인해보죠.
아무런 스타일을 적용하지 않았기 때문에 블록단위를 눈으로 파악하기 힘들군요. 원활한 진행을 위해서 블록에 배경색을 넣어서 구분하기 쉽게 만들도록 하겠습니다.
HTML 문서의 <head> 와 </head> 사이에 아래와 같은 코드를 입력합니다.
- <style type="text/css">
<!--
#header { background: #CCCCEE; }
#columnLeft { background: #CCEECC; }
#content { background: #EECCCC; }
#footer { background: #CCCCEE; }
-->
</style>
* XE에서 스킨을 만드실 때는 스타일시트(CSS)를 HTML 파일에 직접 입력하지 않지만 편의상 직접입력하겠습니다.
소스코드를 보시면 CSS가 "#id이름 { 속성 }"과 같은 형식으로 특정블록을 지정할 수 있다는 것을 알 수 있습니다. 이 형식에서 앞에 붙어있는 "#id이름" 부분을 선택자(selector) 라고 부릅니다. 선택자에 관한 문법은 링크를 참조하세요.
자 이제 블록의 구조를 알아보기가 쉬워졌습니다.
내용과 브라우저 사이에 하얀 공백이 있는 것은 문서의 내용상 최상위 블록인 <body>블록이 가지는 margin 값 때문입니다.
CSS에 " body { margin: 0; } " 라는 코드를 한줄 추가해주면 없앨 수 있지만 그냥 가도록 하겠습니다.
자 이제 본격적으로 시작됩니다.
그림에서 보시는 바와같이 블록은 가로 크기가 100%를 기본으로 합니다. 그래서 브라우저의 좌,우 방향으로 꽉 차는 영역을 차지하게 됩니다. 이것은 역시 기본값이 가로100%인 <body>태그로 부터 상속받은 크기를 기준으로 100% 인 것입니다.
우리가 만드려는 사이트의 가로크기를 편의상 320px (픽셀)의 작은 크기로 정하겠습니다. 내용이 들어가있는 4개의 블록을 모두 감싸고있는 bodyWrap 블록에 가로크기 속성을 정해주도록 하겠습니다.
- #bodyWrap { width: 320px; }
- #header { background: #CCCCEE; }
- #columnLeft { background: #CCEECC; }
#content { background: #EECCCC; }
#footer { background: #CCCCEE; }
위와 같이 한줄을 추가해주면 이렇게 됩니다.
모든 내용의 가로크기가 320px 안에 들어갔습니다. 4개의 블록에는 width 값을 정해주지 않아도 상위블록인 bodyWrap 블록의 width 값을 상속받아 최대치가 320px이 된 것입니다. 최대치가 320px 로 정해졌다고 해서 이 영역을 절대 벗어나지 못하는 것은 아닙니다. 그렇지만 이번단원에서 그런 자세한 속성은 다루지 않겠습니다.
여기서 우리는 블록의 좌우정렬 기본값은 좌측정렬 이라는 것을 알 수 있습니다.
홈페이지를 브라우저의 가운데에 위치하도록 조절해 봅시다.
- #bodyWrap { width: 320px; margin: 0 auto 0 auto; }
- #header { background: #CCCCEE; }
- #columnLeft { background: #CCEECC; }
#content { background: #EECCCC; }
#footer { background: #CCCCEE; }
margin 속성에 4개의 값이 들어가있습니다. 이것은 순서대로 Top(상), Right(우), Bottom(하), Left(좌)를 의미합니다. 순서는 위쪽방향을 기준으로 시계방향입니다. 이것을 풀어서 비교해보면 이렇게 됩니다.
- #bodyWrap { width: 320px; margin: 0 auto 0 auto; }
- #bodyWrap { width: 320px; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; }
위 두 줄의 CSS 코드는 같은 의미입니다. 앞으로 짧은 약식표기를 사용하도록 하겠습니다.
그 의미는 좌,우의 바깥여백을 자동으로 맞추도록 한것입니다. 양쪽 다 자동(auto)이니까 같은 비율의 여백을 갖게 되는 것입니다.
결과를 볼까요?
이제는 columnLeft 블록의 가로크기를 80px 로 줄이겠습니다.
- #bodyWrap { width: 320px; margin: 0 auto 0 auto; }
- #header { background: #CCCCEE; }
- #columnLeft { width: 80px; background: #CCEECC; }
#content { background: #EECCCC; }
#footer { background: #CCCCEE; }
columnLeft 블록은 이제는 bodyWrap으로 부터 상속받은 width 속성을 무시하고 자신만의 width 속성을 가졌습니다.
서브메뉴를 원하는 크기로 줄였지만 4개의 블록은 여전히 위에서 아래로 순서대로 늘어놓여있습니다. 블록 엘리먼트의 정렬 기본속성이 수직나열입니다. 우리가 해야할 것은 이 수직나열을 수평나열로 바꾸어 주는 것입니다. 마치 인라인 엘리먼트처럼 수평으로 싸여나가도록 만들어 줌으로서 columnLeft 블록과 content 블록 간의 위치를 조절할 것입니다.
- #bodyWrap { width: 320px; margin: 0 auto 0 auto; }
- #header { background: #CCCCEE; }
- #columnLeft { float: left; width: 80px; background: #CCEECC; }
#content { background: #EECCCC; }
#footer { background: #CCCCEE; }
columnLeft 블록이 좌측으로 유동(float) 되면서 수직정렬에서 벗어났습니다.
columnLeft 블록이 content 블록 위에 떠있다고 보시는게 이해하시기 편할 것입니다.
content 블록은 여전히 가로 320px의 너비를 가지고 수직정렬 되고 있지만 그 내용은 columnLeft 블록을 피해서 흘러갑니다.
여기서 한가지 실험을 해보고 넘어가겠습니다.
columnLeft 블록의 내용이 많아서 세로길이가 길어지면 어떻게 되는지 봅시다.
- #columnLeft { float: left; width: 80px; height: 180px; background: #CCEECC; }
columnLeft 블록이 content 블록뿐 아니라 footer 블록까지도 영향을 미치는 군요.
이것은 float 되는 블록이 자기자신 이후에 오는 정상흐름(수직정렬)중인 모든 블록에 영향을 준다는 뜻이됩니다.
이런 현상을 방지하기 위해서 footer 블록의 CSS를 다음과 같이 고치도록 하겠습니다.
- #footer { clear: both; background: #CCCCEE; }
clear 속성은 해당 블록이 유동(float)블록을 허용할 것인지 결정해주는 속성입니다. 들어 갈 수있는 값은 none(기본값), right, left, both, inherit(상속받은값) 입니다. both를 값으로 주었기 때문에 footer 블록은 좌우모든 방향에서 자신위에 다른 블록이 떠있는 것을 허용하지 않습니다.
columnLeft 블록의 세로길이를 원래대로 돌려놓겠습니다.
다음으로 할 것은 content 블록 이 columnLeft 블록과 겹치지 않도록 만들어 주는 것입니다.
방법은 두가지 이상 존재합니다.
- content 블록도 columnLeft 블록처럼 float (좌측) 시키고 너비를 240px (320px-80px) 로 정해준다.
#content { float: left; width: 240px; background:#EECCCC; } - content 블록도 columnLeft 블록처럼 float (우측) 시키고 너비를 240px (320px-80px) 로 정해준다.
#content { float: right; width: 240px; background:#EECCCC; } - content 블록에 왼쪽 margin 속성을 주어서 80px 만큼 떨어지게 만든다.
이런 여러가지 방법중에 서 어느것을 선택할 지는 여러가지 브라우저의 특성에 따라 다르게 보이는 경우가 없는지 실험해가면서 제대로 보이는 쪽을 선택하면 됩니다. 테스트 해보니 2번째 방법은 IE에서 약간 다르게 보이는군요.
3번째 방법으로 진행하겠습니다.
- #bodyWrap { width: 320px; margin: 0 auto 0 auto; }
- #header { background: #CCCCEE; }
- #columnLeft { float: left; width: 80px; background: #CCEECC; }
#content { margin: 0 0 0 80px; background: #EECCCC; }
#footer { clear: both; background: #CCCCEE; }
자~ '중간정렬 2단(컬럼) 레이아웃'이 완성되었습니다.
한가지만 더 손을 볼까요?
columnLeft 블록 아래쪽에 보이는 하얀색 영역은 <body>태그의 기본색을 보여주고 있습니다. 좀 어색하군요. 이 영역은 content 블록에 속해있습니다. 정확하게 말하면 content 블록의 margin 영역이죠. 그리고 투명하기 때문에 <body>의 색깔이 보이고 있습니다.
이 곳에 columnLeft 블록과 같은색이 들어가있으면 좋겠습니다.
그런데 margin 영역은 색상속성을 가질 수 없기 때문에 모든 내용블록을 둘러 싸고있는 bodyWrap 블록에 배경색을 넣어주면 되겠습니다.
- #bodyWrap { width: 320px; margin: 0 auto 0 auto; background: #CCEECC; }
- #header { background: #CCCCEE; }
- #columnLeft { float: left; width: 80px; background: #CCEECC; }
#content { margin: 0 0 0 80px; background: #EECCCC; }
#footer { clear: both; background: #CCCCEE; }
음... 근데 또 고민이 생겼습니다.
좌측단보다 우측단이 내용이 적어서 세로길이가 짧아지면 content 블록 아래쪽에 #CCEECC이런 색상이 보이게 되겠군요. 해결책은 배경색이 아니라 배경이미지를 사용하는 것입니다. 좌측 80px은 #CCEECC색을가지고 우측 240px은 #EECCCC색을 가지는 높이 1px짜리 이미지를 배경으로 만들어 background:url(./bg.gif) repeat-y left top; 이렇게 넣어 주는 것이 더 좋겠습니다.
추가로 '3단(컬럼) 레이아웃' 을 만들어 볼까요?
아래 코드를 눈으로 한번 분석해보시기 바랍니다.
- <!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>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>xhtml</title>
- <style type="text/css">
- <!--
#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; }
--> - </style>
- </head>
<body>
<div id="bodyWrap"> - <div id="header">[로고] 홈 | 회사소개 | 제품소개 | 짬뽕정보</div>
- <div id="columnLeft">
- 소개<br />인사말<br />연혁<br />오시는길
- </div>
- <div id="columnRight">
- 추천제품 :<br />고추짬뽕<br />삼선짬뽕<br />해물짬뽕
- </div>
- <div id="content">
- 안 녕하십니까?<br />짬뽕주식회사입니다.<br />짬뽕주식회사는 최고의 짬뽕을 만들기 위해 50년간 한우물을 파다가 기름이 나와서 기름장사를 하려다가 기름이 하루만에 바닦나서 포기하고 어제부터 다시 짬뽕을 만들기 시작한 굴지의 중화요리 전문 기업입니다.
- </div>
- <div id="footer">저작권은 (주)짬뽕에 있는거 같아요.</div>
- </div>
- </body>
- </html>
이 단원을 통해 설명한 방법이 전부는 아니지만 DIV 블록 엘리먼트를 통한 레이아웃을 잡는 방법에 관하여 이해하시는데 도움이 되셨길 바라면서 마치겠습니다.
XE 공식사이트 레이아웃 분석#
이제는 XE에 기본적으로 포함되어 있는 "XE 공식사이트 레이아웃 ver 0.1" 의 구조를 한번 살펴봅니다.
- <div id="bodyWrap">
<div id="header">
~상단 내용~
</div>
<div id="contentBody">
<div id="columnLeft">
~좌측 내용~
</div>
<div id="columnRight">
~콘텐츠 영역~
</div>
</div>
<div id="footer">
~하단 내용~
</div>
</div>
앞의 단원들을 이해하셨 다면 이정도 문서는 구조가 한눈에 쏙~ 들어오시겠죠?
웬만한 사이트는 척보면 구조가 훤히 보이시나요? 매트릭스는 어디에나 존제합니다. 빨간약을... 쿨럭~. (-.-;;)
(이 단원은 작성중입니다.)
XHTML 유효성 검사도구#
XHTML 유효성이란 작성된 문서가 XHTML 문법에 적합한가에 관한 판단입니다.
아래 사이트들은 여러분이 작성한 문서가 얼마나 규격에 맞게 만들어졌는지 판단하는데 도움을 줄 것입니다.
XHTML 유효성 검사 도구 : http://validator.w3.org/
KLDP의 한글화된 CSS 유효성 검사 서비스 : http://css-validator.kldp.org/
에러가 하나도 없는 완벽한 XHTML 문서작성에 도전해 보세요. !!! 아자 !!!
(이 단원은 작성중입니다.)
기타 :
브라우저의 쿼크모드 (Quirks Mode : 변덕모드)
모든 브라우저는 웹표준을 준수하지 않는 페이지를 해석할 때에도 나름대로의 방법으로 가능한 제대로 보여주기 위해서 최선을 다하는데 이것을 쿼크모드 라고 합니다. 여기에서 "나름대로의 방식"이 브라우저마다 다르기 때문에 브라우저 마다 다르게 보이는 것입니다.
http://naradesign.net/wp/2007/03/27/118/
http://www.quirksmode.org/css/quirksmode.html
CSS(Cascading Style Sheets)
**수정중/제작중
애드온 개발
XpressEngine에서 애드온은 후킹, 즉 정상적인 동작을 가로채는 동작을 합니다.
php와 같은 인터프리터 언어에서 가능한 include를 이용하여 동작을 하는 구조입니다.
function이나 class로 애드온을 개발하지 않은 이유는 XE의 정상적인 Context에 native code처럼 끼어들 수 있게 하기 위한 것이였습니다.
이 덕분에 XE의 애드온은 호출 되는 시점에서 native code 처럼 강력하게 동작할 수 있습니다.
다만 매우 신중히 제작해야 전체 동작에 무리를 주지 않게 됩니다.
애드온의 호출 시점
애드온 호출 시점은 다음 4군데입니다.
-
before_module_init
- 모듈 객체 생성 이전 : 사용자의 요청으로 필요한 모듈을 찾은후 모듈의 객체를 생성하기 이전을 의미합니다.
-
before_module_proc
- 모듈 실행 이전 : 모듈의 객체를 실행하고 모듈의 실행을 하기 이전을 의미합니다.
-
after_module_proc
- 모듈의 동작 이후 : 생성된 모듈 객체를 실행하고 결과를 얻은 바로 후를 의미합니다.
-
before_display_content
- 결과 출력 이전 : 모듈의 결과물과 레이아웃의 적용을 끝내고 출력하기 바로 이전을 의미합니다.
애드온 호출시 전달 변수
호출 시점이 4군데마다 전달되는 변수가 각각 다른 것들이 있고 공통적인 것이 있습니다.
전달 변수는 다음과 같습니다.
-
공통 전달 변수
- $called_position
어느 시점에서 호출되는지에 대한 정보가 있습니다.
before_module_init, before_module_proc, after_module_proc, before_display_content 4개의 값중 하나를 가지게 됩니다. - $addon_path
호출된 애드온의 경로를 담고 있습니다. - $addon_info
XE의 애드온들은 각각 독자적인 설정과 애드온이 동작하기를 원하는 대상 모듈을 지정할 수 있습니다.
이 정보들이 $addon_info 변수를 통해서 전달됩니다.
- $called_position
-
$called_position = before_module_init
before_module_init 호출은 ModuleHandler::__construct() 에서 호출이 됩니다.
ModuleHandler Class의 native code와 같이 동작하게 되고 이 시점에서는 아래와 같은 변수가 등록이 됩니다.
다만 아래 값들은 Context::get() 을 통해 request argument의 변수들을 설정한 것일 뿐 검증된 것은 아닙니다.
blogAPI라는 애드온은 $this->act == 'blogAPI' 일 경우 동작하는 애드온이며 이와 같이 XE가 동작하기 전의 시점에 무언가를 설정하는 시점으로 이해하시면 됩니다.- $this->module : 요청된 $module 변수값
- $this->mid : 요청된 $mid 변수값
- $this->act : 요청된 $act 값
- $this->document_srl : 요청된 문서 고유 번호
- $this->module_srl : 요청된 모듈 고유 번호
- $called_position = before_module_proc
ModuleObject::proc() 즉 요청에 의해 생성된 모듈 객체의 실행 method가 동작하기 전에 호출이 됩니다.
요청되어 생성된 모듈 객체의 모든 변수를 사용할 수 있습니다.
$this 지시자를 통해서 애드온 내에서는 모듈의 일부로서 기능을 수행할 수 있습니다. - $called_position = after_module_proc
ModuleObject::proc() 즉 요청에 의해 생성된 모듈 객체의 실행 method가 실행된 후에 호출이 됩니다.
before_module_proc와 마찬가지로 요청에 의해 생성된 모듈 객체의 모든 변수가 사용 가능합니다.
다만 $output 이라는 변수를 통해서 모듈의 동작 성공 유무를 파악할 수 있습니다. -
$called_position = before_display_content
모든 처리가 끝난 후 결과값을 출력하기 바로 직전인 DisplayHandler::printContent()에서 호출됩니다.
일반적으로 이 시점은 HTML/JSON/XMLRPC 출력 직전이며 출력 직전에 HTML/JSON/XMLRPC 의 변조를 하기 위할때 사용할 수 있습니다.
예를 들어 회원들의 포인트에 따른 레벨 아이콘등을 결과물에 추가할 수 있습니다.- $oModule : 요청되어 생성된 모듈의 객체
- $output : 출력하려는 HTML/JSON/XMLRPC 결과물
이와 같이 XE의 애드온은 요청되는 시점에 따라서 직접 변수를 조작하거나 참조 할 수 있는 기능을 가지고 있습니다.
애드온의 제작 규칙
애드온을 제작하기 위해서는 최소한 아래와 같은 규칙을 지켜야 합니다.
- 위치 : addons/애드온이름
- 애드온 제작자 정보, 설명 그리고 필요에 따라 관리자로부터 애드온의 변수를 입력받기 위한 info.xml
- 애드온 동작 파일 : 애드온이름.addon.php
위의 3가지를 꼭 지켜야 하며 각각에 대해서는 다시 상세히 설명하도록 하겠습니다.
애드온의 디렉토리 구조
addons
-
애드온이름
-
conf
- info.xml
- 애드온이름.addon.php
-
Queries
- queryID.xml
-
addons디렉토리에 다른 이름의 파일들이 있어도 상관없으며 class등을 사용하여도 됩니다.
다만 native code로 동작시키기 위해 include를 하는 구조라 function(함수)의 선언은 안됩니다.
info.xml 제작
info.xml은 다음과 같이 제작할 수 있습니다.
- <?xml version="1.0" encoding="UTF-8"?>
- <addon version="0.2">
-
<title xml:lang="ko">애드온제목</title>
-
<description xml:lang="ko">애드온에 대한 설명</description>
-
<version>애드온의 버전</version>
-
<date>년-월-일</date>
-
<author email_address="제작자 메일 주소" link="제작자 홈페이지 주소">
-
<name xml:lang="ko">제작자 이름</name>
-
</author>
-
<extra_vars>
-
<var name="설정 변수 명(영문)">
-
<title xml:lang="ko">설정 변수 이름(출력용)</title>
-
<description xml:lang="ko">설정 변수에 대한 설명</description>
-
</var>
-
</extra_vars>
- </addon>
extra_vars는 필요하면 생성하고 필요 없으면 <extra_vars /> 와 같이 세부 내역이 없어도 됩니다.
위의 파일을 info.xml 이라는 이름으로 저장하고 conf/info.xml 에 두시면 됩니다.
애드온이름.addon.php 제작
동작하는 애드온 파일은 php로 작성하면 됩니다.
다만 애드온이 호출되는 위치가 대부분 class 객체의 method 내부이기에 함수 선언등은 할 수가 없습니다.
다만 class 를 정의하고 이를 활용하는 것은 가능합니다.
애드온 파일의 시작은 다음과 같이 합니다.
- <?php
-
/**
-
* @file 애드온이름.addon.php
* @author 개발자이름 (개발자 이메일)
* @brief 간단한 소개
**/
if(!defined('__ZBXE__')) exit();
__ZBXE__ 상수는 꼭 확인하여 XE를 통한 호출이 아닌 외부 요청에 의한 실행이 되지 않도록 하셔야 합니다.
애드온은 called_position에 따라서 동작을 제어할 수 있고 이 제어는 애드온에서 직접 처리를 하여야 합니다.
XE가 모듈을 찾기 전 최상단 시점에서만 동작하는 애드온을 작성하려면 $called_position = before_module_init 에서 실행하면 됩니다.
따라서 위의 코드 아래에 다음과 같은 코드를 넣으시면 됩니다.
-
if($called_position != 'before_module_init') return;
위와 같이 $called_position 값이 before_module_init이 아닐 경우 return 문을 통해서 그 아래의 코드가 실행되지 않도록 합니다.
native code처럼 동작하기에 return 이 아닌 다른 exit() 등의 함수가 사용되면 의도하지 않은 동작을 할 수 있으니 주의하셔야 합니다.
위의 코드까지가 XE Addon 제작을 위한 준비 단계입니다.
이후 코드는 원하는 것을 동작 시키기 위한 코드를 직접 활용하시면 됩니다.
XE XML Query의 사용
XE Addon에서도 XML Query를 이용하여 다른 모듈드에서 제작된 DB 정보를 활용할 수 있습니다.
이 경우 애드온 디렉토리에 queries 라는 하위 디렉토리를 만들고 xml query문이 정의된 xml 파일을 저장하면 됩니다.
이 경우 다음과 같은 코드로 쿼리를 실행할 수 있습니다.
- $output = executeQuery('addon.애드온이름.xml', $전달변수)
애드온 제작시 주의 사항
XE의 Addon은 매우 강력한 동작을 수행할 수 있습니다.
다만 상황에 맞게 코드를 잘 작성하지 않을 경우 의도하지 않는 결과 혹은 XE의 동작이 멈출 수가 있습니다.
기본으로 포함된 Addon들을 참고하시기를 권합니다.
북마크 모듈 만들어 보기 (예제)
북마크 모듈을 만들어 보는 것을 예제로 하여 모듈 제작을 위한 일반적인 상황에 대해서 소개드립니다.
예제 다운 받기 : bookmark.tar
북마크 기능을 위한 DB Schema 작성
북마크 모듈의 경우 게시판 모듈등고 다르게 북마크 기능을 위한 별도의 DB 테이블을 이용하도록 합니다.
먼저 원하는 DB Schema를 작성해 봅니다.
| column | type | index |
|---|---|---|
| bookmark_srl | int(11) | primary key |
| link | varchar(255) | |
| title | varchar(255) | |
| description | longtext |
단순히 제목, 링크, 설명만 이용할 것이라 위와 같은 schema로 table을 작성합니다.
모듈을 만들기 위한 기본 뼈대 만들기
북마크 모듈의 경우 스킨이나 관리 기능이 없이 매우 간단하게 만들것이라 다음과 같은 파일들이 필요합니다.
modules
-
bookmark
-
conf
- info.xml : 모듈의 정보
- module.xml : 모듈의 Action 명세
-
queries
- getBookmarkList.xml : bookmark table에서 북마크 정보를 가져오는 XML Query
- insertBookmark.xml : bookmark table에 북마크 정보를 입력하는 XML Query
-
schemas
- bookmark.xml : bookmark table schema가 선언된 XML Query
-
tpl
-
filter
- insert_bookmark.xml : 북마크를 등록하기 전에 실행되는 JS Filter
-
js
- bookmark.js : 북마크가 등록후 사용될 callback_func 정의 javascript 파일
-
- bookmark.controller.php : 북마크의 등록 Action이 구현된 파일
- bookmark.class.php : 북마크의 상위 클래스
- bookmark.view.php : 북마크 목록을 보고 입력폼을 보여줄 파일
-
모듈의 정보 출력 - conf/info.xml
위와 같이 conf/info.xml 파일을 생성하면 모듈의 정보를 관리자는 쉽게 파악할 수 있습니다.
모듈의 Action 명세 - conf/module.xml
위의 그림에서 dispBookmarkList 라는 Action을 정의해 놓았습니다.
이 dispBookmarkList Action은 view type 이고 모듈 호출시 index로 동작하고 모듈의 mid 가 없어도 동작할 수 있는 특징을 가지도록 선언되어 있습니다.
bookmark 테이블 schema의 XE XML Query로 작성
위에서 작성한 테이블 schema는 아래와 같이 XML Query문으로 작성할 수 있습니다.
위 XML 파일을 ./modules/bookmark/schemas/테이블이름.xml 파일로 저장하면 XE의 설치시 혹은 XE 모듈 관리 페이지에서 이 XML 을 지정된 DBMS의 table 로 생성하여 줍니다.
mysql에서는 위와 같은 XML Query가 아래와 같이 생성이 됩니다.
북마크 목록을 가져오는 Query 작성
위에서 생성한 테이블에서 select query를 수행하는 XE의 XML Query입니다.
특히 navigation이라는 지시어를 통해서 페이징을 쉽게 수행할 수 있게 되어 있습니다.
북마크 정보를 bookmark 테이블이 입력하는 Query 작성
위의 XML Query는 bookmark테이블에 제목, 링크, 설명을 입력하는 쿼리문을 작성하는 XML Query입니다.
물론 북마크의 고유 번호인 bookmark_srl도 입력을 합니다.
참고로 XE에서는 getNextSequence()를 통해서 절대 고유한 sequence값을 이용하고 이 값을 모든 정보의 고유 번호로 사용하여 서로 다른 모듈일지라도 겹치지 않도록 하고 있습니다.
bookmark.class.php 제작
bookmark 모듈의 최상위 클래스이자 bookmark모듈의 설치나 차후 업그레이드가 있을 경우 업그레이드 기능등이 있는 bookmark.class.php파일을 제이 먼저 제작해야 합니다.
예제로 만드는 북마크 모듈은 설치/ 업데이트/ 캐시파일 청소/ 권한 설정등의 아무런 동작이 없습니다.
다만 checkUpdate() 의 경우 모듈 관리시 무조건 호출하는 method이기에 선언만 해 놓은 상황입니다.
bookmark.view.php 제작 테스트
북마크 모록을 보여주고 입력폼도 보여주는 view class를 제작합니다.
아직은 테스트를 위해 간단히 bookmark_list.html 이라는 템플릿 파일만 지정하는 코드만 만들어 봅니다.
bookmarkView::dispBookmarkList()라는 method는 ./conf/module.xml에 Action으로 정의 되어 있어야 합니다.
Action 이름과 동일한 method가 실행이 됩니다.
./tpl/bookmark_list.html 제작
bookmark view class의 dispBookmarkList()에서 지정한 bookmark_list 파일을 생성합니다.
- <p>hello world!</p>
./tpl/bookmark_list.html 파일에 간단히 위의 내용만 입력하여 호출을 해보았습니다.
(위의 seungyeop.kr 도메인은 이 문서를 제작한 XE 프로젝트 매니저중 한분인 한승엽님의 개인 사이트입니다)
hello world! 라는 문구가 브라우저에서 나타나면 제대로 제작하고 있는 것입니다.
bookmark.view.php에 DB Query를 추가하여 실제 동작 코드 완성
위에서 제작한 getBookmarkList.xml 이라는 XML Query를 이용하여 결과를 구해 Context::set() 하는 코드가 포함되어 있습니다.
./tpl/bookmark_list.html의 북마크 목록 완성
일단 모듈 개발 예제이기 때문에 다국어 기능을 사용하지 않았습니다.
./tpl/bookmark_list.html의 북마크 등록 폼 추가
등록을 위한 XE의 XML Js Filter와 Callback Function이 정의된 js 파일을 import 하는 템플릿 문법을 사용합니다.
간단히 table 안에 form문을 추가하였습니다.
insert_bookmark.xml 필터 제작
XE에서 XML JS Filter는 폼(form)을 검수하고 form내에서 필요한 변수들을 이용하여 AJAX 통신을 통해 controller를 호출하는 용도로 쓰입니다.
간편하게 폼 검수 및 AJAX 연동이 되는 편리한 기능입니다.
북마크 등록후 호출된 Javascript Callback Function 제작
보통 XML Js Filter를 이용해 AJAX로 서버 요청을 하게 되면 결과의 처리는 Javascript function으로 마무리를 합니다.
insert_bookmark.xml 필터에서 callback_func으로 정의된 javascript 함수를 XE는 호출을 하기에 이 함수를 선언해 놓습니다.
서버에서 전송한 메세지를 출력하고 페이지 리로드 하는 기능입니다.
bookmark.controller.php에서 북마크 등록
이제 form과 XML JS Filter를 통해 bookmark테이블에 데이터를 입력하는 controller class를 구현할 차례입니다.
위에서 정의한 insertBookmark.xml 이라는 XML Query로 쉽게 입력할 수 있습니다.
예제 마무리
북마크 모듈을 예제로 만들어 보았는데 사실 설명을 많이 달지 못했습니다.
첨부된 bookmark.tar을 다운받으시고 하나 하나 위의 설명과 비교하시면서 XE의 모듈 제작에 대한 감을 잡기를 바랍니다.
이 예제는 XE 오픈 소스 프로젝트의 매니저중 1인인 한승엽님(haneul03)님께서 2008년 7월 28일 XE 1차 모임때 발표하셨던 자료를 옮긴 것입니다.
- 발표 내용 동영상 보기 : http://www.zeroboard.com/17103027
모듈개발
모듈은 XpressEngine의 기본이 되는 프로그램입니다.
XE를 설치하여 바로 자동 생성되는 게시판이나 플래닛등 서비스 되는 것 뿐 아니라 레이아웃, 애드온, 위젯등등이 모두 모듈로 제작되어 있습니다.
또한, RSS나, 댓글, 문서등의 관리도 모듈이라는 단위로 동작하고 있습니다.
일반적으로 XpressEngine의 게시판 모듈의 확장 변수등을 이용하고 게시판 스킨을 잘 만들면 따로 스킨을 만들지 않아도 되겠지만 게시판으로서 할 수 없는 기능(추가 Database가 필요하다던가)을 지원하고 싶으시면 결국 모듈을 만들어야 합니다.
모듈의 위치
모듈들은 ./modules directory아래에 모여있습니다.
board, file, point, admin등 XE를 사용하시면서 만난 기능들이 보이실 것입니다.
모듈의 구성 요소
XE의 가장 기본이 되는 모듈중 하나인 document 모듈의 디렉토리 안에는 다음과 같은 것들이 있습니다.
모듈의 구성 요소는 다음과 같습니다.
-
modules
모듈들이 모여 있는 위치-
모듈이름
board, document등 ./modules/모듈이름/ 의 위치에 모듈은 존재합니다.-
conf
모듈의 안내와 설정을 위한 XML 문서가 있습니다.- info.xml
모듈의 소개와 제작자등의 정보가 있습니다. - module.xml
모듈의 Action 명세서, 권한 명세서등 모듈의 동작과 관련된 정보가 있습니다.
- info.xml
- lang
언어파일들을 저장하고 있습니다. - queries
XE의 XML Query를 실행하기 위한 파일들이 있습니다. - schemas
모듈에서 DB 테이블이 필요할 경우에 자동 생성되는 DB 테이블 schema에 대한 XML 파일이 있습니다. - tpl
보통 관리자 UI와 관련되었거나 스킨 독립적인 UI 요소들이 있습니다. -
skins
게시판과 같이 서비스용 스킨이 따로 존재할 경우 이 디렉토리에 스킨들이 위치하게 됩니다.-
스킨이름
- skin.xml
스킨의 제작자 정보 및 스킨 별 설정 변수에 대한 정보가 있습니다.
- skin.xml
-
- 모듈이름.class.php
모듈의 최상위 클래스이며 모듈의 설치/ 업데이트/ 캐시파일 삭제/ 특정 Action의 권한제어등 모듈의 대표적인 기능을 수행하는 클래스 파일입니다. - 모듈이름.view.php
서비스를 위한 View Action이 구현되어 있는 파일입니다. - 모듈이름.controller.php
서비스를 위한 Controller Action이 구현되어 있는 파일입니다.
XE에서는 일반적으로 Javascript AJAX등을 이용하여 이 controller를 직접 호출하고 있습니다. - 모듈이름.model.php
모듈의 model 과 관련된 것들이 구현되어 있습니다.
일반적으로 XE에서 model은 view나 controller에서 사용하기 위한 method로서 존재하지만 UI(Javascript, Flash)등에서 직접 데이터를 요청하는 Action이 존재할 수도 있습니다. - 모듈이름.admin.view.php
파일이름에 admin이 있을 경우 Admin이 포함된 Action이 요청되면 자동으로 불려지게 됩니다.
관리자 기능을 위한 View Action이 구현되어 있습니다. - 모듈이름.admin.controller.php
보통 관리자 기능을 위한 Controller Action이 구현되어 있습니다. - 모듈이름.admin.model.php
일반적으로 model의 경우 굳이 admin model class를 만들지 않아도 되지만 효율성이나 일반적으로 요청되면 안되는 Model Action들이 구현되어 있습니다. - 모듈이름.api.php
controller, model의 경우는 XE에서는 AJAX나 Flash를 통한 XMLRPC 혹은 JSON 방식으로 요청을 받고 결과를 출력하지만 view class의 경우 기본적으로 HTML로 출력하게 되어 있습니다.
하지만 XMLRPC/ JSON 으로 view class를 요청받았을 경우 api.php 에 해당 Action이 정의되어 있으면 결과물이 HTML 이 아닌 api.php 에서 정리한 결과를 XMLRPC나 JSON 으로 출력하도록 할 수 있습니다.
(./modules/planet/planet.api.php 참고)
-
-
게시글 및 댓글 조작을 위한 팁
XpressEngine 기본 패키지에 포함된 애드온 중에는 게시글이나 댓글의 상/ 하단에 원하는 코드를 추가하거나 내용을 변조하는 코드가 있습니다.
이런 류의 애드온을 제작하는 방법을 알려드립니다.
게시글/ 댓글의 출력 rule 소개
XpressEngine의 게시글과 댓글은 특별한 설정이 없는한 다음과 같은 형태로 출력이 됩니다.
- 게시글
- <!--BeforeDocument(문서 고유 번호, 작성회원 고유 번호)-->
<div class="document_문서고유번호_작성회원고유번호 xe_content">
게시글 본문
</div>
<!--AfterDocument(문서 고유 번호, 작성회원 고유 번호)-->
- 댓글
- <!--BeforeComment(댓글 고유 번호, 작성회원 고유 번호)-->
<div class="comment_댓글고유번호_작성회원고유번호 xe_content">
게시글 본문
</div>
<!--AfterComment(댓글 고유 번호, 작성회원 고유 번호)-->
위와 같이 주석 그리고 div 로 감싸고 게시글이나 댓글의 고유 번호, 작성 회원의 고유 번호로 본문을 감싸서 출력을 하게 됩니다.
이 규칙을 이용하여 원하는 정보를 추가/ 수정/ 삭제할 수 있습니다.
게시글 내용의 상/하단에 원하는 코드를 입력하는 방법
약속된 div 태그의 위치를 정규표현식으로 구하고 추가할 수 있습니다.
이 경우 $called_position = "after_module_proc" 여야 합니다.
아래 예제는 게시글의 상단마다 원하는 결과를 추가하는 애드온의 코드입니다.
- <?php
-
if(!defined('__ZBXE__')) exit();
-
// 출력결과가 HTML 이 아니라면 동작하지 않도록 합니다.
-
if(Context::getResponseMethod()!=='HTML') return;
-
// called_position을 확인하는 코드를 작성합니다.
if($called_position !== 'before_display_content') return; -
// 정규표현식으로 $output 이라는 출력결과물중 원하는 게시글의 상단을 찾아 바꿈
$output = preg_replace('/<div class="document_([0-9]+)_([0-9]+) xe_content">/is', '<div class="document_$1_$2 xe_content">내용의 상단', $output); - ?>
위의 애드온은 모든 게시글의 상단에 "내용의 상단" 이라는 문자열을 출력하도록 합니다.
preg_replace_callback등을 이용해서 직접 DB 또는 여타 openAPI와 연동하여 다양한 결과를 추출하여 사용할 수 있습니다.
게시글 내용을 참조하여 변조하는 방법
위의 예제는 게시글이나 댓글의 상/ 하단에 특정 코드를 추가하는 예제입니다.
내용을 변조하기 위해서는 위와 같은 방법으로는 불가능합니다.
정규표현식으로 원하는 구간을 정확히 찾기가 어렵기 때문에 이럴 경우 Javascript를 이용해 DOM으로 접근하도록 하는 방법을 사용할 수 있습니다.
애드온 파일의 내용은 다음과 같습니다.
- <?php
if(!defined("__ZBXE__")) exit();
if($called_position == 'after_module_proc' && Context::getResponseMethod()=="HTML") {
Context::addJsFile('./addons/애드온이름/test.js');
}
?>
위의 코드는 모듈이 동작하기 전에 특정 자바스크립트 파일을 출력물의 header 부분에 호출하도록 선언하는 코드입니다.
애드온의 내용은 위의 내용이 전부이고 실제 동작은 test.js 라는 javascript에서 하게 됩니다.
- test.js의 동작은 다음과 같습니다.
- function alertDocumentContent() {
-
var objs = xGetElementByClassName('xe_content');
-
if(objs.length<1) return;
-
for(var i=0;i<objs.length;i++) {
-
alert(xInnerHTML(objs[i]);
-
}
- }
- xAddEventListener(window, 'load', alertDocumentContent );
위의 코드는 결과물이 출력된 후에 게시글이나 댓글등의 내용을 찾아서 alert() 시키는 함수입니다.
위와 같은 방법으로 게시글이나 댓글등의 내용을 제어하거나 수정할 수 있습니다.
에디터 컴포넌트 개발
* 작성중입니다
위젯 개발
* 작성중입니다
