이 글은 html 소스를 보고, 직접 수정할 수 있는 분들을 위한 글입니다.

위와 같은 방법을 드림위버나 나모에서 어떻게 하는지 안써봐서 잘 모르니, 어떤 메뉴에서 어떻게 추가하시라고는 말씀 못드리겠구요.

드림위버나 나모같은 위지윅 프로그램을 이용하시는 분들도 이 정도의 코딩은 가능하시리라는 전제 하에 씁니다.

1. 파일 인클루드란?

고정적으로 노출되는 부분 (예를 들면 메뉴나 로고, 시그니쳐와 같은. 편의상 A 라고 지칭합니다.) 을 파일 한개로 지정하고, 변동이 있는 내용 (실제적인 홈페이지 컨텐츠가 되겠지요, B 라고 하겠습니다.) 에서 A를 계속 불러오는 방식이라고 설명하면 쉽게 이해하실 수 있을 지 모르겠습니다.

프레임이 A 와 B 를 따로 파일저장한 후 C 라는 프레임셋 정의된 파일에서 A 와 B 를 불러주어 각각의 프레임 내에서 A 와 B가 별개로 돌아간다면, 노프레임에서 파일 인클루드 하는 것은 B 라는 파일에서 A 라는 파일을 포함하고 있는 것입니다.

간단히 그림으로 설명하면 다음과 같습니다.

▶ 프레임 구조 (필요파일 3개 : A, B, C)

▶ 인클루드 구조 (필요파일 2개 : A, B)

인클루드 하는 방법은 php, asp, jsp 가 가능한 서버환경이라면 더 편하게 하실 수 있고, 오직 html 만 지원하는 환경이라도 만들기가 가능합니다. 천천히 설명을 해보겠습니다.

2. 홈페이지 구성

홈페이지 구성이 다음과 같다고 가정하겠습니다.

위의 구성을 테이블로 구성한다면 전체 틀은 다음과 같이 되겠지요.(편의상 테그 꺽쇠를 모두 대괄호로 변경해서 쓰겠습니다.)

Logo & menu
Contents

코딩시 Logo & Menu 부분에는 실제 내용이 들어가게될 테이블이 다시 들어가겠구요, 하단의 Contents 부분도 마찬가지 일것이라고 봅니다. 어쨌든 지금으로서는 A 와 B 라는 2개의 공간(?)으로 나누고 싶다는 것이겠지요.

만약 현재 보는 페이지를 main.html 이라고 가정했을때,

프레임을 쓰지 않고 A 부분을 한개의 파일로 지정해서 불러오게 하는 방법을 보통 인클루드(include) 한다고 이야기합니다.

구성은 이렇게 되겠지요.

위의 구성으로는 main.html 과 menu.html  2개의 파일이 필요합니다.

main.html 에서 menu.html 을 불러와 먼저 뿌려준 후에 실제 들어갈 나머지 내용을 넣어주는 방식이지요. 이럴 경우 메뉴 부분을 수정하고 싶을때는 menu.html 파일만 수정해주면 전체 반영 됩니다.

3. php 가 가능한 환경에서 인클루드 하는법

만약 메뉴 부분의 내용 구성이 위와 같다면

html 코딩은 다음과 같이 되겠지요.(편의상 테그 꺽쇠를 모두 대괄호로 변경해서 쓰겠습니다.)

LOGO
menu01
menu02
menu03
menu04

이렇게 코딩한 소스를 menu.html 이라고 저장합니다.

그다음 B 의 내용이 들어갈 파일을 main.php 라고 저장합니다.

main.php 의 내용은 다음과 같이 됩니다.

(편의상 테그 꺽쇠를 모두 대괄호로 변경해서 쓰겠습니다.)

Contents

노랗게 칠해져 있는 부분이 menu.html 파일을 불러오는 php 소스입니다.

저렇게만 해주시면 main.php 라는 파일을 불렀을 때, menu.html 의 내용을 먼저 뿌려주고 나머지 Contents 부분을 뿌려주게 되는거죠.

만약 하단에 매 페이지마다 반복되는 시그니쳐가 있다면

그 부분만 따로 코딩해서 sig.html 과 같은 파일로 저장한 후에

(편의상 테그 꺽쇠를 모두 대괄호로 변경해서 쓰겠습니다.)

Contents

와 같이 하단 부분에 넣어주시면 되는거구요.

asp도 방식은 같습니다.

다만 인클루드 하게 하는 코딩만 약간 틀릴 뿐이지요.

4. asp 가 가능한 환경에서 인클루드 하는법

방법은 위와 같습니다.(편의상 테그 꺽쇠를 모두 대괄호로 변경해서 쓰겠습니다.)

다만 코딩 방식이 php 가

과 같은 방식일 뿐이지요.

사용법도 같습니다.

5. jsp 가 가능한 환경에서 인클루드 하는법

방식은 역시 같으며, 코딩 방법은 다음과 같습니다.(편의상 테그 꺽쇠를 모두 대괄호로 변경해서 쓰겠습니다.)

6. php, asp, jsp 모두 안될때 인클루드 하는법

이 방법은 조금 복잡합니다만, 천천히 따라하시면 충분히 하실 수 있습니다.

만약 메뉴 부분의 내용 구성이 위와 같다면

html 코딩은 다음과 같이 되겠지요.(편의상 테그 꺽쇠를 모두 대괄호로 변경해서 쓰겠습니다.)

LOGO
menu01
menu02
menu03
menu04

php나 asp 로 인클루드 할때는 저 내용만 코딩해서 .html 파일이나 .php / .asp 파일로 저장해서 쓰시면 되지만 두 가지 모두 불가능할 환경일 때는 .js 파일을 생성하셔서 하시면 됩니다.

위의 내용을 menu.js 라는 파일을 만들어서 넣는다고 할때 방법은 다음과 같습니다.

(편의상 테그 꺽쇠를 모두 대괄호로 변경해서 쓰겠습니다.)

---------------------menu.js 파일 내 용------------------

str  = ''

str += ''

str += ' '

str += ' LOGO'
str += ' menu01'
str += ' menu02'
str += ' menu03'
str += ' menu04'
str += ' '
str += ' '
str += ''

document.write( str );

-------------------------------------------------------------------

str  = '' 로 시작하시고document.write( str ); 로 끝맺음 하시면서

그 사이에 들어가는 html 소스 매 줄마다 앞에는str += '를 뒤에는'를 붙여주시는거지요.

그렇게 만들어진 menu.js 파일을 main.html  에서 불러오는 방법은 다음과 같습니다.

(편의상 테그 꺽쇠를 모두 대괄호로 변경해서 쓰겠습니다.)
 

Contents

7. 마치며.

지식인에서 보면 노프레임이니 프레임이니 하는 류의 질문이 상당히 많습니다. 특별히 원하는 인터페이스가 있는 경우가 아니라면 대부분 노프레임으로 홈페이지가 구성하는 편인데요, 쉬운 방법임에도 불구하고 파일 인클루드 하는 방식을 잘 모르는 분들이 있는 것 같아서 써봤습니다.

부디 도움이 되시기 바랍니다.