페이지에 문서 끼워넣기

여러 페이지에 공통으로 사용하는 링크 모음같은 것을 모든 페이지에 넣으면 링크를 추가 하거나 삭제할 때, 모든 페이지를 수정해야 합니다. 그래서 관리하기가 불편한데, 이 때 사용할 수 있는 방법이 서버에서 사용하는 include 문입니다.

<!-- #include href="양식문서.htm" -->

으로 여러 페이지에 지정해 놓으면 "양식문서.htm"의 내용을 수정해 주면 여러 페이지에 일괄적으로 수정한 내용을 보여줄 수 있습니다. 그래서 관리가 편리합니다.

자신이 서버를 직접 사용할 수 있는 웹 마스터라면 이 방법이 가장 좋을 것입니다. 하지만 관리자가 아니고 서버를 직접 다룰수 없는 사용자라면 굳이 이 방법을 사용하지 않고 client 에서도 사용할 수 있는 방법이 있습니다. <script src="어떤.js"></script> 화일이나 <LINK> 택으로 여러 페이지에서 사용할 것을 지정하는 것과 비슷한 방법입니다.

먼저 가장 많이 사용하는 방법입니다. 외부 JS 화일을 사용하는 방법입니다. 아래가 그 내용입니다.

var linkStore = "" 
	+ "<a href='a.htm'>a.htm</a> / "
	+ "<a href='b.htm'>b.htm</a> / "
	+ "<a href='c.htm'>c.htm</a> / "
	+ "<a href='d.htm'>d.htm</a>"

위의 내용을 "link.js" 라는 이름으로 만들어 놓았다면 여러 페이지에

<html>
<head>
<script src="link.js"></script>
</head>
<body>
    :
    :
<script>document.write(linkStore)</script>
</body>
</html>

위의 내용을 적어 놓으면 적어 주면 페이지 맨 아래에 "a.htm / b.htm / c.htm / d.htm" 을 출력합니다.  로 서버에서 지원하는 것과 같은 동작을 합니다.

근데, 복잡하고 양이 많은 내용을 페이지에 JS 화일로 끼워 넣으면 에러가 날 수 있는 가능성이 많아지고 다른 효과와 연계하기가 불편합니다. 이런것을 할려면 페이지에 완전한 HTML 문서를 끼워넣는 방법으로 극복할 수 있습니다. 이것을 하는 것으로는 nn4에서 사용할 수 있는 <LAYER src="문서"></LAYER> 택과 include-source:url(문서) 라는 style 요소이고 ie4, ie5에서는 <IFRAME href="문서"></iframe> 택입니다.

<ILAYER src="양식문서.htm" width=300 height=100 bgcolor="red"></ILAYER>

로 사용하면 300x100의 크기의 빨간색 바탕에 "양식문서.htm"을 가지고 옵니다. <ILAYER> 택은 페이지에 출력된 위치에 좌표합니다. 이 택에도 left, top 이라는 좌표를 지정할 수 있는 요소가 있습니다. 그래서 페이지의 다른 본문 내용에 상관없이 특정 위치에 문서를 배치할 수 있습니다. 비슷한 택인 <LAYER>는 절대 좌표로 배치됩니다.

nn4에서 사용할 수 있는 또 다른 방법은 "include-source:url(문서이름)" 라는 style 요소입니다.

<div style="include-source:url('양식문서.htm')"></div>

<LAYER>나 <ilayer> 택처럼 여기에도 width, position 같은 다른 여러가지의 style을 같이 지정할 수 있습니다. 그래서 다양한 모양을 만들 수 있습니다. ie4, ie5에서는 <IFRAME> 택을 사용할 수 있습니다. 프레임 택과 비슷한 동작을 하는 택입니다.

<iframe src="양식문서.htm" width=300 height=100></iframe>

으로 하면 페이지에 "양식문서.htm"을 끼워넣습니다. 물론 이 택에도 여러 style을 지정할 수 있습니다.

nn4, ie4에서 서로 다른 방법으로 페이지에 외부 문서를 끼워넣을 수가 있는데 지원하지 않는 방법을 사용하여 페이지를 출력하면 지원하지 않는 브라우저는 전혀 그것을 출력하지 않고 에러도 나지 않습니다. 지원하지 않는 택은 단순히 무시합니다. 그래서 둘다 넣어주면 지원하는 택만 출력합니다. 이것으로 두 브라우저에서 같은 외부화일을 넣을 수 있습니다.

<ILAYER src="nn4.htm" width=300 height=100>
	<iframe href="ie4.htm" width=300 height=100></iframe>
</ILAYER>

으로 둘다 넣어주면 각 브라우는 지원하는 하나만 해석하여 브라우저를 구분한 페이지를 외부 화일로 페이지에 끼워넣을 수 있습니다. 자동으로 브라우저를 구분한 페이지를 만들수 있는 방법이기도 합니다. 다만, 앞으로의 웹 상황이 어떻게 될지는 미지수입니다. 99년 년말에 나올 nn5가 <LAYER> 택을 계속 지원할지 <IFRAME> 택을 지원할지에 따라서 달라질 수 있지만 그 때까지는 사용할 수 있을 것입니다. 아마 그때가 되면 새로운 기능은 아니더라도 많은 버그를 잡고 나오리라 기대해 봅니다.

<div style="include-source:url('includeN4.htm')">
	<iframe src="includeE4.htm" width="400" height="50"></iframe> 
</div>

[T O P]