인터넷정보

IE6.0에서 추가된 스타일

알 수 없는 사용자 2007. 10. 17. 00:09

http://oxtag.com/html/ex/text22.html

1. min-height
웹 사이트를 개발할 때에 우선은 제대로 보여주는 것이지만 이제는 방문자가 기다리는 시간을 얼마나 짧게 하느냐도 신경을 써야 할것입니다.

<table border="1" style="table-layout:fixed; width:300;">
<tr><td style="height:103px; background-color:lightgreen">
여기는 테이블(td)의 높이를 height로 내용보다 작게 지정한 경우 입니다. 물론 table-layout을 fixed로 사용하는 경우입니다. 보통은 이 fixed를 지정하지 않고 자동(auto)으로 사용하는데, 편리하지만 무척이나 느립니다.
</td></tr>
<tr><td style="min-height:40px; background-color:lightblue">
여기는 테이블(td)의 높이를 min-heignt로 내용보다 작게 지정한 경우 입니다. 비록 table-layout을 fixed로 사용하였다 하더라도 적어도 안의 내용은 다 보여줍니다. 마치 table-layout을 auto로 사용한 것 처럼이요.
</td></tr>
</table>

2. text-overflow
박스나 테이블안에서 글이 너무길어 잘리는 경우가 발생할 수 있다.
이 경우에 쓰는 스타일로 새로 생긴 것이다.

매우 많은 태그에서 사용할 수 있으니 기억해 두는 것도 좋을 것입니다.
사용가는 태그: A, ACRONYM, ADDRESS, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, CUSTOM, currentStyle, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, hn, I, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, INS, ISINDEX, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, NOBR, OL, P, PLAINTEXT, PRE, Q, RT, RUBY, runtimeStyle, S, SAMP, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TEXTAREA, TT, U, UL, VAR, XMP

사용할 수 있는 값은 아래와 같다.
"clip"이 기본값으로 넘어가는 부분은 가차없이 잘라버린다.
"ellipsis" 요것때문에 새로 생긴 것으로 뒤에 생략기호(...)를 보여준다.



<b>style="text-overflow:clip; overflow:visible; width=120"</b>
<div style="width:120px; height:50px; border:1px solid blue; overflow:visible; text-overflow:clip">
<nobr>글이 만약 주어진 칸보다 길어서 잘리게 된다면 어떻게 보여질까요?</nobr>
</div><br>

<b>style="text-overflow:ellipsis; overflow:visible; width=120"</b>
<div style="width:120px; height:50px; border:1px solid blue; overflow:visible; text-overflow:ellipsis">
<nobr>글이 만약 주어진 칸보다 길어서 잘리게 된다면 어떻게 보여질까요?</nobr>
</div><br>

<b>style="text-overflow:clip; overflow:hidden; width=120"</b>
<div style="width:120px; height:50px; border:1px solid blue; overflow:hidden; text-overflow:clip">
<nobr>글이 만약 주어진 칸보다 길어서 잘리게 된다면 어떻게 보여질까요?</nobr>
</div><br>

<b>style="text-overflow:ellipsis; overflow:hidden; width=120"</b>
<div style="width:120px; height:50px; border:1px solid blue; overflow:hidden; text-overflow:ellipsis">
<nobr>글이 만약 주어진 칸보다 길어서 잘리게 된다면 어떻게 보여질까요?</nobr>
</div><br>

3.word-spacing

단어간의 간격을 조정합니다.

<style>
span.spacing{word-spacing: 10;}
</style>

<script>
function fnChangeSpace(){
oSpan.style.wordSpacing=oSelSpace.options[oSelSpace.selectedIndex].text;
}
</SCRIPT>

<select id="oSelSpace" onchange="fnChangeSpace()">
<option>1
<option>2
<option>7
<option selected>10
<option>15
<option>20
<option>25
<option>30
<option>35
</select>
<span id="oSpan" class="spacing">단어간에 간격을 원문을 수정하지 않고 조정하는 조정합니다. 잘 될까요?</span>  


반응형