DHTML을 잘 배우려면 가장 먼저 CSS에 대해서 배워야 한다. Cascading Style Sheets language(CSS)는
HTML문서가 가지고 있는 표현(Presentation)기능을 일반 출판물의 수준까지 끌어올리기 위한 보다 섬세한
HTML요소들의 조절기능을 가지게 해주는 기능이라고 말할 수 있다.
스타일 시트는 익스플로러 4.0이상과 네비게이터 4.0 이상에서 지원하고 있다. 즉,
글자의 크기나, 줄간격, 문서색상, 글자의 바탕색등 기존의 HTML에서 지원하지 못하던 일을 할
수 있게되는 것이다.
CSS의 사용함으로써 다음과 같은 장점을 가질 수 있다.
- HTML문서의 미세 조정 가능
- HTML문서의 다이나믹한 기능 추가 가능
- HTML문서와 별도의 CSS를 정의하여 전체 문서에 손쉽게 적용/변경가능.
- Javascript와 연동하여 Dynamic효과 극대화 가능
2.1 CSS 정의 방법
- 인라인 스타일 시트(inline style sheet)
HTML Tag자체에 스타일을 직접 기술하는 방식이다. 다음 예는 SPAN이라는 태그에
직접 Style을 지정하여 문자의 크기가 100 픽셀이 되도록 한예이다.
<span style="font-size: 100pt">
TEST
</span> |
TEST |
* 기본적인 HTML에서 지원하는 font의 크기는 최대값이 36pt이다. 위의
예에서 처럼 CSS를 이용하게 되면 기존의 HTML의 기능을 보다 확장할 수 있게 되는 것이다.
- 임베디드 스타일 시트(Embeded Style Sheets)
제일 쉽게 이해하려면, JavaScript의 <SCRIPT></SCRIPT>와 비교하는 방법이다.
해당 문서에 CSS를 지정하기 위해서는 별도의 추가된 태그 <STYLE></STYPE>라는 태그가
있고, CSS문법에 맞춰서 STYLE Tag에 기술하는 것이다.
이 Tag의 사용위치는 HEAD와 BODY사이에 넣는다. 혹시 style을 인식하지
못하는 브라우져를 위해서 HTML용 주석 <!-- -->을 넣어 주는 것이 좋다.
다음은 임베디드의 예이다. 보는 바와 같이 body라는 HTML Tag의 color와
backgroud속성을 지정해주는 것을 볼 수 있다.
<style type="text/css">
body { color: black; background: white; }
</style> |
* 이 예에서 보듯이 어떤 태그가 STYLE안에 들어갈 수 있고, 또, color나 background와 같은
속성들이 뭐가 있는지, 어떻게 지정하는지가 CSS를 배우는 키가 될 것이다.
이렇게 사용하게 되면 BODY라는 Tag가 기존의 HTML에 존재하는데, 이 특성이 해당 페이지 내부에서는
STYLE태그에서 지정한 데로, 바뀌게 된다. 즉, 다음과 같이 작성해 준다.
TAG명칭 { 속성: 값 ; ... }
- TAG명칭은 HTML사용되는 일반적인 TAG들이다. 즉, BODY, H1, P, HR, IMG,..
- 속성은 이미 정해져있는 단어들이 있는데 이 종류는 뒤에 자세히 기술하였다.
속성은 이미 정해진 단어들이므로, 대소문자는 물론 중간에 들어가는 하이픈('-')까지 정확히일치해야 한다.
- 값은 해당 속성의 값을 말하며, 이때 일부 값은 단위까지 명시하는 경우도 있다.
- 속성뒤에 반드시 콜론(:)이 오고 해당 값이 온뒤에 세미콜론(;)으로 종료한다.
- 외부 스타일 시트(External Style Sheet)
자바스크립트도 HTML문서안에 넣을 수도 있지만, 외부에 하나만 작성하고 이를 모든
HTML문서들이 불러서 사용했다. CSS도 이렇게 사용할 수 있는 기능이 있다.
확장자는 *.css이다. 위와 같은 내용을
style.css라고 저장했다고 하면, 현재의 문서에서 이 Style을 이용하고자 할때,
<LINK REL=stylesheet HREF="style.css" TYPE="text/css">
이렇게 작성하면 된다. * 일부 Web Server의 경우는 MIME type을 추가해 주어야 한다.
- Last Update : 2001.6.29 by Deadfire(http://www.deadfire.net)
|
DHTML이란?
CSS