|
[실전강의실|4] 사용자 참여 웹 편집 사이트 및 툴바 구현
이재혁 ljh131@msn.com｜엊그제 입학한 듯 한데 벌써 3학년이 되었다. 믿는 자에게 코드가 있을 지어니 항상 ‘구글 신’을 영접할 다양한 프로그램들을 준비해 놓고 있다.
박영창 eternalbleu@gmail.com｜중앙대학교 4학년에 재학 중이다. 블로그 방문자들이 간간히 클릭하는 애드센스 현황을 보는 재미에 푹 빠져있는 열혈 블로거
HTML 동적 편집
지난 호에서 편집 사이트(에디터라 함)는 DOM-Javascript로 만들어진 편집 스크립트를 이용해 HTML을 동적으로 편집한다고 설명했다. 만약 편집 스크립트를 거치지 않은 상태로 저장할 경우 차후 웹 페이지에 업데이트 내용을 반영할 수 없다. DOM을 이용하면 HTML을 트리구조 형태로 접근이 가능하다. 그리고 사용자가 편집 중간에 표의 한 행을 삭제하게 되면 BODY-DIV-TABLE 안의 TR Element를 삭제하는 편집 스크립트를 생성하게 된다.
편집 사이트 구현 하이라이트
간단한 기능 구현을 통해 워밍업을 해보자. <화면 1>은 페이지 편집 중 본문 영역의 한 부분을 마우스로 하이라이트한(박스 부분) 예이다.
<리스트 1>은 이 기능을 자바스크립트로 구현한 것인데 기본적인 로직은 단순하다. 우선 document.onmousemove에 highlight 함수를 등록한다. 그러면 HTML Document에 있는 모든 Element가 마우스 영역 안으로 들어오면 highlight 함수가 호출된다. 이전에 선택된 영역은 이전 색으로 복구시키고, 현재 선택된 영역을 하이라이트 색(파란색)으로 칠해준다.
