웹마스터 팁
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일
글 보아 주셔서 감사합니다. 혹 자료 위치가 적합하지 않으면 옮겨 주세요.
존칭 생략함을 양해해 주시기 바랍니다.
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일
글 보아 주셔서 감사합니다. 혹 자료 위치가 적합하지 않으면 옮겨 주세요.
댓글 2
-
SayQ[9000㎒]
2003.10.25 14:54
이게 도데체 PHP로 가야 할까요 아니면 HTML로 가야할까요..? -_-?? -
체리향기∮
2003.10.25 23:23
강좌 내용은 좋은데.. php는 아니네요.. -_-ㆀ
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 한꼬마의 제로보드 활용방법 (로그인 값 알아 보기) [3] | 한꼬마 | 2003.11.20 |
회원 포인트 랭킹(중복 -_-a)
[4]
 | weky | 2003.11.15 |
|
제로보드회원의 포인트 랭킹 체크하기
[13]
| 전원주 | 2003.11.15 |
| 지금은 시스템 점검중 만들기... [8] | zentoo.com | 2003.11.11 |
| 접속자의 IP를 화일로 저장(기능추가) [27] | 전원주 | 2003.11.06 |
| 호스팅업체에서 GD를 지원하는지 여부를 알 수 있게해주는 소스 [12] | Wizard | 2003.11.05 |
|
홈페이지 관리자 모드 구축하기 (HTTP 인증, 중복 맞음)
[10]
| 9000㎒ | 2003.11.01 |
| include, onload, <span id=...> 다계층메뉴 활용 강좌 [2] | 김병희 | 2003.10.25 |
| 신문기사 긁어오기 [28] | horizon | 2003.10.20 |
| 공지사항|일기장 4강 - notice.php 간단한 글보이기 | 시루바 | 2003.10.16 |
| 최신인기가요 순위 한방에 뽑아오기 [10] | 제누스 | 2003.10.16 |
| 알기쉬운 웹용 MySQL 관리도구, phpMyAdmin 설치하기 [10] | 허창원 | 2003.10.11 |
|
MSN Messenger Class -
| HungryMania | 2003.10.10 |
| 공지사항|일기장 3장 write_ok.php //간단한 입력쿼리문//수정 [5] | 시루바 | 2003.10.08 |
|
내 홈페이지의 방문자 어디서 접속했을까 알아봅시다
[21]
| 버찌소년 | 2003.10.08 |
| 공지사항|일기장 프로그램 2장:코딩구조와write.php [2] | 시루바 | 2003.10.02 |
| [초보] 확장자 체크하는 매우 간단한 소스; [4] | 에지 | 2003.09.29 |
|
인터넷 사이트 , MS 오피스로 관리하기 3 공시사항 나타내기
[5]
| 한꼬마 | 2003.09.24 |
| Whois를 이용해서 접속자가 사용하는 ISP출력(한국통신,하나로,두루넷 등등) [6] | 김재경 | 2003.09.23 |
| 달력 만들기 [10] | TheMics | 2003.09.23 |