Mouse Event

페이지 목차

• CSS 를 이용한 DHTML
• DHTML 을 하기 위한 사전 지식들(DOM, object, this, id, class, name)
• CSS Scripting 을 이용한 DHTML

1. CSS 를 이용한 DHTML

Windows 등 GUI(Grapic User Interface) 환경에서는 사실상 Mouse 없이 컴퓨터를 한다는 것은 불가능에 가까운 일입니다. 그러다 보니 초보자라도 Mouse 작동에는 큰 어려움이 없는거죠. 흔히 초보자의 경우 주로 왼쪽 버튼만을 사용하게 되죠. 이 왼쪽 버튼은 Click 의 기능 밖에 없습니다. 하지만 사실상 Windows 나 Windows 응용 프로그램들은 오른쪽 버튼에 많은 기능을 숨겨 놓았습니다. 예를 들어 우클릭 했을 때 어떤 메뉴가 나타난다든지 하는 식으로 말이져... 웹 문서에서도 그렇고 응용 프로그램에서도 가장 고민스러운 것이 메뉴의 처리인데, 그건 모니터의 크기라는 것이 한정되어 있기 때문입니다. 메뉴 부분에 너무 큰 면적을 할애하다 보면 작업공간은 당연히 줄어 들게 되겠죠. 그러다 보니 마우스 오른쪽 버튼에 어떤 기능을 부여하고 우클릭하는 동작에서 나타나게 만든거라는 말입니다. 또 같은 프로그램이라도 어느 위치에서 우클릭하느냐에 따라 나타나는 메뉴가 다를 수 있구요. 여러분들이 초보자라면 여기 저기서 우클릭을 한 번씩 해 보는 것도 그 프로그램을 잘 익힐 수 있는 좋은 방법입니다.

이번 페이지에서는 이런 마우스의 동작을 이용하여 Mouse를 움직이거나 클릭을 하는 등의 어떤 상황(Event)이 발생했을 때 표현할 수 있는 일종의 DHTML 에 해당되는 몇 가지 실험을 해 보도록 하겠습니다. 우선 아래의 표를 보고 마우스의 동작이 어떻게 구분되며 그 동작에 따라 일어나는 Event를 어떻게 부르는지 잘 보시져... 아래의 표에 '영역' 이라는 단어가 나오는데, 이 영역이란 Block-Level Element 를 의미합니다. 즉, 브라우저 창에 나타나는 Element 들을 의미합니다. 참고로 HTML 4.0의 Block-Level Element 는 다음과 같습니다.

DOM 의 목적은 각각의 HTML Element 들을 Object 화 하므로 해서 동적(Dynamic)인 효과를 낼 수 있는 방법을 제시하기 위해서 제안 된 물건인데, 기존의 웹 페이지 작성자 들이 보다 쉬운 방법으로 DHTML 이나 JavaScript 접근하게 해 줍니다. 여기서 Object 란 사전적 의미로 물체 객체 등의 의미인테 어떻게 해석해도 상관 없습니다. 어떻게 해석하건 DOM 에서의 Object 란 HTML Element를 사용한 Tag을 의미합니다.

가만히 함 생각해 봅시다. 동적이라는 것은 움직인다는 것인데, 우리가 주변에 있는 물건을 움직이려면 그걸 손으로 잡고 움직이게 되져. 그럼 사람을 움직인다고 치면 첫 번째 생각해 볼 수 있는 방법이 가마니 있는 사람을 강제로 들쳐 엎든지 해서 움직이는 방법인데, 상대방이 어디 그렇게 가마니 있겠습니까? 반항하겠져? 나 보다 힘센 사람이면 되려 뚜디려 맞습니다. 별로 좋은 생각이 아닌 것 같은니 접어두고... 이 번에는 나(this)를 포함해서 서로 처음 만나는 여러 사람(Object)이 있는데, 내가 상대방 중에 아무나 부르면 그 사람이 움직이고, 나도 상대방이 부르면 움직이기로 약속을 했다고 가정하져. 그러기 위해서는 우선 필요한게 멀까요?... 그건 그 사람의 이름 입니다. 이름을 알아야 부르지 않겠습니까. 그럼 이름 이라는 것에 대해 알아 보겠습니다.

HTML Tag 자신을 말합니다. 즉 자기가 자기 스스로 움직일 때는 이 this 가 이름이 됩니다.

HTML Element 의 Attribute 중에 하나로 모든 Element 들이 다 name 속성을 가지고 있지는 않고, Form 에 사용되는 모든 Element, iframe, frame, IMG, MAP 등의 Element 가 가지고 있는 속성으로서 Scripting 에서 호출될 이름입니다.

id 는 name 속성이 없는 HTML Element 에서 Scripting 할 때 호출될 이름입니다.

사용자가 Style class를 지정할 때 붙여준 Name 입니다. 이 때 className의 'N' 은 반드시 대문자 이어야 됩니다.

this를 제외한 위의 어떤 방법이든지 HTML Tag에 이름이 붙여지게 되면 그 때 부터 그 Tag은 DHTML 로 Scripting 하여 움직일 수 있는 Object 가 됩니다. 그 전에도 물론 Object 였지만 자기 스스로만 움직일 수 있었고 다른 방법으로는 움직일 수 없는 Object 였습니다.

CSS Scripting 이란 앞의 DOM에서 설명한 것 처럼 HTML Tag 을 Object화 하여 Dynamic 한 HTML 을 만드는 방법을 말합니다. 흔히 DHTML 이라 그러면 고수들이나 쓸 수 있는 물건으로 오해하고 있는데, 알고보면 아주 간단한 물건이 바로 DHTML 입니다. 아마 여러분들도 알고 나면 '애게 이렇게 쉬워?' 라는 생각이 들리라 믿습니다. 아래는 CSS Scripting의 기본 공식입니다.

정말 간단하지 않습니까? object는 this 또는 name 이나 id 를 붙인 HTML Tag 을 말하고, style은 CSS Scripting 이라는 뜻으로 붙여주는 식별자(Identifier)이고, styleProperty는 Style property 중 하나, styleValue는 선택된 styleProperty 의 값을 의미합니다. 예를 들어 Mouse가 어떤 Tag으로 올라 갔을 때 선택한 Tag 자체의 글자색을 기본색인 검정색에서 red color로 바꾸고 싶다면 scripting은 다음과 같습니다.

이상으로 간단하게 Mouse event와 DOM 그리고 CSS Scripting에 대해 알아 보았고 자세한 내용은 Style property 들을 배우면서 예제를 통해 익혀 나가도록 하겠습니다.

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