4. JSSS


4.2 JSSS와 CSS간의 비교

  CSS로 작성된 문서는 JSSS로 대부분 똑같이 표현할 수 있다. 둘다 각각 장단점이 있기 때문이 어느것이 더 좋은 방식이라고 말하기는 어려우나, 현재로선 CSS를 배워두는 것이 더 좋을 듯하다. 왜냐하면 두 브라우저에서 다 작동하는게 CSS이고 JSSS는 네비게이터에서만 작동이 되기 때문이다.

  다음은 동일한 모양을 CSS와 JSSS로 작성해본 것이다. 물론 CSS의 경우는 Explorer에서, JSSS는 네비게이터에서 봐야만 한다.

CSS로 작성된 문서Explorer <HTML>
<HEAD>
<TITLE>CSS Style</TITLE>
</HEAD>
<STYLE type="text/CSS"><!--
BODY {margin-left: 0.75in; margin-right: 0.75in; margin-top: 0.10in}
H1, H2 {font: verdana, helvetica, arial, san-serif normal}
H1 {font-size:18pt; text-align:left}
H2 {font-size:14pt; text-align:right}
P {font:garamond 12pt/11pt normal}
P.left {text-align:left}
P.right {text-align:right}
A {text-decoration: none; font-weight: bold}
--></STYLE>

<BODY bgcolor="#ffffff">
<H1>H1 문장입니다.</H1>
<P>처음 문장으로 다음 <A href="test.html" title="test">
연결</A> 을 누르면 test.html로 이동합니다.</P>
<H2>H2문장입니다.</H2>
<P>두번째 문장으로 다음 <A href="test.html" title="test">연결</A> 을 누르면 test.html로 이동.</P>
</BODY>
</HTML>
JSSS로 변환한 문서 Netscape <HTML>
<HEAD>
<TITLE>JSSS Style</TITLE>
</HEAD>
<STYLE type="text/javascript"><!--
with (tags.BODY) {
   marginLeft = ".75";
   marginRight = ".75";
   marginTop = ".10";
}
function eval_Heading(thisTag) {
   thisTag.fontFamily = "verdana, helvetica, arial, sans-serif";
   if (thisTag == tags.H1) {
      thisTag.fontSize="18pt"; }
   else
      if (thisTag == tags.H2) {
         thisTag.fontSize="14pt"; }
}
tags.H1.apply = eval_Heading(tags.H1);
tags.H2.apply = eval_Heading(tags.H2);
with (tags.P) {
   fontFamily = "garamond, serif";
   fontSize = "12pt";
}
classes.left.all.textAlign = "left";
classes.right.all.textAlign = "right";
with (tags.A) {
   textDecoration = "none";
   fontWeight = "bold";
}
// --></STYLE>

<BODY bgcolor="white">
<H1 class="left">H1문장입니다.</H1>
<P class="left">다음의 <A href="test.html" title="test">
연결</A> 을 누르면 test.html로 이동합니다.</P>

<H2 class="right">H2문장입니다.</H2>
<P class="right">두번째 문장으로 다음의 <A href="test.html" title="test">연결</A> 을 누르면 test.html로 이동합니다.</P>
</BODY>
</HTML>


  봐서 알겠지만, 아무래도 Netscape에서 JSSS를 이용하는 것은 무리다. 코딩량부터 많은 데다가, 이해하기가 난해해서, 일반 디자이너들이 구현하기에는 벅찬 부분이다.

- 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