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> |
반응형
'인터넷정보' 카테고리의 다른 글
버튼 클릭으로 숫자를 증가/감소 시킵니다 (0) | 2007.10.17 |
---|---|
폼에서 숫자만 입력받기 (0) | 2007.10.17 |
폼에서 숫자만 입력받기 (0) | 2007.10.17 |
이뿐거... (0) | 2007.10.17 |
이뿐거... (0) | 2007.10.17 |
IE6.0에서 추가된 스타일 (0) | 2007.10.17 |
순서대로 포커스 주기 (0) | 2007.10.17 |
순서대로 포커스 주기 (0) | 2007.10.17 |
한글로 된 파일이 다운로드가 안됩니다. 또는 이미지가 X로 보일경우. (0) | 2007.10.17 |
한글로 된 파일이 다운로드가 안됩니다. 또는 이미지가 X로 보일경우. (0) | 2007.10.17 |