젊은리버럴: 새 문서: thumb '''DHTML'''(Dynamic HTML; 동적 HTML)은 정적 마크업 언어인 HTML과 클라이언트 기반 스크립트 언어(자바스크립트 같은) 그리고 스타일 정의 언어인 CSS를 조합하여 대화형 웹 사이트를 제작하는 기법을 의미한다. DHTML은 웹 브라우저 상에서 동작하는 응용 프로그램을 제작하는 데에도 쓰인다. 예를 들어 간편한 내비게이션을 위해...

2023-09-15T20:51:51Z

새 문서: thumb '''DHTML'''(Dynamic HTML; 동적 HTML)은 정적 마크업 언어인 HTML과 클라이언트 기반 스크립트 언어(자바스크립트 같은) 그리고 스타일 정의 언어인 CSS를 조합하여 대화형 웹 사이트를 제작하는 기법을 의미한다. DHTML은 웹 브라우저 상에서 동작하는 응용 프로그램을 제작하는 데에도 쓰인다. 예를 들어 간편한 내비게이션을 위해...

새 문서

[[파일:Dhtml-schema.png|thumb]]
'''DHTML'''(Dynamic HTML; 동적 HTML)은 정적 [[마크업 언어]]인 [[HTML]]과 클라이언트 기반 스크립트 언어([[자바스크립트]] 같은) 그리고 스타일 정의 언어인 [[CSS]]를 조합하여 대화형 [[웹 사이트]]를 제작하는 기법을 의미한다.

DHTML은 [[웹 브라우저]] 상에서 동작하는 응용 프로그램을 제작하는 데에도 쓰인다. 예를 들어 간편한 내비게이션을 위해 대화형 [[폼 (문서)|폼]](form)을 제작하거나 [[전자 학습]]에 사용되는 대화형 실습장을 만드는 데 이용될 수 있다. 완전히 브라우저에 포함되어 데이터베이스와 같은 서버측 지원이 없이 동작하는 DHTML 응용 프로그램을 때로 [[SPA]](Single Page Applications; 단일 페이지 응용 프로그램)라 부른다.

경쟁 기술로는 애니메이션을 위한 [[어도비 플래시]]나 [[자바 (프로그래밍 언어)|자바]], [[AJAX]], [[자바 애플릿|애플릿]], [[SVG]] 등이 있다(SVG는 아직까지 주요 웹 브라우저에서 잘 지원되지 않는다).

DHTML의 단점으로는 브라우저마다 기술 지원에 대한 편차가 있기 때문에 개발과 [[디버그]] 작업이 힘들다는 것과, 화면 크기가 다양하기 때문에 제한된 브라우저와 화면 크기 조합에만 최적화가 가능하다는 점이다. 최신 브라우저([[인터넷 익스플로러]] 5.0+, [[넷스케이프 (웹 브라우저)|넷스케이프]] 6.0+, [[오페라 (웹 브라우저)|오페라]] 7.0+)에서의 개발은 공통된 [[DOM]] 덕분에 이전보다 간편해졌다.

== 예 ==
=== 일반적인 DHTML의 예 ===
<syntaxhighlight lang="html5">
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DHTML example</title>
</head>
<body>
<div id="navigation"></div>

<script>
var init = function () {
myObj = document.getElementById("navigation");
// ... manipulate myObj
};
window.onload = init;
</script>


<script src="myjavascript.js"></script>
</body>
</html>
</syntaxhighlight>

=== 텍스트 추가 블록 표시 ===

<syntaxhighlight lang="html5">
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using a DOM function</title>
<style>
a {background-color:#eee;}
a:hover {background:#ff0;}
#toggleMe {background:#cfc; display:none; margin:30px 0; padding:1em;}
</style>
</head>
<body>
<h1>Using a DOM function</h1>

<h2><a id="showhide" href="#">Show paragraph</a></h2>

<p id="toggleMe">This is the paragraph that is only displayed on request.</p>

<p>The general flow of the document continues.</p>

<script>
changeDisplayState = function (id) {
var d = document.getElementById('showhide'),
e = document.getElementById(id);
if (e.style.display === 'none' || e.style.display === '') {
e.style.display = 'block';
d.innerHTML = 'Hide paragraph';
}
else {
e.style.display = 'none';
d.innerHTML = 'Show paragraph';
}
};
document.getElementById('showhide').onclick = function () {
changeDisplayState('toggleMe');
return false;
};
</script>
</body>
</html>
</syntaxhighlight>

== 외부 링크 ==
* [http://www.quirksmode.org/ QuirksMode] - 여러 운영체제에서 동작하는 DHTML 코드 작성에 대한 예제와 설명 등을 포괄한 사이트
* [https://web.archive.org/web/20050713024411/http://www.dhteumeuleu.com/ DHTML 데모]

{{자바스크립트}}
{{웹 인터페이스}}
{{ECMA스크립트}}

[[분류:HTML]]

{{퍼온문서|DHTML}}

DHTML - 편집 역사