웹마스터 팁

  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일

글 보아 주셔서 감사합니다. 혹 자료 위치가 적합하지 않으면 옮겨 주세요.
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
레이어 특강 1 - 큰일 나는 소스 [23] 미친개 2004.06.30
둥근테이블을 홈피에 짜고싶을때../ [12] file zEn 2004.06.28
[추천] 세로형 배너 슬라이드 [4] ⓣinⓣin™ 2004.06.24
볼륨값이 얼마나 될까? [5] PHASE 2004.06.16
[추천] 가로형 배너 슬라이드 [7] file ⓣinⓣin™ 2004.06.10
[StylishJAVA]레이어를 이용한 슬라이드 메뉴 [5] ∑Ztxy 2004.06.05
지바 애플 아날로그 시계 소스입니다... [4] 한성민 2004.06.02
간단한 감추기/펼치기 스크립트 (태터툴즈의 more 기능) [5] 나이시스 2004.05.28
왔다 갔다 이미지 스크롤 [3] 컴도미 2004.05.25
동영상을 일반 버튼으로 제어 ☺심심 2004.05.23
배너를 모자이크로 슬라이드한다! [13] ☺심심 2004.05.17
이미지 갤러리-이미지에 설명이나 이름을 같이 달아줄수 있는.. webzang 2004.05.17
클릭하거나, 바탕을 더블클릭하면 나타나는 작은(크기조절가능) 메뉴 ☺심심 2004.05.17
상태창에 머문시간 보여주기 [5] ☺심심 2004.05.05
특정위치에 떠있는 레이어 (슬라이딩 애드콘) - 노프레임홈에서의 문제해결 [8] 검미르 2004.05.03
접속할때마다 다른 이미지 띄우기 [8] ▩윤미 2004.04.30
그림파일없이 바꾸는 그라이데이션 배경색 [3] ▩윤미 2004.04.30
웹페이지에 테두리 두르기 [5] ▩윤미 2004.04.30
로딩 100% 후 페이지 이동시키기 [1] ▩윤미 2004.04.30
특정부분을 원클릭에 copy 또는 선택하기 [3] ▩윤미 2004.04.30
태그 쓰기