Microsoft Internet Explorer 의 DOM 특성 - 독특한 레이어 이벤트 체계

발생조건 (2007.05.22 추가) :
- Internet Explorer 7.0
- XHTML (구 HTML 에서는 이런 문제가 발생하지 않음)

  Microsoft Internet Explorer 에서는, 어떠한 레이어가 투명인 경우 이 레이어에 마우스 이벤트를 걸었을 때 이벤트가 전달되지 않는다. 해당 레이어에 이벤트가 전달되려면 1) 배경색으로 채워진 영역이거나 2) 배경 이미지로 채워진 영역 중 투명하지 않은 영역이거나 3) 글이나 이미지 등 컨텐츠가 채워져 있는 지역이거나 해야만 한다. 중요한 점은 이벤트를 받을 수 있는 조건이 된다고 하더라도 전 영역에 이벤트가 걸리는 것이 아니라 해당 조건을 만족하는 지역, 즉 투명이 아닌 영역에만 이벤트가 전달된다. 따라서 레이어 내에 글이 20% 정도만 채워져 있다면 그 20% 영역에만 이벤트가 전달된다.

  오직 투명이 아닌 영역에만 이벤트가 전달되기 때문에 개발자는 투명 영역을 이용한 레이어 이벤트 마스크 기법 (투명한 레이어를 다른 레이어 위에 덮어서 해당 레이어의 이벤트를 가로채는 방법) 을 사용할 수 없다.

  이러한 특징을 피하고, 고전적인 방식의 레이어 이벤트 방식, 즉 투명 레이어라도 레이어 전체에 이벤트를 적용하게 하려 한다면 다음과 같은 방식을 사용한다.

  1) 스타일의 filter 속성에서 opacity 옵션을 통하여 투명도를 1로 만든다. (투명도는 0-100까지 지정 가능하며 0은 완전 투명이다)
  2) 가장 티가 안나는 색으로 레이어의 배경색을 칠한다.

  회사 내에서 AJAX Framework 개발 중 MS 의 Internet Explorer 7.0 에서 다른 웹 브라우저와는 전혀 다른 동작방식인 이러한 현상에 걸려 해법을 찾고 있었던 중 가장 마지막으로 사용해보려던 방법이었는데 (스타일의 filter 속성은 이미 1999년도에 징그러울 정도로 써먹었기 때문에 저 해법은 따로 생각하고 자시고 할 것도 없이 튀어나와 있었다.), 싸이월드의 홈2 꾸미기에서 해결한 것을 보고 코드를 분석한 결과 같은 방법을 사용하고 있어서 적용하기로 결정했다.