DHTML
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
1. 개요
DHTML은 HTML, CSS, 자바스크립트 등의 기술을 결합하여 웹 페이지를 동적으로 만드는 기술이다. 1990년대 후반, 웹 브라우저 간의 자바스크립트 호환성 문제 해결을 위해 W3C의 DOM 권고를 통해 발전했다. DHTML은 페이지 내 텍스트 및 이미지 애니메이션, 동적 콘텐츠 업데이트, 웹 애플리케이션 개발 등 다양한 기능을 제공하며, HTML 애플리케이션(HTA) 및 macOS 대시보드 위젯과 같은 기술의 기반이 되었다. 최근에는 브라우저 간 표준화가 이루어지면서 사용 빈도가 줄었지만, DOM을 활용한 사용자 인터페이스 개선 및 웹 애플리케이션 개발에 중요한 역할을 했다.
더 읽어볼만한 페이지
- HTML - Alt 속성
`alt` 속성은 HTML의 `img` 및 `area` 태그에서 이미지를 로드할 수 없을 때 대체 텍스트를 지정하며, 스크린 리더 및 SEO에 영향을 미치고, W3C 지침에 따라 이미지의 의미를 전달하거나 장식용 이미지는 빈 문자열로 지정해야 한다. - HTML - 폰트 패밀리 (HTML)
폰트 패밀리(HTML)는 CSS 스타일 시트, 인라인 CSS, HTML `font` 태그를 통해 웹 페이지 글꼴을 지정하는 방법으로, 사용자 기기에 설치된 글꼴에 따라 표현이 달라지며, CSS의 `font-family` 속성은 글꼴 모양을 식별하고 제네릭 폰트와 글꼴 대체 메커니즘을 통해 일관된 글꼴 표현을 가능하게 한다.
| DHTML | |
|---|---|
| 개요 | |
| 유형 | 웹 기술 |
| 개발 | 1990년대 후반 |
| 구성 요소 | HTML CSS JavaScript |
| 상세 정보 | |
| 정의 | 사용자 인터페이스를 동적으로 업데이트하는 기술 |
| 특징 | 상호 작용성 증가 애니메이션 효과 페이지 새로 고침 없이 콘텐츠 변경 |
| 주요 기술 | DOM (Document Object Model) JavaScript CSS |
| 활용 분야 | 웹 애플리케이션 웹 사이트 사용자 인터페이스 개발 |
| 장점 | 사용자 경험 향상 서버 부하 감소 빠른 응답 속도 |
| 단점 | 복잡성 증가 디버깅 어려움 보안 문제 가능성 |
| 역사 | 1990년대 후반, 넷스케이프와 마이크로소프트에서 처음 사용 |
| 표준화 | W3C에서 표준화 진행 |
| 접근성 | 접근성 고려하여 개발 필요 |
| SEO (검색 엔진 최적화) | SEO에 영향을 미칠 수 있으므로 주의 필요 |
| 관련 기술 | |
| Ajax | 비동기적인 데이터 교환 기술 |
| jQuery | JavaScript 라이브러리 |
| 웹 2.0 | DHTML을 기반으로 발전 |
| SPA | DHTML을 활용한 웹 애플리케이션 아키텍처 |
2. 역사적 배경
DHTML은 웹 브라우저의 발전과 함께 등장했다. 1998년 10월 월드 와이드 웹 컨소시엄(W3C)는 클라이언트 측 스크립트 언어와 HTML 문서의 완충재 역할을 하는 문서 객체 모델영어(DOM)을 권고했다. 이로 인해 DOM을 지원하는 새로운 브라우저(인터넷 익스플로러 5.0, 넷스케이프영어 6.0, 모질라 파이어폭스영어, 오페라영어 7.0 등)는 브라우저에 관계없이 하나의 코드로 HTML 문서를 참조하고 제어할 수 있게 되었다. 등장 초기에는 단순한 장식으로 사용되었지만, 2005년 Ajax 제창 전후로 웹 애플리케이션 구축 기법으로 널리 사용되게 되었다.
2. 1. 초기 발전과 문제점
1997년 당시에는 JavaScript|자바스크립트영어를 사용하여 HTML을 참조하고 제어하는 방식이 각 회사마다 통일되지 않아, 웹 브라우저마다 별도의 JavaScript|자바스크립트영어를 작성해야 했다. 이러한 상황을 타개하기 위해 1998년 10월 W3C는 클라이언트 측 스크립트 언어와 HTML 문서의 완충재 역할을 하는 문서 객체 모델영어(DOM)을 권고했다. 이로 인해 DOM을 지원하는 새로운 브라우저 (인터넷 익스플로러영어 5.0, 넷스케이프영어 6.0, 모질라 파이어폭스영어, 오페라영어 7.0 등)라면, 브라우저에 관계없이 하나의 코드로 HTML 문서를 참조하고 제어할 수 있게 되었다.2. 2. W3C 표준화와 해결
1997년 당시에는 JavaScript|자바스크립트영어를 사용하여 HTML을 참조하고 제어하는 방식이 각 회사마다 통일되지 않아, 웹 브라우저마다 별도의 JavaScript|자바스크립트영어를 작성해야 했다.[1] 이러한 상황을 타개하기 위해 1998년 10월 W3C는 클라이언트 측 스크립트 언어와 HTML 문서의 완충재 역할을 하는 문서 객체 모델(DOM)을 권고했다.[1] 이로 인해 DOM을 지원하는 새로운 브라우저(인터넷 익스플로러 5.0, 넷스케이프 6.0, 모질라 파이어폭스, 오페라 7.0 등)는 브라우저에 관계없이 하나의 코드로 HTML 문서를 참조하고 제어할 수 있게 되었다.[1] 등장 초기에는 응용 방법을 알 수 없어 단순한 장식으로 사용되었지만, 2005년 Ajax 제창 전후로 웹 애플리케이션 구축 기법으로 널리 사용되게 되었다.[1]2. 3. Ajax의 등장과 웹 애플리케이션 발전
1998년 10월 W3C는 클라이언트 측 스크립트 언어와 HTML 문서의 완충재 역할을 하는 문서 객체 모델(DOM)을 권고했다. 이로 인해 DOM을 지원하는 새로운 브라우저(인터넷 익스플로러 5.0, 넷스케이프 6.0, 모질라 파이어폭스, 오페라 7.0 등)라면, 브라우저에 관계없이 하나의 코드로 HTML 문서를 참조하고 제어할 수 있게 되었다. 등장 초기에는 응용 방법을 알 수 없어 단순한 장식으로 사용되었지만, 2005년 Ajax 제창 전후로 웹 애플리케이션 구축 기법으로 널리 사용되게 되었다.[1]3. DHTML의 구성 요소
DHTML은 웹 페이지를 동적으로 만들기 위해 HTML, CSS, 자바스크립트 및 문서 객체 모델(DOM)을 활용한다. 이러한 기술 조합은 다음과 같은 기능을 제공한다.[4][5]
- 문서 내 텍스트와 이미지에 애니메이션 적용
- 최신 뉴스, 주식 시세 등 데이터를 자동으로 업데이트하는 동적 디스플레이 포함
- 사용자 입력을 캡처하여 서버 전송 없이 처리, 확인 및 응답하는 양식 사용
- 롤오버 버튼 또는 드롭다운 메뉴 포함
DHTML은 1990년대 후반과 2000년대 초반 브라우저 기반 액션 게임 제작에도 사용되었으나, 브라우저 간 차이로 인해 어려움이 있었다. 이후 브라우저들이 웹 표준을 따르면서 DHTML 게임 설계가 쉬워졌고, 다양한 플랫폼에서 플레이할 수 있게 되었다.
하지만 최근 "DHTML"이라는 용어는 다양한 웹 브라우저 간 호환성 문제가 있는 관행 및 규칙과 관련되어 사용되지 않는 추세이다.
3. 1. HTML (HyperText Markup Language)
DHTML은 그 자체가 기술이라기보다는 HTML, CSS, 자바스크립트 세 가지 관련 기술이 결합된 결과물이다. 스크립트와 컴포넌트가 HTML 및 CSS의 기능에 접근할 수 있도록 문서의 내용은 문서 객체 모델(DOM)로 알려진 프로그래밍 모델에서 객체로 표현된다.[4]DOM API는 DHTML의 기반이며, 문서의 거의 모든 것에 접근하고 조작할 수 있는 구조화된 인터페이스를 제공한다. 문서의 HTML 요소는 개별 객체의 계층적 트리로 제공되므로, 속성을 읽고 설정하고 메서드를 호출하여 요소와 해당 속성을 검사하고 수정할 수 있다. 요소 사이의 텍스트도 DOM 속성과 메서드를 통해 사용할 수 있다.[5]
DOM은 또한 키를 누르거나 마우스를 클릭하는 것과 같은 사용자 작업에 대한 접근을 제공한다. 이러한 이벤트 및 기타 이벤트를 가로채 처리하려면 이벤트 핸들러 함수 및 루틴을 생성하면 된다. 이벤트 핸들러는 특정 이벤트가 발생할 때마다 제어 권한을 받으며, DOM을 사용하여 문서를 변경하는 것을 포함하여 적절한 작업을 수행할 수 있다.
3. 2. CSS (Cascading Style Sheets)
CSS(Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 담당한다. 동적 스타일은 DHTML의 핵심 기능이다. CSS를 사용하면 요소를 추가하거나 제거하지 않고도 문서의 모양과 형식을 빠르게 변경할 수 있다. 이렇게 하면 문서를 작게 유지하고 문서를 조작하는 자바스크립트 스크립트의 속도를 높일 수 있다.객체 모델은 스타일에 대한 프로그래밍 방식의 접근을 제공한다. 즉, 개별 요소의 인라인 스타일을 변경하고 간단한 자바스크립트 프로그래밍을 사용하여 스타일 규칙을 변경할 수 있다.
인라인 스타일은 `style` 속성을 사용하여 요소에 적용된 CSS 스타일 할당이다. 개별 요소의 `style` 객체를 검색하여 이러한 스타일을 검사하고 설정할 수 있다. 예를 들어, 사용자가 마우스 포인터를 제목 위로 가져갈 때 제목의 텍스트를 강조 표시하려면 `style` 객체를 사용하여 글꼴을 확대하고 색상을 변경할 수 있다. 다음은 간단한 예제이다.
```html
동적 HTML에 오신 것을 환영합니다
- 텍스트의 색상, 크기 및 글꼴 변경
- 텍스트 표시 및 숨기기
- 그리고 훨씬 더 많은 기능
이제 막 시작했습니다!
3. 3. 자바스크립트 (JavaScript)
자바스크립트는 웹 페이지의 동작과 상호작용을 제어하는 스크립트 언어이다. 1997년 당시에는 자바스크립트를 사용하여 HTML을 참조하고 제어하는 방식이 각 회사마다 통일되지 않아, 웹 브라우저마다 별도의 자바스크립트를 작성해야 했다.[4] 1998년 10월 W3C는 클라이언트 측 스크립트 언어와 HTML 문서의 완충재 역할을 하는 문서 객체 모델(DOM)을 권고했다. 이로 인해 DOM을 지원하는 새로운 브라우저(인터넷 익스플로러 5.0, 넷스케이프 6.0, 모질라 파이어폭스, 오페라 7.0 등)는 브라우저에 관계없이 하나의 코드로 HTML 문서를 참조하고 제어할 수 있게 되었다. 등장 초기에는 응용 방법을 알 수 없어 단순한 장식으로 사용되었지만, 2005년 Ajax 제창 이후 웹 애플리케이션 구축 기법으로 널리 사용되게 되었다.[5]3. 4. 문서 객체 모델 (DOM)
HTML, CSS, 자바스크립트가 웹 페이지의 요소에 접근하고 조작할 수 있도록 하는 인터페이스를 제공한다. DOM은 웹 페이지를 트리 구조로 표현하며, 각 요소는 객체로 표현된다. 개발자는 DOM을 통해 웹 페이지의 요소를 추가, 삭제, 변경하고, 사용자의 이벤트에 반응하는 동적인 웹 페이지를 만들 수 있다.[4]DOM API는 DHTML의 기반이며, 문서의 거의 모든 것에 접근하고 조작할 수 있는 구조화된 인터페이스를 제공한다. 문서의 HTML 요소는 개별 객체의 계층적 트리로 제공되므로, 속성을 읽고 설정하고 메서드를 호출하여 요소와 해당 속성을 검사하고 수정할 수 있다. 요소 사이의 텍스트도 DOM 속성과 메서드를 통해 사용할 수 있다.
DOM은 또한 키를 누르거나 마우스를 클릭하는 것과 같은 사용자 작업에 대한 접근을 제공한다. 이러한 이벤트 및 기타 이벤트를 가로채 처리하려면 이벤트 핸들러 함수 및 루틴을 생성하면 된다. 이벤트 핸들러는 특정 이벤트가 발생할 때마다 제어 권한을 받으며, DOM을 사용하여 문서를 변경하는 것을 포함하여 적절한 작업을 수행할 수 있다.[5]
1998년 10월 W3C는 클라이언트 측 스크립트 언어와 HTML 문서의 완충재 역할을 하는 문서 객체 모델|문서 객체 모델(DOM)영어을 권고했다. 이로 인해 DOM을 지원하는 새로운 브라우저(인터넷 익스플로러 5.0, 넷스케이프 6.0, 모질라 파이어폭스, 오페라 7.0 등)라면, 브라우저에 관계없이 하나의 코드로 HTML 문서를 참조하고 제어할 수 있게 되었다. 등장 초기에는 응용 방법을 알 수 없어 단순한 장식으로 사용되었지만, 2005년의 Ajax 제창 전후로 웹 애플리케이션 구축 기법으로 널리 사용되게 되었다.
4. DHTML의 활용
DHTML은 문서 객체 모델(DOM)과 페이지 스타일을 변경하여 다른 방법으로는 달성하기 어려운 페이지 효과를 추가할 수 있게 해준다. HTML, CSS 및 자바스크립트를 조합하면 다음과 같은 기능을 제공한다.[4]
- 문서 내 텍스트 및 이미지 애니메이션 적용
- 롤오버 버튼, 드롭다운 메뉴 구현
- 사용자 입력에 대한 즉각적인 피드백 제공 (폼 유효성 검사 등)
- 최신 뉴스, 주식 시세 등 데이터를 자동으로 업데이트하는 티커 또는 기타 동적 디스플레이 포함
"DHTML"이라는 용어는 최근 몇 년 동안 다양한 웹 브라우저 간에 잘 작동하지 않는 경향이 있는 관행 및 규칙과 관련되어 사용되지 않게 되었다.[5]
광범위한 DOM 접근을 지원하는 DHTML은 인터넷 익스플로러 4.0에서 처음 도입되었다. 넷스케이프 내비게이터 4.0에도 기본적인 동적 시스템이 있었지만, 모든 HTML 요소가 DOM에 표현되지는 않았다. DHTML 스타일 기술이 널리 퍼지면서 웹 브라우저 간의 기술 지원 정도가 달라 개발 및 디버깅이 어려웠다. 인터넷 익스플로러 5.0+, 모질라 파이어폭스 2.0+ 및 오페라 7.0+이 ECMAScript에서 상속된 공유 DOM을 채택하면서 개발이 더 쉬워졌다.
나중에 jQuery와 같은 자바스크립트 라이브러리는 브라우저 간 DOM 조작의 일상적인 어려움을 추상화했지만, 브라우저 간의 더 나은 표준 준수로 인해 이러한 필요성이 줄어들었다.
4. 1. 사용자 인터페이스 개선
DHTML은 문서 객체 모델(DOM)과 페이지 스타일 변경을 통해 다양한 시각적 효과를 구현하여 사용자 인터페이스를 개선한다. HTML, CSS, 자바스크립트를 조합하여 다음과 같은 기능을 제공한다.[4]- 문서 내 텍스트 및 이미지 애니메이션 적용
- 롤오버 버튼, 드롭다운 메뉴 구현
- 폼 유효성 검사 등을 통해 사용자 입력에 대한 즉각적인 피드백 제공
이를 통해 사용자 경험을 향상시킬 수 있다.
4. 2. 동적 콘텐츠 업데이트
DHTML을 활용한 HTML, CSS, 자바스크립트 조합은 다음과 같은 기능을 제공한다.4. 3. 웹 애플리케이션 개발
DHTML은 Ajax와 함께 웹 애플리케이션 구축 기법으로 널리 사용되었다.[4] 1990년대 후반과 2000년대 초반에는 DHTML을 사용하여 브라우저 기반 액션 게임을 만들기도 했지만, 브라우저 간의 차이로 인해 어려움이 있었다. 여러 플랫폼에서 게임이 작동하도록 많은 기술을 코드로 구현해야 했다. 이후 브라우저들이 웹 표준으로 수렴되면서 DHTML 게임 설계가 더욱 쉬워졌다. 이러한 게임은 모든 주요 브라우저와 임베디드 브라우저 컨텍스트를 지원하는 데스크톱 및 장치 응용 프로그램에서 플레이할 수 있다.[5]5. DHTML 기반 기술 및 응용
HTML 애플리케이션(HTA)과 Dashboard 위젯은 DHTML을 기반으로 하는 응용 기술이다. HTA는 Microsoft Windows|마이크로소프트 윈도우영어 환경에서 사용되며, 인터넷 익스플로러 5.0 이상에서 실행 가능하다. Dashboard 위젯은 Mac OS X v10.4 Tiger부터 지원되는 기술로, HTML, CSS, 자바스크립트를 사용하여 만들어진다.
5. 1. HTML Application (HTA)
HTML 애플리케이션(HTA)은 다이내믹 HTML 기능을 사용하여 Microsoft Windows|마이크로소프트 윈도우영어의 응용 프로그램을 제작하는 방식이다. 다이내믹 HTML의 등장으로 인터랙티브한 웹 페이지를 쉽게 만들 수 있게 되었는데, HTA는 이러한 방식을 일반적인 응용 프로그램 제작에 응용한 시도이다. HTA 제작은 단순히 HTML 파일의 확장자를 ".hta"로 변경하는 것만으로 가능하다. 다이내믹 HTML에 대한 HTA 고유의 확장으로는 `HTA:APPLICATION` 요소, ActiveX 및 로컬 파일에 대한 접근 제한이 없다는 점 등이 있다. 실행에는 Internet Explorer|인터넷 익스플로러영어 5.0 이상이 필요하다.HTA에서 다른 리소스에 HTTP 요청을 보낼 때, `HTTP_REFERER`로 HTA 파일 자체의 전체 경로를 사용하는 웹 브라우저가 존재하기 때문에, 파일의 전체 경로에 컴퓨터 계정 이름 등 숨기고 싶은 정보가 포함되어 있는 경우에는 주의해야 한다.
5. 2. Dashboard 위젯 (macOS)
Mac OS X v10.4 Tiger부터 '''Dashboard'''에 위젯이라는 소형 응용 프로그램을 실행할 수 있다. 위젯은 HTML, CSS, 자바스크립트를 사용하여 외관은 HTML과 스타일 시트로, 제어는 자바스크립트로 구현한다. 이는 Konfabulator라는 소프트웨어와 비슷하지만, Dashboard는 Mac OS X v10.3의 윈도우 목록 표시 기능인 Exposé의 확장이며, 위젯은 평소에는 숨겨져 있고 인터페이스 기술에 사용되는 마크업 언어가 다르다는 차이점이 있다. 자바스크립트 제어 패키지는 Sherlock 3의 후속 기술이며, 위젯 내부에서 네트워크 연결, 각 응용 프로그램 이벤트 전송, 응용 프로그램이나 셸 스크립트 실행 등이 가능하다.6. 예제
DHTML의 예시는 다음과 같다.
=== 텍스트 블록 표시/숨김 ===
HTML, CSS, 자바스크립트를 사용하여 사용자가 버튼을 클릭하면 텍스트 블록을 표시하거나 숨기는 예제이다.
=== 동적 스타일 ===
동적 스타일은 DHTML의 핵심 기능이다. CSS를 사용하면 요소를 추가하거나 제거하지 않고도 문서의 모양과 형식을 빠르게 변경할 수 있다. 이렇게 하면 문서를 작게 유지하고 문서를 조작하는 스크립트의 속도를 높일 수 있다.[1]
객체 모델은 스타일에 대한 프로그래밍 방식의 접근을 제공한다. 즉, 개별 요소의 인라인 스타일을 변경하고 간단한 자바스크립트 프로그래밍을 사용하여 스타일 규칙을 변경할 수 있다.[1]
인라인 스타일은 `style` 속성을 사용하여 요소에 적용된 CSS 스타일 할당이다. 개별 요소의 `style` 객체를 검색하여 이러한 스타일을 검사하고 설정할 수 있다. 예를 들어, 사용자가 마우스 포인터를 제목 위로 가져갈 때 제목의 텍스트를 강조 표시하려면 `style` 객체를 사용하여 글꼴을 확대하고 색상을 변경할 수 있다.[1]
6. 1. 텍스트 블록 표시/숨김
HTML, CSS, 자바스크립트를 사용하여 사용자가 버튼을 클릭하면 텍스트 블록을 표시하거나 숨기는 예제는 다음과 같다.```html
DOM 함수 사용하기
단락 표시
요청 시에만 표시되는 단락입니다.
문서의 일반적인 흐름은 계속됩니다.
```
이 코드는 사용자가 "단락 표시" 링크를 클릭하면 `toggle-me`라는 ID를 가진 단락을 표시하거나 숨기는 기능을 제공한다.
6. 2. 동적 스타일
동적 스타일은 DHTML의 핵심 기능이다. CSS를 사용하면 요소를 추가하거나 제거하지 않고도 문서의 모양과 형식을 빠르게 변경할 수 있다. 이렇게 하면 문서를 작게 유지하고 문서를 조작하는 스크립트의 속도를 높일 수 있다.[1]객체 모델은 스타일에 대한 프로그래밍 방식의 접근을 제공한다. 즉, 개별 요소의 인라인 스타일을 변경하고 간단한 자바스크립트 프로그래밍을 사용하여 스타일 규칙을 변경할 수 있다.[1]
인라인 스타일은 `style` 속성을 사용하여 요소에 적용된 CSS 스타일 할당이다. 개별 요소의 `style` 객체를 검색하여 이러한 스타일을 검사하고 설정할 수 있다. 예를 들어, 사용자가 마우스 포인터를 제목 위로 가져갈 때 제목의 텍스트를 강조 표시하려면 `style` 객체를 사용하여 글꼴을 확대하고 색상을 변경할 수 있다.[1]
다음은 간단한 예제이다.[1]
```html
동적 HTML에 오신 것을 환영합니다
- 텍스트의 색상, 크기 및 글꼴 변경
- 텍스트 표시 및 숨기기
- 그리고 훨씬 더 많은 기능
이제 막 시작했습니다!
참조
[1]
웹사이트
Document Object Model FAQ
https://www.w3.org/D[...]
2003-10-22
[2]
웹사이트
Web Style Sheets
http://www.w3.org/St[...]
1999-07-22
[3]
웹사이트
DHTML {{!}} A Quick Glance of DHTML with Components, Features, Need
https://www.educba.c[...]
2020-07-19
[4]
웹사이트
Fun and Games With DHTML
https://www.downes.c[...]
1999-08-18
[5]
서적
Beginning JavaScript with DOM Scripting and Ajax
https://link-springe[...]
Berkeley, CA: Apress
2022-05-30
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com