1. DHTML이란 ?
Dynamic Hyper Text Markup Language의 약자이다. 홈페이지를 좀더 다이나믹하게 만들고자 고안해 낸 방법중 하나이다. Nevigator의 DHTML은 JSS라 불리고 Explorer의 DHTML은 CSS라 불린다.
JSS : javascript style sheet
CSS : cascade style sheet
2. DHTML의 특징
1) 태그들의 다양한 선택 속성들이 확장되었다.
2) 레이아웃기능이 추가되어 xy좌표를 지정하여 표시 할수 있다.
3) CGI등으로 처리해야할 일들을 각 클라이언트에서 처리하기 때문에 서버의 부하를 줄일수 있다.
4) 단점 : 아직 브라우저간의 지원 사항이 서로 달라 적용범위가 일부분으로 제한될 수 있다.
3. DHTML 선언하기
1) Head 태그안에서 선언하기
- <html>
- <head>
- <style>
- ...
- </style>
- </head>
- ...
|
2) 각 태그안에서 선언하기
3) 외부에 있는 스타일시트 파일 가져오기
|
첫 번째 방법
<head>
<link rel="stylesheet" href="파일명.css" type="text/css">
</head>
두 번째 방법
<style>
@import url("파일명.css");
</style> |
4. DHTML의 적용범위
- <style>
- p{font-size:20}
- div{color:blue}
- </style>
|
만약 <style>안에서 css를 선언할 때 특정 태그명으로 선언하면, 문서를 작성할 때 해당 태그의 일관성을 유지할 수 있다. |
- <style>
- .p{font-size:20}
- .dd{color:blue}
- </style>
|
“.”으로 시작하는 속성을 태그안에서 적용하려면 “class=id_name"을 지정해 주어야 한다.
<p class=p> ...</p> |
- <style>
- p.head{ ... }
- div.body{ ... }
- </style>
|
2행은 p태그의 class값이 head에게만 적용되고,
3행은 div태그의 class값이 body에게만 적용된다.
<p class="head"> ... </p>
<div class="body"> ... </div> |
1) 하나의 선언문에서 다중의 속성을 적용시키려면 속성과 속성을 “;”으로 연결해 준다.
2) <style>문을 <body>안에 삽입해도 그 결과는 동일하지만 통상적으로 <style>은 <head>안에 삽입한다.
3) class 대신에 id를 사용할 수도 있지만 class와 id와의 다른점은 id에 의해 정의된 변수값은 하나만 존재할 수 있고 class는 다중정의를 할 수 있다는 점이다.
5. 동일한 유형의 스타일시트가 적용될 때 그룹 짓기
만약 아래와 같이 스타일 시트가 적용될 때는 한번에 스타일 스트를 적용시킬수 있다.
- <style>
- p { color:red }
- div { color:red }
- a { color:red}
- </style>
라면 위의 정의 내용을 한번에
- <style>
- p, div, a { color:red}
- </style>
|
6. 스타일 시트 사용하기
1) Anchor 태그에 스타일 시트
- <style>
- a:link { ... }//기본적인 링크
- a:visited { ... }//가봤던 링크
- a:hover { ..; }// 마우스가 올라갔을때
- </style>
|
- <style>
- a:link {text-decoration: none;color:blue}
- a:visited {text-decoration: none;color:blue}
- a:hover {text-decoration: underline ;color:red}
- </style>
|
2) 글자 스타일 시트
- font-size : n
- color : #RGB
- font-weight : nomal / bold
- font-style : normal / italic
3) 크기 스타일 시트
4) 여백에 관한 스타일 시트
문단의 외부 여백을 지정할 수 있다.
|
키워드 |
설 명 |
|
margin |
문단 상/하/좌/우 의 여백 동시 지정 |
|
margin-top |
문단의 위쪽 여백 지정 |
|
margin-bottom |
문단의 아래쪽 여백 지정 |
|
margin-left |
문단의 왼쪽 여백 지정 |
|
margin-right |
문단의 오른쪽 여백 지정 |
5) 경계선의 스타일 시트
문단의 경계선의 두께나 폼의 경계선의 두께를 조절할 수 있다.
border : [두께 색상 선의 종류] 로 값을 주며 순서는 상관 없다. 이부분은
border:n(두께)
border-color:n
border-style:n(선의 종류)
와 같이 각각 값을 지정할 수도 있다.
(1) 세부지정
|
키워드 |
설 명 |
|
border : 두께 색상 선의 종류 |
문단 상/하/좌/우 동시 지정 |
|
border-top : 두께 색상 선의 종류 |
문단의 위쪽 지정 |
|
border-bottom : 두께 색상 선의 종류 |
문단의 아래쪽 지정 |
|
border-left : 두께 색상 선의 종류 |
문단의 왼쪽 지정 |
|
border-right : 두께 색상 선의 종류 |
문단의 오른쪽 지정 |
| border-width : n |
선의 두께 |
| border-color : #RGB |
선색 |
(2) 선의 형태
|
키워드 |
설명 |
키워드 |
설명 |
|
none |
선 없음 |
double |
이중선 |
|
hidden |
감춤 |
groove |
움푹 들어간 입체선 |
|
dotted |
점선 |
ridge |
튀어나온 입체선 |
|
dashed |
대쉬선 |
inset |
내용이 잠긴 느낌의 입체선 |
|
solid |
실선 |
outset |
내용이 튀어나온 느낌의 입체선 |
6) padding 스타일 시트
경계선과 본문 내용과의 간격 조정
|
키워드 |
설 명 |
|
padding |
상/하/좌/우 의 여백 동시 지정 |
|
padding-top |
위쪽 여백 지정 |
|
padding-bottom |
아래쪽 여백 지정 |
|
padding-left |
왼쪽 여백 지정 |
|
padding-right |
오른쪽 여백 지정 |
7) 바탕 스타일 시트
|
키워드 |
설 명 |
|
background-color : #RGB |
바탕색 |
| background-image : url(url) |
바탕 이미지 |
|
background-repeat : repeat / repeat-x / repeat-y / no-repeat |
반복 위치 |
|
background-attachment : scroll / fixed |
바탕 이미지의 스크롤 여부 |
|
background-position : [top / center / bottom ] [ left / center / right ]
background-position : [x y] [ x% y% ] |
이미지의 위치 |
8) list 스타일 시트
|
키워드 |
설 명 |
|
list-style-image : url(url) |
리스트의 기호 대신 사용할 이미지 |
|
list-style-position: inside / outside |
줄이 분리되었을 때 분리된 문자의 위치 |
출처 : http://blog.naver.com/valianty/130003480753 |
|
|
|
오렌지
