웹마스터 팁
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는 아니네요.. -_-ㆀ
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 최근게시물의 폰트크기와 링크색상 바꾸기. [5] | 매머드 | 2002.09.13 |
| 레이어 고정법 [8] | bageup | 2002.09.11 |
| 자바스크립트 없이 브라우저 버전체크 [5] | steelheart | 2002.09.03 |
| 초보에게는 골치아픈 배경 위치 정하기... [6] | 유지호 | 2002.09.01 |
| [HTML 초보자] 테이블 태그를하자-1 [5] | ZipShin | 2002.08.30 |
| 스타일 시트 적용순서 [4] | 판타랏사 | 2002.08.24 |
| [HTML 초보자] HTML <Hr>태그에 대해서.. [3] | ZipShin | 2002.08.23 |
노프레임 홈페이지 만들기 강좌:)
[53]
 | Alunar@R. | 2002.08.22 |
| [HTML 초보자] 강제개행 <br>태그 엔터효과. [8] | ZipShin | 2002.08.21 |
| HTML과 CSS 사전을 만들어 보았습니다. [7] | 01CODE.com | 2002.08.20 |
| [초보-하드코딩] 소스정리 팁 몇가지... [23] | 안데르센 | 2002.08.19 |
| [HTML 초보자] HTML 문단 P태그에 대해서 알아봐요..^^ [5] | ZipShin | 2002.08.18 |
| [HTML 초보자] HTML HeadLine태그(H1,H2..) [6] | ZipShin | 2002.08.16 |
| 깔끔한 홈페이지를 만들고 싶다면 꼭 알아야 할 것(2) [9] | 키르(SP) | 2002.08.15 |
| 깔끔한 홈페이지를 만들고 싶다면 꼭 알아야 할 것(1) [5] | 키르(SP) | 2002.08.15 |
| [HTML 초보자] HTML 물리적태그와 논리적태그(글자진하게 등등) [5] | ZipShin | 2002.08.14 |
| [Siren]소스보기 금지된 페이지 저장하기! (강좌가 아닌가..;;) [15] | 세이렌 | 2002.08.12 |
| [HTML 초보자] HTML 폰트 태그 [2] | ZipShin | 2002.08.12 |
| [HTML 초보자] HTML 홈페이지의 태그 기본구조2. [13] | ZipShin | 2002.08.09 |
| 중간 점 찍기 [12] | 오픈소스 | 2002.08.08 |