웹마스터 팁

  2. Support
  3. 웹마스터 팁

include, onload, <span id=...> 다계층메뉴 활용 강좌

2003.10.25 08:13

김병희

원문 링크 : http://www.100kwa.net/zeroboard/zboard.php?id=php&no=53
존칭 생략함을 양해해 주시기 바랍니다.

include, onload, <span id=...> 다계층메뉴 활용 강좌
이렇게 적고 보니 제목이 꽤 거창하게 보인다. 아는 분들에게는 초보적인 지식일지 모르나, 참고가 될 것 같아서 기록해 둔다.

백과넷 http://www.100kwa.net/ 상단 메뉴 줄의 첫 칸 [가나다]를 클릭하면 제로보드 DB를 제외한 백과넷의 모든 자료 색인이 나온다. 물론 자료 항목의 색인은 너무 방대하므로 자료 페이지 색인이다.
그 중 [가] 색인을 클릭하면 이런 3층 구조의 페이지가 열린다.

3층 : [전체] [ㄱ] ... [A~Z]
2층 : [가] [개] [거] [게] [겨] [계] [고] [과] [교] [구] [궈] [궤] [귀] [그] [기] [까]
1층 : 가격비교(가격비교) / 이하 줄 생략

그리고, 잘 보면 3층의 [ㄱ] 항목 배경색이 다른 항목과 다르게 칠해져 있고, 마찬가지로 2층의 [가] 항목도 배경색이 구분된다.

1. 먼저 구조를 보면

3층 파일 : /master/_가나다_list.htm
링크는 <a href="../_1page/가.htm" target="_top"><span id="td_ㄱ" style="font-size:10pt;">[ㄱ]</span></a>

2층 파일 : /index/_가.htm 여기에서 include "../master/_가나다_list.htm";
링크는 <a href="../_1page/가.htm" target="_self"><span id="td_가" style="font-size:9pt;">[가]</span></a>

1층 파일 : /_1page/가.htm 여기에서 include "../index/_가.htm";

2. 링크에 관하여

3층과 2층에서 모두 1층 파일을 링크시킨 이유(3층에서 2층 파일을 링크하지 않고)는, 내용 없는 상위색인만 덩그라니 보이기 싫어서이다. 만약 3층에서 2층 파일을 링크하는 경우에는 이하의 설명을 약간 응용해야 될 것이다.

3. onload 이벤트 함수의 작성과 호출

3층 파일 :
<script>
function cel1back(cel) {
    if( document.all[cel] == '[object]' ) document.all(cel).style.background='#ABCDEF';
}
function cel2back(cel) {
    if( document.all[cel] == '[object]' ) document.all(cel).style.background='#FFF0FF';
}
</script>

</head>

1층 파일 :
<BODY onload="cel1back('td_ㄱ'); cel2back('td_가');">

4. 함수 작성에 관하여

처음에는 멍청하게 수백개가 되는 1층 파일들에 일일이 같은 함수를 작성(복사)해 두었는데(그렇게 한 이유도 별도 스크립트 파일에 넣어서 링크하다 실패한 후의 강제노역이었지만), 어차피 3층 파일은 모든 파일에 인클루드될 것이므로 3층 파일에 한 번만 넣어주면 된다.

5. 함수 호출에 관하여

아래와 같이 먹히면 소스가 간단해 질 텐데 ...

2층 파일 : <BODY onload="cel1back('td_ㄱ');>
1층 파일 : <BODY cel2back('td_가');">

이렇게 해 보았으나, 2층 파일의 이벤트가 먹히지 않았다(즉 3층 해당 항목의 배경색이 바뀌지 않았다). 인클루드되는 파일에서 onload 이벤트를 사용할 수는 없는 것 같다.

6. 활용에 관하여

이 방식을 활용하면, 여러 계층의 메뉴를 거대 포탈의 디렉토리 방식으로 간편하게 작성하여 상당히 방대한 자료라도 가독성이 높고 효율적으로 제공할 수 있을 것으로 생각된다.
특히, 대중소 각 계층의 그룹 항목에 배경색을 바꾸어 주는 것은 디자인의 묘미가 아닐까?
텍스트 방식으로는 이만하면 쓸만한 기법이 되리라 믿고 기록을 남겨 둔다.

7. 참고

<span id=...> 대신 <span name=...>으로 쓰면 객체로 인식되지 않는 문제가 있었다.

최초작성 : 2003년 10월 25일

글 보아 주셔서 감사합니다. 혹 자료 위치가 적합하지 않으면 옮겨 주세요.
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
[PHP 동영상강좌] 14. 여러개의 파일을 거쳐서 값전달하기 [7] 서기 2005.11.23
[PHP 동영상강좌] 13. IF문을 이용한 수우미양가 출력하기 [10] 서기 2005.11.23
[PHP 동영상강좌] 12. IF문의 사용 [6] 서기 2005.11.23
[PHP 동영상강좌] 11. 메일 발송하기 [16] 서기 2005.11.23
[PHP 동영상강좌] 10. 그외의 form관련 태그들 [16] 서기 2005.11.22
[PHP 동영상강좌] 9. form태그를 이용한 값의 전달 [15] 서기 2005.11.22
[PHP 동영상강좌] 8. Get방식의 전달과 테이블, 스타일태그의 사용 [13] 서기 2005.11.22
[PHP 동영상강좌] 7. Get방식을 이용한 변수의 전달 [12] 서기 2005.11.22
[PHP 동영상강좌] 6. Hello PHP [14] 서기 2005.11.22
[PHP 동영상강좌] 5. 웹서버/웹브라우져/PHP란 무엇인가 [12] 서기 2005.11.17
[PHP 동영상강좌] 4. 스타일 시트 [17] 서기 2005.11.17
[PHP 동영상강좌] 3. 테이블 태그의 심화 [10] 서기 2005.11.17
[PHP 동영상강좌] 2. 하이퍼링크, 테이블태그의 사용방법 [15] 서기 2005.11.17
[PHP 동영상강좌] 1. HTML이란 무엇인가! [22] 서기 2005.11.17
[타키의 초보강좌]PHP 기초 강좌 제 2탄[mysql로 들어가보자.] [2] 타키 2004.10.24
[타키의 초보강좌]PHP 기초 강좌 제 1탄[패스워드 인증] [8] 타키 2004.10.23
include, onload, <span id=...> 다계층메뉴 활용 강좌 [2] 김병희 2003.10.25
[추천 소스] nzeo에 있는 북마크 기능 구현하기(hot key 는 제외) 초허접 강좌 [10] 정승재 2002.10.22
초보자를 위한 PHP강좌 파일 [chm형식] [5] ZipShin 2002.05.21
[동영상강좌] 제20회차 - 다중 if문 아이티스터디 2006.02.02
태그 쓰기