4. JSSS


  넷스케이프 4.0이상에서는 위에서 배운 STYLE Tag를 사용하여 문서의 형태를 지정하는 방식에 대한 또 다른 방식을 제공하는데 이것을 JSSS(JavaScript Style Sheet)라고 부른다.

 또한 기존의 자바스크립트와 문법적으로는 동일하지만, <SCRIPT></SCRIPT>부분에 구현하는 것이 아니라, <STYLE></STYLE>라는 태그 부분에 들어가는 것이 차이점이라면 차이점이다.( 익스플로러의 경우 4.0이상의 브라우저에서 일부 작동되는 것도 있기는 하다. )

    JSSS와 CSS   STYLE Tag에 의한 방식 이바로 CSS(Cascading Style Sheet)이다. JSSS란 것은 CSS에서 사용한 각종 속성들 즉, text-align이란 속성이 있을 때, 자바스크립트안에서 이 속성을 textAlign이라로 부르면서 값에 접근하게 된다. 이때 사용되는 문법을 JSSS(JavaScript Style Sheet)라고 부른 것 뿐이지, 사용자에게 보여지는 것은 동일하다.
4.1 새로 추가된 JSSS객체

  기존의 자바스크립트에서 제공되던 객체에 다음 몇가지 것들이 추가되어 CSS를 지원하게 된다. 3가지가 추가 되었다. 먼저 다음의 HTML문장을 한번 보자.

<P class="left" ID="p1"> 처음 문장 </P>
  • tag : 태그. HTML에서 사용되는 그 태그들을 말한다. 즉, <P></P>를 말한다.

  • class : 앞에서 P.left, P.right때 봤던 그 클래스를 말한다.

  • id : 최초에 SPAN태그를 설명하면서 잠깐 등장했었던 ID를 말한다. 즉 위에서 ID="p1"이라고 하면 그 문서에서 해당 ID로 유일하게 구분할 수 있게 되는 것이다.

    class   지금설명하고 있는 개념이 DHTML의 핵심개념이다! 즉 모든 Tag는 하나의 문서에 유일한 이름인 ID를 가지고 있어서, 스크립트에서 해당 ID의 속성을 자유롭게 바꾸어줄 수 있는 것이다. 또한, class는 속성을 묶어놓은 하나의 집합으로 보면 된다
  그래서 어쨌단 말인가? 일단 위에서 제공된 3개의 객체는 모두 document객체의 하위 객체들이다. 즉, 각 객체는 다음과 같이 접근할 수 있다.

  • tag : document.tags.H1, document.tags.P,....
  • class : document.classes.left...
  • id : document.ids.p1, .....
즉, 이렇게 위와같이 접근해서 속성을 바꾸면 되는 것이다. 아주 쉽다.

    브라우저 버전   지금 설명하고 있는 JSSS는 넷스케이프4.0 이상에서만 작동된다. 익스플로러의 예는 뒤에서 다시 보겠다.

- 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