Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

띄어쓰기 없을 경우 테이블 레이아웃 깨지지 않게 하기

이제 웹표준에 대한 인식도 전보다는 나아진 편이긴 하지만 아직도 테이블 레이아웃은 많이 사용되고 있고 DIV + CSS형태로 코딩을 한다고 하더라도 게시판부분에 한해서는 table태그를 아직은 많이 쓰고 있는 편입니다. 사실 상황에 따라서는 편한 부분이 있는 것도 사실이고 레이아웃 전체를 테이블로 잡는 것이 안좋다는 거이지 테이블 사용자체를 막는 것은 아니기 때문에 게시판의 경우에는 쓰일 수도 있다고 생각하고 있습니다.

어쨌든 그런 논란에 대해서 얘기하고자 하는 것은 아니고 게시판에서 테이블 레이아웃을 사용할 경우 글이나 코멘트같은 경우는 사용자한테 입력을 받는 데 이럴 경우 사용자가 띄어쓰기를 하지 않고 글을 쓸 경우 테이블 레이아웃이 깨지는 문제가 있습니다. 아래와 같은 경우입니다.


<table width="200px" border="1">
    <tr>
        <td style="width:120px">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td style="width:80px">fefefe</td>
    </tr>
</table>

가로로 늘어난 깨진 테이블

흔한 경우는 아니지만 사용자의 입력을 조정할 수도 없으니 이렇게 될 경우 레이아웃이 깨져버리게 됩니다.  띄어쓰기가 있을 경우는 단어별로 줄바꿈이 자동으로 되지만 위처럼 띄어쓰기 없어서 하나의 단어로 브라우저가 하나의 단어로 인식하면 위처럼 width를 120px로 지정하였음에도 400px도 넘어가게 늘어났습니다. 예쁘게 디자인된 페이지라면 다른 부분까지도 다 밀려서 보기 흉하게 되어버리지요.


<table width="200px" border="1" style="table-layout: fixed; word-wrap:break-word;">
    <tr>
        <td style="width:120px">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td style="width:80px">fefefe</td>
    </tr>
</table>

위처럼 테이블에 스타일을 주어서 해결할 수 있습니다. table-layout을 fixed로 고정시키고 word-wrap에 대한 속성을 break-word로 지정하였습니다. 하지만 CSS 2.1 Specification을 보면 table-layout에 대한 속성은 정의되어있지만 word-wrap에 대한 속성은 정의되어 있지 않습니다. word-wrap는 CSS 2표준이 아니라는 이야기이지요. 이 속성은 IE에서 지원하는 속성으로 알고 있습니다.

이렇게 스타일을 주면 아래처럼 지정된 width이상이 되면 자동으로 줄바꿈이 되어 테이블의 레이아웃이 깨지지 않습니다.

깨지지 않은 테이블

word-wrap이 CSS표준도 아니지만 테스트 해 본 결과 IE외에도 꽤 많은 브라우저가 지원하고 있었습니다. IE 6, IE 7, IE8은 당연히 지원되고 Firefox 3.5, Safari 4, Google Chrome 2.0에서 모두 정상적으로 잘 나왔습니다.

레이아웃이 깨진 Opera와 Firefox 2.0, 3.0

제가 테스트해본 결과로는 Opera 9.63, Firefox 2.0, Firefox 3.0에서만 위처럼 깨져서 나왔습니다. 나온 모양으로 봐서는 table-layout만 적용되고 word-wrap은 지원하지 않아서 저렇게 나온듯 합니다.

위에 보듯이 완전한 해결책은 아니라고 할 수 있습니다. 지원안되는 브라우저도 있고 표준속성도 아니기 때문입니다. 다만 IE유저에 비해서 업데이트를 충실하게 해준다고 볼 수 있는 타 브라우저에서 FF 2.0이나 FF 3.0은 과거 버전이라서 다행이라고 할 수 있지만 Opera에서 안되는 것은 약간 아쉽네요.

제가 퍼블리셔가 아니라서 아직 명확한 해결책은 못찾았네요. 더 좋은 방법이 있으시면 알려주시면 감사하겠습니다.
2009/08/21 02:37 2009/08/21 02:37