2. CSS(Cascading Style Sheets language)


  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 강좌
DHTML이란?
CSS
     - CSS정의방법
     - 적용우선순위
     - 텍스트관련속성
     - 텍스트간의설정
     - 여백 지정하기
     - 테두리지정하기
     - 색상 지정하기
     - 기 타
CSS그룹핑
     - 스타일시트그룹
     - 클래스
     - 사용자지정스타일
JSSS
     - 새로추가된JSSS객체
     - JSSS와CSS간의비교
Layer
     - Layer Tag의사용
     - Layer 세부사항
     - Explorer용Layer
Javascript와연동
동적인 변화
     - 텍스트/이미지변환
     - 위치 이동
동적 테이블
     - 동적테이블생성
     - 동적테이블정렬
기 타
     - Font Download
     - Filter
마치며

Copyright ⓒ 1997 ~, Deadfire Program Master