DHTML menu I


Home > Document > Web design > Menu > DHTML > Horizontal drop down

DHTML menu

DHTML 이라고 하면 글자가 날아 다닌 다든가 그림이 왔다리 갔다리 하거나 뽀샤시하게 나타나는 것 만으로 생각하는 사람들이 의외로 많은 것 같습니다. 물론 이러한 것 들도 분명히 DHTML 이긴 합니다. 하지만 몇 번 보고나면 시들해 지는 눈요기를 하기 위한 DHTML 보다는 진정한 의미의 DHTML에 대해 생각해 봐야 되겠습니다.

웹 사이트를 디자인하면서 가장 고민하는 부분은 역시 Interface 라고 할 수 있는데, 이는 곳 Menu 를 말 한다고 해도 과언이 아닙니다. 미적인 요소는 일단 차치 하더라도, 기능적인 면을 어떻게 해결 하느냐 하는 문제인데 이런 문제가 생기는 이유는 바로 우리가 사용하는 모니터 면적의 한계 때문이져. 물론 고해상도(2048 X 1536)를 사용한다고 해도 마찬 가지죠. 그 해상도에 맞춰 디자인 할 바보가 어딨겠습니까. 그렇기 때문에 응용프로그램의 경우도 면적을 아끼려다 보니 메인 메뉴를 클릭하면 서브 메뉴들이 아래로 펼쳐지고, 그 다음 단계가 있으면 좌우로 확장시키는 방법을 선택할 수 밖에 없다는 거죠. 웹 사이트의 경우도 간단히 대 여섯개 정도의 페이지로 구성된 사이트가 아니라면 웹 디자이너의 가장 큰 고민은 역시 메뉴겠죠.

그래서 이 번 페이지에서는 CSS positioning 을 이용하여 나름대로 쓸 만한 DHTML Menu를 만들어 보도록 하겠습니다. 원래는 XML로 만든 메뉴인데 아직 XML은 시작도 못 한 상태이고, 초보자들이 사용하기에 좀(어쩌면 너무) 어려우리라는 판단에 html, css, javascript 만으로 편집했습니다. 따라서 이 내용을 이해 하려면 이 세가지 내용을 알아야 되겠져?

그리고 무엇 보다 중요한 것은 역시 원리를 알아서 그게 왜 그렇게 되는지를 이해 하는 것이기 때문에 이 메뉴에서의 가장 핵심적인 주제인 Positioning 에 대해 먼저 설명 하겠습니다. 앞의 CSS positioning에서도 설명 했지만 브라우저 창에서의 X, Y 좌표 를 이용하여 box 를 top 과 left 에서 원하는 만큼 떨어진 곳에 위치 시킬 수 있었습니다. 그런데 이 번에는 반대로 어떤 box 가 top 과 left 에서 얼마 만큼 떨어져 있는 지, 또 box의 가로 세로 size는 얼마 인지를 측정하는 방법에 대해 알아 보겠습니다.

Y : 브라우저 창 상단(top)에서 box 윗 면까지의 거리(offsetTop)X : 브라우저 창 왼쪽 면(left)에서 box 왼쪽 면 까지의 거리(offsetLeft)offsetHeight
offsetWidth
브라우저 창
box




offsetTop, offsetLeft 와 offsetWidth, offsetHeight

아래의 표와 위의 그림을 보면 이해하리라 생각합니다. 그리고 offsetTop, offsetLeft 등 대소문자를 확실히 구분 해야 됩니다.

offsetTop, offsetLeft 와 offsetWidth, offsetHeight
offsetTop 브라우저 창 상단에서 box 상단까지의 거리
offsetLeft 브라우저 창 좌측 면에서 box 좌측면 까지의 거리
offsetWidth box 자체의 수평 길이(width)
offsetHeight box 자체의 수직 길이(height)


예제
<html>
<head>
<title>좌표 알아 내기</title>
<script type="text/javascript">
<!--
function coords(obj){
window.alert("offsetLeft = " + obj.offsetLeft + ", offsetTop = " + obj.offsetTop + ", offsetWidth = " + obj.offsetWidth + ", offsetHeight = " + obj.offsetHeight)
}
// -->
</script>
</head>
<body>
<div id="box" style="position:absolute; width:200px; height:150px; top:100px; left: 50px; border:1px tomato solid;"></div>
<button onclick="coords(box);">좌표 알아 내기</button>
</body>
</html>


코드 실행 하기

위의 예제는 alert Method를 사용하여 경고창으로 띄우는 간단한 예제로서 이해했으리라 믿습니다. 이와 같이 어떤 box 의 offsetLeft 과 offsetTop는 결국 그 box의 좌측 상단 X, Y 좌표가 됩니다. 그렇다면 나머지 좌측 하단, 우측 상단, 우측 하단의 위치도 알아 낼 수 있을까요? 너무 상대방을 무시하는 질문이라구요? 그럴 리가 있겠습니까. 만사 불여튼튼 이라고 확인 또 확인이 항상 필요합니다. 물론 이 문제는 아주 산술적인 문제입니다만 프로그램적... 그 중에서도 positioning 적으로 정리해 보겠습니다.

4 모서리의 좌표 측정
위치 X 좌표 Y 좌표
좌측 상단 offsetLeft offsetTop
좌측 하단 offsetLeft offsetTop + offsetHeight
우측 상단 offsetLeft + offsetWidth offsetTop
우측 하단 offsetLeft + offsetWidth offsetTop + offsetHeight

맞져? 별 거 아닌 것 같아도 사실 이건 비법에 속하는 내용입니다...^^ 그리고 이 사실을 아는 순간 여러분 들은 DHTML의 또 다른 세상을 볼 수 있게 됩니다. 여기 까지 이해 했다면 아래의 DHTML 메뉴 보기를 클릭해서 메뉴를 보시고 소스를 스스로 분석해 보도록 하십시요...^^ 황당하게 아무 설명도 없다고 해서 관리자가 혹시 실수로 빼 먹은 거나 아닌지 하고 눈을 의심하는 분들... 의심하지 마시져.. 아주 정확하게 보신 겁니다. 예... 아무런 설명도 안 붙이기로 했습니다... 아니 가르쳐 줄라믄 끝까지 가르쳐 주지 무책임하게 이게 뭐냐... 치사하게... 하고생각하시는 분들... 관리자가 절대 무책임한 사람 아닙니다. 소스에 대한 분석을 우선해 보시고 이해가 안 가는 부분은 강좌 게시판에 덧글로 달아 주시죠. 또 소스의 이해를 위해 이 사이트에 있는 관련 자료를 찾는데 그게 어디 있는지 모를 경우도 덧글을 다세요. 스스로 소스를 분석해 보고 고민하는 것... 매우 중요합니다...

그리고 또 한가지... 아래의 메뉴는 수평으로 구성된 메뉴지만 수직으로 만들 수도 있습니다. 즉, 왼쪽에 수직으로 된 메뉴가 있고 메뉴 button 에 Mouse가 올라가면 button 오른쪽에 서브 메뉴 항목이 나타나는 메뉴 말이져... 방법은 위에서 설명한 내용에 모두 다 있습니다... 한 번 도전에 보시죠...^^

DHTML 메뉴 보기





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색