전자상거래 시스템 운영 및 관리

   3.전자상거래 컨텐츠 개발

      5. 웹 기술 언어Ⅴ - DHML

¨ DHML

 

① DHTML(Dynamic HTML)의 기본

DHTML은 이전 버전의 HTML에 비해 애니메이션이 강화되고, 사용자 상호작용에 좀더 민감한 웹페이지를 만들 수 있는 새로운 HTML 태그, 옵션, 스타일 시트 및 프로그래밍 등을 의미하는 집합적인 용어이다. DHTML의 많은 부분이 HTML 4.0에 열거되어 있다.

다이내믹 HTML 페이지에 대해 예를 들면, ① 사용자가 마우스의 포인터를 갖다대면 텍스트의 색깔이 변하는 것, ② 사용자가 이미지를 웹페이지의 다른 위치로 '끌어다 놓기'를 할 수 있는 것 등이 있다. DHTML을 쓰면 웹 문서들이 마치 데스크톱 응용 프로그램들이나 멀티미디어 제품처럼 보이거나 동작한다. DHTML은 넷스케이프와 마이크로소프트 브라우저 모두에 의해 지원되지만, 오직 어느 한쪽의 브라우저에서만 지원되는 기능들도 몇몇 있다. DHTML 사용에 있어 가장 커다란 장애물은, 많은 사용자들이 아직도 오래된 브라우저를 사용하고 있기 때문에 각 웹 사이트에서는 사용자들의 브라우저 버전에 맞추어 2가지 버전의 웹페이지를 만들어야 한다는 것이다.

 

·기존의 HTML에 캐스케이딩 스타일 시트(CSS : Cascading Style Sheets)와 DOM(Document Object Model), 그리고 스크립트(VB, JAVA Script, JScript)가 더해진 문서를 말한다.

·다이내믹 HTML은 최신 HTML 버전인 HTML 4.0으로 불리기도 한다.

·인터넷 익스플로러 3.0부터 이미 지원해 온 CSS을 사용하면 문서의 전체 레이아웃이 좋아진다(NC는 V4.0부터 지원됨).

·이미지와 텍스트를 이용한 자유로운 애니메이션이다.

·스타일을 이용해 다양하게 문서를 보여준다.

·다양한 문서를 이용해 텍스트와 이미지를 변환할 수 있다.

·HTML 문서에 있는 객체의 내용을 자유롭게 변경할 수 있다.

·동적으로 테이블 생성이 가능하다.

·다양한 이벤트 조작, 버블링, 캡쳐 등이 있다.

·CGI를 이용하지 않고 현재의 HTML 문서를 다시 그리는 기능이 있다.

 

Tip!------------------------------

CSS(Cascading Style Sheets)

·캐스케이딩 스타일시트를 사용하면 테이블이나 프레임에 의존하던 문서의 레이아웃을 효과적으로 할 수 있고, 글자 크기나 글자체, 줄 간격, 배경 색상 등도 자유롭게 선택할 수 있다.

·스타일을 정의해 놓고 여러 개의 문서에서 불러 쓸 수 있어, 일관된 외양을 요구하는 여러 개의 문서를 만들 때 매우 편리하다.

끝------------------------------

 

② DHTML의 핵심 기술

 

◆ 문서 객체 모델(Document Object Model, DOM)

웹 브라우저와 문서, 그리고 문서를 구성하는 여러 가지 요소들을 하나의 개체(Object)로 다룬다. 이러한 개체들을 자바 스크립트와 같은 언어를 사용해서 동적으로 바꾸는 것이다.

 

◆ 스크립트(Script)

스크립트는 어떤 개체의 성격이나 특성, 행동 방식을 기록해 놓은 것을 말한다. HTML도 웹상의 페이지 성격과 행동을 규정해 놓은 스크립트라고 할 수 있다. 흔히 알고 있는 autoexec.bat 파일도 어떤 면에서는 스크립트라고 할 수 있다.