사용자의 요구에 의해 문서의 내용이나 외형을 동적으로 변화 시킬 수 있게 사용자와 서버간에 상호작용이 가능한 동적인 웹 문서를 작성하기 위해 DHTML을 사용.
*DHTML의 구성요소
1. 문서 객체 모델(DOM: Document Objeck Model)
2.스타일 시트(Style Sheet)
*스타일 시트 사용법
*DHTML의 구성요소
1. 문서 객체 모델(DOM: Document Objeck Model)
브라우저와 웹 페이지의 구성요소를 다루기 위해 브라우저의 내장 객체와 브라우저에서 표현되는 웹페이지의 텍스트,이미지,폼과 같은 각 요소에 이름을 지정 하여 이들 각각을 개체로 정의.
2.스타일 시트(Style Sheet)
문서의 물리적 스타일 정보를 논리적인 내용으로 부터 분리하여 별도로 정의하자는 것이 스타일 시트의 개념
ㄱ.내부 스타일 시트
ㄴ.외부 스타일 시트
ㄷ.라인 스ㅏ일 시트
ㄴ.외부 스타일 시트
ㄷ.라인 스ㅏ일 시트
3.레이어(Layer)
웹 페이지의 내용을 표현하기 위한 투명한 캔버스라 생각하면 된다.
4.스크립트 언어(Script Language)
웹 페이지에서 일어나는 이벤트를 받아들여 문서 객체 모델로 정의된 객체의 상태를 동적으로 변경.
*스타일 시트 사용법
(1) 내부 스타일 시트
형식)
<head>
<style type="text/css" or "text/JavaScript">
<head>
<style type="text/css" or "text/JavaScript">
</style>
</head>
</head>
ex)
-------------------------------------
<html>
<head>
<style type = "text/css">
H1 {background-color : yellow}
p {color : blue}
</style>
</head>
<body>
<H1> 배경을 노란색으로 </H1>
<P> 단락에서의 문자색을 파란색으로
</body>
</html>
---------------------------------------
-------------------------------------
<html>
<head>
<style type = "text/css">
H1 {background-color : yellow}
p {color : blue}
</style>
</head>
<body>
<H1> 배경을 노란색으로 </H1>
<P> 단락에서의 문자색을 파란색으로
</body>
</html>
---------------------------------------
(2) 외부 스타일 시트
스타일 시트 문서를 만들어 별도의 파일(.css)로 저장하고 링크해서 쓰는 방법.
형식)
<head>
<link rel = "stylesheet" type = "text/css" or "text/JavaScript"
href = "스타일 시트의 URL"
</head>
형식)
<head>
<link rel = "stylesheet" type = "text/css" or "text/JavaScript"
href = "스타일 시트의 URL"
</head>
(3)라인 스타일 시트
일반 태그에 스타일 을 지정하여 해당 태그가 적용되는 범위에 한정하여 스타일을 적용하기 위해 사용되는 방법.
형식)
<태그 style="속성:속성값">~</태그>
형식)
<태그 style="속성:속성값">~</태그>
ex)
-------------------------------------
<html>
<head>
<title>태그 내에서 스타일사용</title>
</head>
<body>
<H1 style = "background-color : yellow">노랑</H1>
</body>
</html>
---------------------------------------
-------------------------------------
<html>
<head>
<title>태그 내에서 스타일사용</title>
</head>
<body>
<H1 style = "background-color : yellow">노랑</H1>
</body>
</html>
---------------------------------------
'프로그래밍 > HTML' 카테고리의 다른 글
| 스타일 정의를 위한 속성 (0) | 2011.02.04 |
|---|---|
| 스타일 정의방법 (0) | 2011.02.03 |
| 자바스크립트를 이용한 HTML 문서 작성 (0) | 2011.02.03 |
| 멀티미디어 사용하기 (0) | 2011.02.03 |
| 입력 양식 만들기 (0) | 2011.02.03 |
