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

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

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

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

Html

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

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

Html

<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 9.63, Firefox 2.0, Firefox 3.0에서만 위처럼 깨져서 나왔습니다. 나온 모양으로 봐서는 table-layout만 적용되고 word-wrap은 지원하지 않아서 저렇게 나온듯 합니다.

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

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

[CSS]CSS에서 font-size 사용에 대해서..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

html작업을 할 때 항상 신경쓰이는 것이 폰트이다. 별거 아닌것 같지만 작아졌다 커졌다. 가독성도 신경써야 하고 브라우저마다 다르게 보이고 CSS꼬이면 복잡해 지고 신경쓸 게 은근히 많다. 폰트도 중요하긴 하지만 여기선 일단 생략... 폰트가 어떻게 보이나를 좀 테스트 해 보았다. 나중에 일일이 테스트 해보지 않기 위해서..

Html

<head>
<style type="text/css">
        #size1 {font-size:10px;}
        #size2 {font-size:12px;}
        #size3 {font-size:14px;}
        #size4 {font-size:0.8em;}
        #size5 {font-size:1em;}
        #size6 {font-size:1.2em;}
        #size7 {font-size:x-small;}
        #size8 {font-size:small;}
        #size9 {font-size:medium;}
        #size10 {font-size:large;}
 </style>
</head>
<body>
    <div id="size1">This is a Test!! 테스트 중입니다. 10px</div>
    <div id="size2">This is a Test!! 테스트 중입니다. 12px</div>
    <div id="size3">This is a Test!! 테스트 중입니다. 14px</div>
    <div id="size4">This is a Test!! 테스트 중입니다. 0.8em</div>
    <div id="size5">This is a Test!! 테스트 중입니다. 1em</div>
    <div id="size6">This is a Test!! 테스트 중입니다. 1.2em</div>
    <div id="size7">This is a Test!! 테스트 중입니다. x-small</div>
    <div id="size8">This is a Test!! 테스트 중입니다. small</div>
    <div id="size9">This is a Test!! 테스트 중입니다. medium</div>
    <div id="size10">This is a Test!! 테스트 중입니다. large</div>
</body>

테스트를 위해 만든 소스이다. 예전에는 폰트 하면 다 px를 위주로 썼지만 웹표준 얘기가 거론되기 시작한 다음 부터는 em방식이 더 추천되는 것으로 느껴진다.

위 화면은 IE7에서의 화면인데 폰트 크기 설정에 맞게 적절하게 잘 보인다. 캡쳐는 IE7에서 했지만 대부분에 브라우저에서 특성에 따라 크기가 약간 차이가 있을뿐 거의 화면처럼 잘 보인다.(테스트한 브라우저는 IE6, IE7, Firefox2, Firefox3, Safari, Opera, Chrome이다. 물론 윈도우 환경에서...)




CSS는 특성상 상속을 받는다. 부모 엘리먼트에 지정된 속성은 하위 엘리먼트가 상속을 받는다. 그래서 전체적으로 먹이려는 스타일일수록 상위에서만 선언해 주면 된다. 여기서 폰트 단위의 설정이 중요한데 px의 경우 말그래로 절대값과 같다.(브라우저마다 똑같다는 얘기가 아니다.) 어디서 선언하든 10px는 10px의 크기이다. keyword의 경우도 해당 크기에 설정된 크기로 보여진다. 대신 em단위의 경우는 비율이다. 1em이 무조건 현재설정된 폰트의 크기이다. 0.8이면 80%작고 1.2면 현재보다 120%크게 나타난다. 다양한 상황에서 적절하게 크기차이를 줄수 있다는 것이다. 다만 em의 경우는 상속과적이 겹칠 경우에는 의도한 것과 다르게 중첩효과가 나서(0.8em에 또 0,8em이 된다는지 하는...) 크기가 아주 작아지거나 커질 수 있다.

위에서 말한대로 em을 많이 추천하는 데 사용하기가 좀 까다로운 em을 추천하는 이유는 크기 조절 때문이다. 브라우저에는 폰트 사이즈 조절 기능이 있다.(모르는 사람이 대부분인것 같지만...) 웹사이트는 인쇄물이 아니기 때문에 사용자가 편한대로 사용할 수 있어야 한다. 사용자가 눈이 나빠서 폰트를 좀 크게 설정해서 사용한다고 해서 문제가 되는 것도 아니고 이것 때문에 레이아웃이 약간 깨져도 잘못 된것도 아니다.  여기서 em을 추천할 때 px를 쓰면 IE에서 크기조절이 안된다는 이유를 꽤 많이 들어왔고 나도 em을 주로 사용했었는데 좀 테스트의 필요성을 느꼈다.

IE6에서의 화면이다. IE7에서 보다 좀 크게 보이는 이유는 폰트사이즈를 크게 했기 때문이다. 키워드 방식과 em방식은 폰트 조절에 맞추어서 크기가 좀더 커졌지만 px방식은 폰트 사이즈가 그대로인 것을 볼 수 있다. 폰트 사이즈는 당연하 사용자가 조절할 수 있어야 하는 기능이기 때문에 이부분은 상당히 중요하다. 테스트한 브라우저에서는 IE6을 제외한 모든 브라우저에서는 px방식 까지도 폰트사이즈 조절이 브라우저쪽에서 가능했다. 결론적으로 말하면 IE6의 유저가 상당히 있는 아직까지든 이부분을 고려해야 한다는 것이다.(XP의 서비스팩3에 IE7이 기본으로 들어가지 않은건 정말 아쉽다. ㅠ..ㅠ)

브라우저마다 약간의 특성 차이는 있었다. 확대/축소 단계가 아주 많은 브라우저도 있고 그보다는 약간 적은 단계를 가진 브라우저도 있었지만 사용하는데 큰 문제가 없을 정도의 단계는 다들 제공하고 있었다.

대부분의 브라우저는 위 화면처럼 폰트가 읽지 못할 수준까지도 줄어들었다.

다만 사파리에서는 위 화면처럼 특정 크기 이하로는 더이상 줄어들지 않았다. 이런 부분은 브라우저 개발의 의도에 따른 부분이고 이보다 더 작게 할수 있냐 없냐는 크게 중요한 부분이 아니기 때문에 전혀 신경을 쓸 것은 없다고 생각한다.



덧) 웹표준 책을 읽었더니만 갑자가 퍼블리싱에 대한 포스팅이 많아져버렸네.. ㅋㅋㅋㅋ