블로그 이미지
좋은느낌/원철
이것저것 필요한 것을 모아보렵니다.. 방문해 주셔서 감사합니다..

calendar

  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      

Notice

    2008.10.17 16:58 Web
    nowrap 과 TABLE-layout ( 테이블 고정 태그) HTML  
    TABLE 넓이 고정테그
    style="table-layout:fixed;" -> 상하좌우 모두 고정

    ● 테이블 크기와 관계없이 늘어나게
    <td width="115" nowrap>  

    --------------------------------------------------------------------------------------
    긴 문자열을 줄바꿈이 되지 않고 테이블의 길이에 맞게 보이도록해서 마치 테이블 길이에 맞게 글자를 자른것처럼 효과를 냅니다.
    테이블 태그에 style="table-layout:fixed"를 넣어주고 적용할 TD 태그에 nowrap 옵션을 넣어줍니다.

    <table border='0' cellpadding='0' cellspacing='0' width='200' style="table-layout:fixed">
      <tr>
        <td width="15"><img src="images/folder_s03_06.gif" align="absmiddle"></td>
        <td style="text-align:justify;" nowrap>긴 문자열을 줄바꿈이 되지 않고 테이블의 길이에 맞게 보이기</td>
      </tr>
    </table>

    ---------------------------------------------------------------------------------------

    ● 가이드 라인 잡기(table-layout:fixed)

    코 딩을 할 테이블을 이용해서 위치를 잡지 말라고 합니다. 레이어를 이용해서 위치를 잡으라는 것이죠. 외국 사이트 중에 이렇게 한 곳이 있기는 한 것 같습니다. 하지만 대부분의 사이트들이 테이블을 이용해서 위치를 잡아서 코딩을 하죠.
    저 또한 대부분 테이블을 사용합니다.
    그리고 페이지를 코딩하는데 테이블을 워낙 많이 사용하기 때문에 테이블에 대한 Tip을 알아 두면 좋으리라 생각합니다.

    <table style="table-layout:fixed">

    이 것을 사용하는 방법을 익혀 두시면 아주 좋을 것 같습니다. 이 코드를 사용하는 대부분은 일정 크기를 벗어나지 않게 하는데에서인 것 같습니다. 이 코드는 테이블의 크기를 고정 시켜 주기 때문에 글자들이 많이져도 테이블을 늘어나지 않고 글자가 잘려 집니다.

    하 지만 이 코드의 진정한 기능은 최적화에 있습니다. 테이블을 고정시키기 때문에 브라우저에서 계산을 하지 않고 코드에 있는 그대로의 크기를 읽습니다. 그래서 부하를 줄여 줍니다. 수백 수천 라인에서 이 코드를 사용하고 하지 않고 비교해 보면 알 수 있을 것입니다.

    마지막으로 이 코드는 padding과 연관해서 아주 유용합니다.

    테이블에서 td가 2개 이상일 때 한 td에 width=100  style=padding-left:20을 주었다고 하면 실제 td의 width는 120이 됩니다. 하지만 위의 코드를 사용하면 width에 padding이 영향을 미치는 일은 없을 것입니다.

    요약하면,

    table-layout:fixed는 이렇기 때문에 유용합니다.

    1. 부하를 줄여줍니다. 페이지 전환이 빠르겠죠.
    2. width가 padding의 영향을 받지 않기 때문에 쉽고 정확한 코딩이 가능합니다.
    3. 내용에 의해서 테이블이 늘어나지 않습니다. 게시판 유형에서 유용할 것 입니다
    posted by 좋은느낌/원철

    티스토리 툴바