<usertag> 와 같은 방법으로 html tag를 정의할 수가 있다.
다음과 같이 아주 번잡한 기능이 필요하다 치자. (그냥 번잡하다에 초점을 두면 된다.) 글이 나타나는 공간을 제한하고 제한된 공간을 넘어가면, 글을 자른다. 기본 배경은 노란색이다. 마우스를 올려놓으면, 배경이 녹색으로 변하고, 마우스를 옮기면, 다시 배경이 노란으로 변한다. 또 마우스를 올려놓으면, 글 내용 전체가 표시된다.
위와 같이 다소 번잡스런 기능을 지원하는 html 태그는 없다. 그러나, usertag를 쓰면, 해결이 가능하다. (그냥 번잡스러움을 강조하기 위해 쓸데없이 번잡스럽게 해놨다.-_-;)
소스의 point.
1. window.attachEvent("onload", usertagFunction);
window.onload = usertagFunction; 로 해도 된다. 페이지가 로딩되면, usertagFunction을 호출한다는 것이다.
2. var usertags = document.getElementsByTagName('usertag');
usertag라는 tag를 찾는다. 찾아서 이런 저런 작업들을 해준다.
3. var obj = document.createElement("div");
div 객체를 만든다. 이후는 그 div객체의 속성이나 이벤트 등을 정의한다.
4. document.body.insertBefore(obj, usertags[0]); document.body.removeChild(usertags[0]);
usertag 앞에 3에서 만든 div를 집어 넣는다. 그리고 usertag부분은 없애버린다. 그러면, 새로만든 div가 usertag 객체가 있던 자리를 차지하게 된다.
주의: 2 과정 이후에 for를 사용하지 않고, while을 쓴 것은 루프를 하나씩 돌때마다, usertag는 삭제되기 때문이다.
usertag[0], usertag[1], usertag[2]와 같이 3개의 usertag가 있을 경우 for문을 쓰게 되면, 첫번째 루프에서 usertag[0]이 사라진다. 그리고 카운터 값은 1이 되기때문에 usertag[1]이 아니라 usertag[2]가 두번째 유저태그가 된다. 즉 usertag[1]에 대해서는 아무런 처리도 하지 못한다.
테스트: IE 6.0 only.
아...나 참..어이가 없습니다..
저런 옳지못한 정보가, 팁이라고 버젓이 올라오다니 ㅡ,.ㅡ;
