2.3 웹 레이아웃

2009-07-09 17:01:07

2.3 웹 레이아웃

1) SSI 기법과 Shell 레이아웃

2) 쉘문서 종류 및 적용방법

3) 쉘문서의 작동과 로케이션

4) HTML 쉘 작동 예

웹서비스가 비대해짐에 따라 HTML 웹문서 관리에 대한 불편이 증대될 수 있어 일반적인 웹서버는 SSI(Server Side Include)기법을 제공합니다. 쎄지오는 직접적인 SSI기능의 대안으로 필터링스크립트에 의한 HTML문서의 조합을 지원하고 있습니다.

1) SSI 기법과 Shell 레이아웃

맨위로

가. SSI 기법

SSI 기법은 반복적으로 사용되는 HTML문서를 서버에 분리하여 관리하고 필요에 따라 서버에서 조립하여 웹브라우저로 전송하는 방법입니다. 다음 그림은 SSI기법에 의해 구성된 웹화면의 모식도입니다.

탑메뉴와 하위메뉴부분을 별도의 웹문서로 분기하여 관리하며 웹서버가 필요에 따라 html을 조합하여 전송하게 됩니다. SSI의 문법은 쎄지오에서 제공되지 않지만 "$#load...#;구문으로도 동일하게 대체될 수 있습니다.

나. SHELL 레이아웃

쎄지오는 고유의 "쉘레이아웃"을 제공하고 있습니다. 쉘레이아웃은 웹화면을 “알맹이영역”과 “껍데기 영역”으로 구분합니다. 이는 각각 “알맹이 문서”와 “껍데기 문서(혹은 쉘문서)”에 대응합니다. 쉘레이아웃은 이렇게 구분된 두 영역간의 조합방법으로 구현되었습니다. 다음 그림은 쉘레이아웃의 모식도입니다.

웹브라우저가 요청한 문서는 알맹이문서(그림의 1에 해당)입니다. 이 알맹이 문서는 외곽부분을 차지하고 있는 쉘문서(그림의 2에 해당)와 조합되어 웹브라우저에 전송됩니다. “$#load...#;"구문은 일반적인 html문서를 조합하는 방법인데 문법적 차이는 있지만 SSI와 대등합니다. 다음 그림은 “$#load#;"구문이 혼용된 쉘 레이아웃의 모식도입니다.

웹브라우저는 1번의 알맹이 문서를 요구하고 있으며, 알맹이문서는 2번의 쉘문서를 조합하도록 하고, 2번의 쉘문서는 $#load#;구문을 이용하여 3번의 상위메뉴문서를 조합하여 구성된 html문서가 웹브라우저로 전송됩니다.

다. 알맹이 문서

알맹이 문서는 웹브라우저의 요청에 대응하는 html웹문서를 모두 가르킵니다. 일반 html문서 뿐 만 아니라 게시판목록, 게시물 읽기, 게시물 편집하기, 동호회 웹문서, 개인공간 웹문서, php 및 jsp 등의 실행결과에 의한 html문서가 이에 해당합니다. 알맹이 문서는 일반적인 html 문서의 형식을 완벽하게 갖추고 있으며 <body>태그 다음에 "$#shell...#;"구문이 포함되는 특징이 있습니다. 다음은 알맹이 문서의 예입니다.

<html>

<head>

</head>

<body>

$#shell#;

.... 내용 ...

</body>

</html>

알맹이 문서는 반드시 $#shell#; 구문을 포함하고 있어야 합니다.

라. SHELL 문서

쉘문서 웹문서 영역에 "*.shell"형식의 이름으로 저장되어야 하며 문서에 다음과 같은 문서의 분기점이 표시됩니다.

$#[]#; → 쉘 문서는 이표시 부분에 알맹이 문서의 html이 포함됨

쉘문서에 "#$[]#;"구문이 없다면 쉘문서의 마지막을 분기점으로 인식합니다. 쉘문서는 알맹이문서와 결합되지만 알맹이 문서가 html의 완전한 형식을 취하므로 쉘문서는 <body>영역 내부에 표기할 수 있는 html 문으로만 구성됩니다. 다음은 쉘문서의 예입니다.

<tr>

</tr>

<tr><td colspan="2"> # bottom zone </td></tr>

</table>

본 예는 이해를 돕기 위해 <table>방식의 레이아웃을 소개하고 있으나 <div>방식의 레이아웃 구성에도 문제없이 사용될 수 있습니다.

마. SHELL 레이아웃 사례

다음은 알맹이문서(왼쪽)과 HTML 쉘(오른쪽)이 독립적으로 웹브라우저에 표시되는 예입니다.

왼편 그림은 디렉토리 관리서비스로 서버에서 제공되는 CGI의 실행결과입니다. 두 문서는 "$#shell...#;"구문에 의해 다음 그림과 같이 하나의 결과로 조합됩니다.

2) 쉘문서 종류 및 적용방법

맨위로

쉘문서는 적용되는 방법에 따라 기본쉘, 지정쉘, 상속쉘, 호출쉘로 구분됩니다.

가. 기본 쉘

알맹이 문서와 같은 디렉토리에 위치하는 "index.shell"을 기본 쉘이라고 합니다. 알맹이 문서마다 base 디렉토리에 따른 기본 쉘은 다음과 같이 달라질 수 있습니다.

알맹이문서 종류	URI 예	기본쉘	비고
일반 HTML문서 PHP 스크립트 JSP 스크립트	/index.html	/index.shell
	/sub_cont/main.php	/sub_cont/index.shell
	/~toto/in/ddd.html	/~toto/in/index.shell
게시판	/notice.brd	/index.shell
	/~summerb/note.brd	/~summerb/index.shell
	/@game/fr.brd	/@game/index.shell
CGI 바이너리	/cgi-bin/time/schedul	/index.shell

나. 지정 쉘

지정쉘은 가장 일반적으로 사용되는 쉘의 유형으로 다음과 같은 방법으로 알맹이 문서에서 "$#shell,...#;"구문의 변수로서 지정합니다.

$#shell,main.shell#; → "main.shell"

$#shell,main#; → "main/index.shell"

$#shell,../main/#; → "../main/index.shell"

$#shell,/#; → "/index.shell"

디렉토리의 이름을 지정하면 디렉토리의 기본 쉘을 지정 쉘로 사용합니다. 지정 쉘은 알맹이 문서의 URI에 대한 상대 URI 개념으로 호출될 수 있습니다.

알맹이 URL: http://sm.kseek.com/intra/comnunity/board.html

$#shell,ddd.shell#;

$#shell,../ddd.shell#;

$#shell,../../ddd.shell#;

$#shell,~sysop/#;

$#shell,@game/#;

→ html/intra/comunity/ddd.shell

→ html/intra/ddd.shell

→ html/ddd.shell

→ html/~sysop/index.shell

→ html/@game/index.shell

다. 호출 쉘

호출쉘은 웹브라우저의 URL에서 호출하는 쉘로서 다음은 호출 쉘의 예입니다.

다음은 CGI 스크립트와 게시판에서 호출 쉘을 사용하는 예입니다.

http://sm.kseek.com/cgi-bin/test.cgi?shell=/cgi.shell → CGI에서의 쉘지정

http://sm.kseek.com/notice.brd?shell=/main.shell → 게시판에서의 쉘지정

호출쉘은 다음과 같은 방법으로 알맹이 문서에서 지정된 쉘보다 우선합니다.

http://sm.kseek.com/cgi-bin/t.cgi?no=1&shell=none → CGI에서의 쉘지정 취소함

http://sm.kseek.com/notice.brd?shell=none → 게시판에서의 쉘지정 취소함

라. 상속 쉘

쿠키설정방식으로 상속을 결정하여 작동하며, 지정쉘 및 호출쉘을 설정할 때 다음과 같은 방법으로 쉘이름 앞에 등호(=)를 표시하는 방법으로 설정합니다.

$#shell,=/main.shell#; → 필터링 과정에서 상속쉘 설정

1) <a href="/home/dodo.html?shell=/main.shell"> → URL 호출시 상속쉘 설정

2) <a href="/notice.brd?shell==/main.shell"> → URL 호출시 상속쉘 설정

상속 쉘은 동일 브라우저에 집단에 대해서 하나만 적용되므로 웹화면 구성에 혼란이 야기될 수 있으므로 주로 사용되지 않으며, 예외적인 경우에 사용됩니다.

마. 쉘문서 우선순위

쉘문서에는 적용방법과 형태에 따라 다양한 종류가 있습니다. 이들 쉘문서가 중복으로 지정되는 경우 쉘문서는 다음과 같은 우선순위에 따라서 동작하게 됩니다.

1) 호출 쉘, 2)지정 쉘, 3)상속 쉘, 4)기본 쉘, 5)메인 URL의 기본쉘

게시판의 목록, 읽기, 편집필터에서는 $#shell#;구문이 사용될 수 있지만 위치 표시로만 작동됩니다. 호출쉘이 사용되는 경우 지정쉘의 $#shell#; 구문역시 쉘효과가 발생하는 위치를 표시하게 됩니다.

바. 호출 쉘 이어받기

$#l.shell#;구문은 웹문서에 적용된 쉘문서의 URI로 변환됩니다. 현재 페이지에 적용중인 쉘을 호출 쉘로 다시 호출하기 위하여 다음과 같이 게시판 링크를 설치합니다.

위와 같이 호출된 게시판은 글쓰기, 글읽기, 글편집에서 모두 동일한 쉘로 동작합니다. html 문서간의 링크는 게시판에서와 마찬가지로 다음의 예처럼 쉘 이어가기를 설정하여 레이아웃을 구성할 수 있습니다.

→ 현재 작동하고 있는 쉘을 호출쉘로 사용함

→ "/friend/note.html?shell=/findex.shell"

사. 호출 쉘 부가변수

호출 쉘에서 부가적인 변수를 지정하는 방법이 제공됩니다. 부가 변수를 지정하는 방법은 CMS 등의 자동화 솔루션 개발을 위해 도입된 것으로 하나의 쉘문서로 여러 하위메뉴를 구성하기 위해 고안되었습니다. 다음은 쉘문서 부가 변수의 보기입니다.

URL: http://www.segio.com/notice.brd?shell=index.shell:Home1:NoUser

위의 예에서 보여지는 쉘의 지정방식에서는 콜론(:)에 의해 구분되어 추가된 두개의 단어가 있습니다. 두개의 단어는 별다른 영향을 주지는 않으며 "index.shell"구문만으로 쉘문서가 결정됩니다. 위와 같은 쉘 지정방식은 호출쉘 이어받기에서도 연속적으로 수행됩니다.

3) 쉘문서의 작동과 로케이션

맨위로

다음 그림은 "$#shell...#;" 구문에 의해 조립되는 두개 문서의 예입니다. 1번은 알맹이 문서이며 2번은 쉘문서입니다.

이렇게 조합된 html 문서가 웹브라우저에 전송되면 웹브라우저는 HTML문서에 포함된 이미지를 표시하기 위하여 다음과 같은 URL을 구성하여 웹서버에 요청합니다.

image/note.gif → http://sm.kseek.com/game/image/note.gif

headline.gif → http://sm.kseek.com/game/headline.gif

✱ BASE URL: http://sm.kseek.com/game/char.html

"http://sm.kseek.com/note.html"에 대응하는 알맹이 문서도 2번 쉘문서와 조합된다면 웹브라우저는 쉘문서에 포함된 이미지에 대하여 다음의 URL로 구성합니다.

headline.gif → http://sm.kseek.com/headline.gif

✱ BASE URL: http://sm.kseek.com/note.html

쉘문서가 서로 다른 알맹이 문서와 결합하게 될 때 쉘문서에 링크된 이미지는 각각의 알맹이 문서의 상대 URL로 결정되므로 이미지 표시에 문제가 발생될 수 있습니다. 다음은 절대 URL로 이미지를 표시하고 있는 쉘 문서의 예입니다.

그림과 같이 쉘 문서에서 이미지를 절대 URL로 지정하면 어느 알맹이 문서와 조합되더라도 이미지가 정확하게 표시됩니다. 절대경로를 이용한 링크방법은 이미지 표시에는 문제가 없으나 디렉토리 변경 등이 자유롭지 못한 단점이 있습니다.

가. HTML 문서의 위치

웹문서의 상대 URL을 참조하기 위해서는 "$#l#;"과 "$#l.base#;"구문을 활용합니다. 구문은 각각 html 문서의 HomeURL 과 BaseURL로 치환됩니다. 홈URL은 인트라셀("/"), 동호회("/@[동호회ID]/"), 사용자공간("/~[사용자ID]/")등에 따라 다르게 작동합니다. 다음은 이미지 표시방법의 예입니다.

<img src="$#l#;image/note.gif" /> → HTML문서의 홈URL.

<img src="$#l.base#;../image/note.gif" /> → HTML문서의 홈URL.

쉘 문서에서 위와 같은 방법으로 이미지를 링크하면 이미지는 쉘 문서의 위치로부터 상대적인 경로로 계산된 URL에 의한 이미지를 요청합니다.

문서가 조합될 때마다 문서의 위치(로케이션)와 관련된 사용자의 권한이 작동합니다. "$#l...#;"구문을 활용하여 쉘문서를 디자인한다면 동호회, 사용자 홈페이지 등에 카피하여 그대로 사용할 수 있습니다.

4) HTML 쉘 작동 예

맨위로

알맹이 문서, 쉘 문서, 쉘 문서의 부속 HTML 문서에 의한 문서조함의 방법을 다시 살펴보도록 합니다. 다음은 알맹이 문서인 "index.html"의 내용입니다.

<html>

<head><title>Html testing</title></head>

<body>

$#shell,=index.html#;

This is index.html Document

<tr><td> this is test table</td></tr>

</table>

</body>

</html>

다음은 쉴문서 "index.shell"의 내용입니다.

<tr>

<td colspan="2" valign="top" height="40"> this is index.shell </td>

</tr><tr>

</tr>

</table>

쉘문서의 부속 문서인 "menu.html"의 내용입니다.

<div>

this is menu.html

</div>

소개된 3개의 HTML 문서는 조합되어 다음 그림과 같은 결과로 나타납니다.

가. 직접편집기능 (Edit on View)

"$#shell#;, "$#load#; 등의 구문을 이용하여 다수의 HTML파일이 하나의 웹 화면의 구성에 관여하게 되면 관리자에게는 이들 파일을 직접 편집할 수 있는 직접편집기능이 제공됩니다. 그림에서 보는바와 같이 왼편 하단에 반투명의 연필모양으로 보여집니다.

편집한 후 "적용"버튼을 클릭하면 자료가 서버에 전송된 후 편집도구가 사라지고 편집결과로 갱신되어 표시됩니다. 닫기의 선택을 해제한 후 "적용"버튼을 클릭하면 편집윈도우는 없어지지 않고 새롭게 고쳐진 내용으로 갱신되며 연속작업이 가능합니다. 부분적으로 관리권한을 갖는다면 해당 HTML 문서에 대해서만 표시됩니다.

댓글달기

쎄지오 매뉴얼 게시판의 게시물 목록
번호	글제목	작성자	일시	조회
61	10.4 CMS개요	케이시크	09-07-21	149977
60	4.5 환경설정	케이시크	09-07-17	185827
59	6.8 게시판자동생성 [3]	관리자	09-07-14	187131
58	6.7 게시판아이콘	관리자	09-07-14	186858
57	6.6 게시판환경설정	관리자	09-07-14	186296
56	6.5 게시판관리	관리자	09-07-14	170015
55	3.7 환경 설정	관리자	09-07-14	203101
54	3.6 웹메일 필터	관리자	09-07-14	206989
53	8.7 사용자관리	관리자	09-07-13	186168
52	10.3 플래시쇼 관리	sysop	09-07-10	194572
51	10.3 플래시쇼 개요	sysop	09-07-10	192881
50	10.2 메뉴관리	sysop	09-07-10	170948
49	10.1 프론트페이지	sysop	09-07-10	193528
48	9.4 업무용 메신저	sysop	09-07-10	463875
47	9.3 명함관리	sysop	09-07-10	198378
46	9.2 업무진행	sysop	09-07-10	190773
45	9.1 전자결재	sysop	09-07-10	203485
44	9.2 시스템구성	sysop	09-07-10	186991
43	9.1 전자결재개요	sysop	09-07-10	182784
42	8.6 자바환경설정	sysop	09-07-10	191498
41	8.5 웹게시판	sysop	09-07-10	180737
40	8.4 웹쪽지	sysop	09-07-10	187918
39	8.3 웹메신저	sysop	09-07-10	379765
38	8.2 웹메일 서비스	sysop	09-07-10	258829
37	8.1 사용자 웹서비스	sysop	09-07-10	209666
36	7.8 커뮤니티 게시판관리	sysop	09-07-10	205362
35	7.7 커뮤니티 회원관리	sysop	09-07-10	211476
34	7.6 사용자 환경설정	sysop	09-07-10	209802
33	7.5 동호회 연결하기	sysop	09-07-10	713309
32	7.4 신규동호회 개설	sysop	09-07-10	217072
31	7.3 커뮤니티 관리도구	sysop	09-07-10	219450
30	7.2 동호회, 사용자 홈페이지 로그인	sysop	09-07-10	200212
29	7.1 커뮤니티 개요	sysop	09-07-10	193431
28	6.3 게시판 관리와 응용	sysop	09-07-09	207743
27	6.2 게시판 스타일	sysop	09-07-09	199383
26	6.1 게시판 목록/인증필터	sysop	09-07-09	341524
25	6.1 게시판 편집/보기필터	sysop	09-07-09	199325
24	5.4 확장개발-JSP	sysop	09-07-09	198671
23	5.3 확장개발-사용자 관리	sysop	09-07-09	199639
22	5.2 확장개발-PHP	sysop	09-07-09	180133
21	5.1 확장개발-CGI 바이너리	sysop	09-07-09	275302
20	4.4사용기록보기	sysop	09-07-09	186297
19	4.3 사용자관리	sysop	09-07-09	199887
18	4.2 로그인 및 관리도구 [1]	sysop	09-07-09	208802
17	4.1 인트라셀이란	sysop	09-07-09	1243498
16	3.5 스팸메일 설정	sysop	09-07-09	600461
15	3.4 웹메일 사용자 기능	sysop	09-07-09	229882
14	3.3 웹메일 구성	sysop	09-07-09	232728
13	3.2 웹메일 환경설정	sysop	09-07-09	554667
12	3.1 웹메일 개요	sysop	09-07-09	222515
11	2.6 기초필터파일	sysop	09-07-09	395783
10	2.5 웹편집기	sysop	09-07-09	197783
09	2.4 웹 디렉토리	sysop	09-07-09	223972
08	2.3 웹 레이아웃	sysop	09-07-09	249888
07	2.2 웹필터링	sysop	09-07-09	331415
06	2.1 쎄지오 웹자원	sysop	09-07-09	334461
05	1.5 쎄지오 관리	sysop	09-07-09	222387
04	1.4 처음 로그인 하기	sysop	09-07-09	230809
03	1.3 쎄지오 설치 2	sysop	09-07-09	440916
02	1.2 쎄지오 설치	sysop	09-07-09	813781
01	1.1 intro	sysop	09-07-09	190850

make_title('/segiohelp.brd?shell=none','쎄지오 매뉴얼 게시판');

2.3 웹 레이아웃

1) SSI 기법과 Shell 레이아웃

맨위로

가. SSI 기법

나. SHELL 레이아웃

다. 알맹이 문서

라. SHELL 문서

마. SHELL 레이아웃 사례

2) 쉘문서 종류 및 적용방법

맨위로

가. 기본 쉘

나. 지정 쉘

다. 호출 쉘

라. 상속 쉘

마. 쉘문서 우선순위

바. 호출 쉘 이어받기

사. 호출 쉘 부가변수

3) 쉘문서의 작동과 로케이션

맨위로

가. HTML 문서의 위치

4) HTML 쉘 작동 예

맨위로

가. 직접편집기능 (Edit on View)