동적 HTML

Dynamic HTML
HTML
비교

Dynamic HTML 또는 DHTML은 대화형 및 애니메이션 문서를 만들 수 있는 HTML, 스타일 시트 및 클라이언트측 스크립트(JavaScript, VBScript 또는 기타 지원되는 스크립트)의 조합을 설명하기 위해 일부 브라우저 공급업체에서 사용한 용어다.[1][2]DHTML의 적용은 1997년 인터넷 익스플로러 4의 출시와 함께 마이크로소프트에 의해 도입되었다.[citation needed]

DHTML은 스크립팅 언어가 웹 페이지의 정의 언어에서 변수를 변경할 수 있도록 허용하며, 페이지가 완전히 로드된 후 그리고 보기 프로세스 중에 다른 "정적인" HTML 페이지 내용의 모양과 기능에 영향을 미친다.따라서 DHTML의 동적 특성은 페이지를 보는 동안 기능하는 방식이지 각 페이지 로드로 고유한 페이지를 생성하는 능력이 아니다.

대조적으로, 동적 웹 페이지는 넓은 개념으로, 사용자마다 다르게 생성된 웹 페이지, 로드 발생 또는 특정 변수 값을 포함한다.여기에는 클라이언트측 스크립팅에 의해 작성된 페이지와 서버측 스크립팅에 의해 작성된 페이지(예: PHP, Python, JSP 또는 ASP)가 포함된다.NET) 웹 서버가 콘텐츠를 클라이언트로 보내기 전에 생성하는 위치.

DHTML은 Ajax의 이전 버전이고 DHTML 페이지는 여전히 요청/재로드 기반이다.DHTML 모델에서는 페이지가 로드된 후 클라이언트와 서버 사이에 어떠한 상호 작용도 없을 수 있다. 모든 처리 작업은 클라이언트 측에서 이루어진다.이와는 대조적으로 Ajax는 DHTML의 기능을 확장하여 페이지 로딩 후에도 페이지가 서버에 대한 네트워크 요청(또는 '하위 요청')을 개시하여 추가 작업을 수행할 수 있도록 한다.예를 들어 한 페이지에 여러 탭이 있는 경우, 순수한 DHTML 접근방식은 모든 탭의 내용을 로드한 다음 활성 상태인 탭만 동적으로 표시하는 반면, AJAX는 각 탭이 실제로 필요할 때만 로드할 수 있다.

사용하다

DHTML은 작가들이 DOM(Document Object Model)과 페이지 유형을 변경하여 다른 방법으로 달성하기 어려운 페이지에 효과를 추가할 수 있도록 한다.HTML, CSS 및 JavaScript의 조합은 다음과 같은 방법을 제공한다.

  • 문서에서 텍스트 및 이미지 애니메이션을 실행하십시오.
  • 최신 뉴스, 주식 시세 또는 기타 데이터로 내용을 자동으로 새로 고치는 티커 또는 기타 동적 디스플레이를 포함하십시오.
  • 양식을 사용하여 사용자 입력을 캡처한 다음 데이터를 처리하고, 확인하며, 서버에 데이터를 다시 보낼 필요 없이 응답하십시오.
  • 롤오버 버튼 또는 드롭다운 메뉴를 포함하십시오.

덜 일반적인 용도는 브라우저 기반의 액션 게임을 만드는 것이다.1990년대 후반과 2000년대 초반에 DHTML을 사용하여 많은 게임이 만들어졌지만,[citation needed] 브라우저 간의 차이점은 게임이 여러 플랫폼에서 작동할 수 있도록 하기 위해 많은 기술을 코드로 구현해야 한다는 것을 어렵게 만들었다.최근 브라우저는 웹 표준으로 수렴되고 있으며, 이것은 DHTML 게임의 디자인을 더욱 실행 가능하게 만들었다.이 게임들은 모든 주요 브라우저에서 실행될 수 있으며 DHTML 코드를 기반으로 하는 KDE용 Pasma, MacOS용 위젯, Windows Vista용 Gadgets에 포팅될 수도 있다.

DHTML이라는 용어는 다양한 웹 브라우저 사이에서 잘 작동하지 않는 경향이 있는 관행과 관습과 연관되면서 최근 몇 년 사이 사용하지 않게 되었다.[citation needed]

광범위한 DOM 액세스가 가능한 DHTML 지원은 Internet Explorer 4.0에서 도입되었다.Netscape Navigator 4.0과 함께 기본적인 동적 시스템이 있었지만, 모든 HTML 요소가 DOM에 표현되지는 않았다.DHTML 스타일의 기법이 널리 보급되었을 때, 관련된 기술에 대한 웹 브라우저들의 지원의 정도가 달라서 개발 및 디버깅이 어려웠다.Internet Explorer 5.0+, Mozilla Firefox 2.0+ 및 Opera 7.0+가 ECMascript에서 상속받은 공유 DOM을 채택하면서 개발이 쉬워졌다.

보다 최근에, jQuery와 같은 자바스크립트 라이브러리는 브라우저 간 DOM 조작에서 일상적인 어려움의 많은 부분을 추상화했다.

웹 페이지 구조

참고 항목: DOM 이벤트

일반적으로 DHTML을 사용하는 웹 페이지는 다음과 같은 방법으로 설정된다.

<!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8"> <title>DHTML example</title> </head> <body bgcolor="red"> <script> function init() { let myObj = document.getElementById("navigation"); // ... manipulate myObj } window.onload = init; </script> <!--     Often the code is stored in an external file; this is done     by linking the file that contains the JavaScript.    이것은 여러 페이지가 동일한 스크립트를 사용할 때 유용하다: --><script src="my-javascript.js"></script> </body> </html>

예:추가 텍스트 블록 표시

다음 코드는 자주 사용되는 함수를 예시한다.웹 페이지의 추가 부분은 사용자가 요청하는 경우에만 표시된다. 

<!DOCTYPE html> <html> <head> <meta charset="utf-8" > <title>;/title>,<> DOMfunction&lt를 사용하여;style>{background-color:#eee.}가 맴돌다{배경:#ff0.})toggleMe{배경:#cfc, 디스플레이:아무도, 여유:30px 0;:1em 패딩.}<>/style>,<>/head>,<>body>,<>h1&gt을 말한다.;/h1>,<> DOMfunction&lt를 사용하여;h2>, <id="showhide"href="#"&gt을 말한다.모두 표시 paragraph<, /a>,<>/h2>,<>안 id="toggle-me">요청에 의해서만 표시되는 단락이다.</p> <p>그 문서의 전반적인 흐름은 계속되고 있다.</p> <script> 함수 변경DisplayState(displayElement, textElement) { if (displayElement.style====none" displayElement.style==="{ displayElement.style = "block"; textElement.innerHTML = "문단 숨기기"; } 기타 { displayElement.style.display = "none"; textElement.innerHTML = "Show paragraph"; } } let displayElement = document.getElementById("toggle-me"); let textElement = document.getElementById("showhide"), textElement.addEventListener("click", function (e) { e.preventDefault(); changeDisplayState(displayElement, textElement); }); </script> </body> </html>

문서 객체 모델

주요 기사:문서 객체 모델

DHTML은 그 자체로 기술이 아니라 HTML, CSS, 자바스크립트의 세 가지 관련 보완 기술의 산물이다.스크립트와 컴포넌트가 HTML과 CSS의 기능에 접근할 수 있도록 하기 위해, 문서의 내용은 DOM(Document Object Model)이라고 알려진 프로그래밍 모델에서 객체로 표현된다.

DOM API는 DHTML의 기반으로서, 문서의 사실상 모든 것에 접근하고 조작할 수 있는 구조화된 인터페이스를 제공한다.문서에 있는 HTML 요소는 개별 객체의 계층 트리로 사용할 수 있어 속성을 읽고 설정하며 호출 방법을 통해 요소와 그 속성을 검토하고 수정할 수 있다.요소 사이의 텍스트는 DOM 속성 및 메소드를 통해서도 이용할 수 있다.

또한 DOM은 키를 누르고 마우스를 클릭하는 등의 사용자 작업에 대한 액세스를 제공한다.이벤트 핸들러 기능과 루틴을 생성하여 이러한 이벤트와 다른 이벤트를 가로채 처리 할 수 있다.이벤트 핸들러는 주어진 이벤트가 발생할 때마다 제어권을 수신하며 DOM을 사용하여 문서를 변경하는 것을 포함하여 적절한 조치를 수행할 수 있다.

동적 스타일

동적 스타일은 DHTML의 주요 특징이며, CSS를 사용하면 요소를 추가하거나 제거하지 않고도 문서 내 요소의 모양과 형식을 빠르게 변경할 수 있다.이것은 문서를 작게 유지하고 문서를 빠르게 조작하는 스크립트를 유지하는데 도움이 된다.

객체 모델은 스타일에 대한 프로그램적 접근을 제공한다.이는 개별 요소에서 인라인 스타일을 변경할 수 있고 간단한 자바스크립트 프로그래밍을 사용하여 스타일 규칙을 변경할 수 있다는 것을 의미한다.

인라인 스타일은 스타일 특성을 사용하여 요소에 적용된 CSS 스타일 할당이다.개별 요소에 대한 스타일 객체를 검색하여 이러한 스타일을 검토하고 설정할 수 있다.예를 들어, 사용자가 마우스 포인터를 머리글 위로 이동할 때 머리글의 텍스트를 강조 표시하려면 다음의 간단한 예에서와 같이 스타일 오브젝트를 사용하여 글꼴을 확대하고 색상을 변경할 수 있다. 

<!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8"> <title> <dynamic Style></title> ul: none; } </style> <h1 id="first-header">Dynamic HTML</h1> 시작<a id="clickable-link" href="#"동적 스타일은 DHTML의 핵심 기능이다.</a></p><u id="unordered-list"><li>텍스트의 색상, 크기 및 서체를 변경한다.문자 표시 및 숨기기 그리고 훨씬 더 많은 것이 우리는 이제 막 시작했을 뿐이다!</p> <script> function showMe() { document.getElementById("first-header").style.color = "#990000"; document.getElementById("unordered-list").style.display = "block"; } document.getElementById("clickable-link").addEventListener("click", function (e) { e.preventDefault(); showMe(); }); </script> </body> </html>

참고 항목

참조

  1. ^ "Document Object Model FAQ". www.w3.org. Retrieved 2022-02-16.
  2. ^ "Web Style Sheets". www.w3.org. Retrieved 7 April 2018.

외부 링크

  • QuirksMode는 여러 브라우저에서 실행되는 DHTML 코드를 작성하는 방법에 대한 테스트 사례와 지침을 포함하는 종합 사이트다.
  • 소개 DHTML 자습서