Trio 홈페이지 Javascript로 CSS 자동으로 만들어 표현하기 예제 예제 메뉴로



style sheet를 만드는데 필요한 { 와 } 는 일반적인 방식으로 표현할 수 없으므로 unescape()기능을 사용하여야 한다.
{ 는 unescape('%7B')
} 는 unescape('%7D')
그 외에는 특별히 다를 것이 없다.



</head>
..

<script Language="Javascript">
fnumb=70;
tnumb=200;
step=10;
document.write ('<style type="text/css">');
for (var i=fnumb; i <= tnumb; i+=step) {
 document.write('.f'+i+unescape('%7B')+'font-size:'+i/100+'em;'+
    unescape('%7D')+'  ');
}
document.write('</style>');
</script>


</head>



<body>
..
<img src="../gif/rfexample.gif" border=0><br>
<script Language="Javascript">
str='적용되는 HTML 자체 부터가 다소 다릅니다.'+
  ' tag가 Netscape과 Explorer가 틀리고 version에 따라서도 다르기 때문에 '+
  '사용 하고저 하는 브라우저에서 잘 작동이 되도록 주의를 기울여야 한다.';

document.write ('str="'+str+
  '"(<font color=blue>Default</font>)<br><ul class=ball>');
for (var i=fnumb; i <= tnumb; i+=step) {
  document.write('<li><div class="f'+i+'">'+str+' (.f'+i+'=<font color=red>'+
    i/100+'em</font>)</div>');
}
document.write('</ul>')
</script>


..
</body>
1.0em이란 그 해당 위치에서 default 글자의 100% 크기를 말하므로 1.1em을 110%로 표히하여도 된다. 절대 단위를 지정하려면 10pt; 등으로 표시하는데 다른 글자크기에 영향을 주는 요소가 작용되지 않은 디폴트 글자에서 일반적으로 10pt이다. 영향을 받지 않게 하려면 pt를 사용하는 것이 좋다.

예를 들어 위 f200(2em)의 경우 그 안에서의 변화를 보면;
<div class=f200>class=f200<span class=f200>class=f200</span></div>의 결과
class=f200class=f200
<div class=f200>class=f200<span style="font-size:20pt;">class=f200</span></div>의 결과
class=f200class=f200
왼쪽이 크다면 디폴트 크기가 이미 크게 설정되어 있다는 것이다.
번역문 소유자 - Trio 홈페이지 제공 이 문서(http://trio.co.kr/webrefer/csex/cxbuld.html)는
자유로이 연결 사용이 가능함.		 예제 메뉴로