HTML - HTML로 만든 게시판 모양 깨짐 방지

게시판 모양 깨짐 방지

만약에 게시판에 글을 썼는데 게시판의 길이가 자동적으로 변하면 문제가 됩니다.

원래 모습

다음과 같이 변하면 좀 이상하겠죠?

 

그래서 TABLE의 특별한 옵션인

<td stype="word-break:break-all;">

을 사용하면

<tr>
    <td bgcolor=white colspan=4 style="word-break:break-all;">
        <font color=black>
        <pre><?=strip_tags($row[content]);?></pre>
        </font>
    </td>
</tr>

위와 같이 추가하고서 다시 글을 보면

똑같습니다. 이유는 pre 태그 때문입니다.

pre태그의 의미는 다음과 같습니다.

기본적으로 html 문서에서 <pre>태그는 "Line Break"를 의미하며, 강제적으로 줄바꿈을 할 때 사용합니다. 키보드의 엔터(Enter), 탭(Tab), 사이띄기(Space) 등을 무조건 공백 하나로만 취급합니다. 그러나 <pre> 태그안의 문자열드에 대해서는 원하는 곳에 지정한 문장을 배치할 수 있으며 원하는 만큼 공백을 줄수도 있고 복잡한 문장과 단락구조 자체를 쉽게 효현할 수 있습니다. <pre>태그를 사용할 때 주의점은 다른 태그를 안에 사용하지 말아야 한다는 것입니다.

그래서 이러한 pre 태그 대신에 PHP 함수중의 nl2br(New Line To BR)를 써줘야하는데 이것은 줄 바꿈 문자를 <BR> 태그로 바꾸는 것을 의미합니다.

그래서 수정된 소스는.

<tr>
    <td bgcolor=white colspan=4 style="word-break:break-all;">
        <font color=black>
        <?=nl2br(strip_tags($row[content]));?>
        </font>
    </td>
</tr>

위와 같이 수정이 됩니다.

이번에는 띄어쓰기가 제대로 되질 않았네요. pre 태그가 줄바꿈과 띄어쓰기를 둘 다 처리하게 되는데 nl2br 함수가 줄바꿈은 처리했지만 아직 띄어쓰기를 처리하지 못했습니다.

그래서 모든 띄어쓰기를 &nbspl(non breaking space) 라는 띄어쓰기를 의미하는 특수문자로 바꿔줘야합니다. 그래서 치환 함수인 str_replace 함수를 사용하도록 합시다.

다음과 같이 수정을 할 수 있습니다.

<tr>
    <td bgcolor=white colspan=4 style="word-break:break-all;">
        <font color=black>
        <?=nl2br(str_replace(" ", "&nbsp;", strip_tags($row[content])));?>
        </font>
    </td>
</tr>

결과화면을 보면

제대로 처리된 것을 알 수 있습니다.

만약에 이렇게 해도 안된다면 테이블의 길이를 지정을하고 고정을 시키는 옵션인 style="table-layout:fixed;를 써주시면 되겠습니다.

<table width=600 border=0 cellpadding=2 cellspcing=1 bgcolor=#777777 style="table-layout:fixed;">

소스 출처 : http://brown.ezphp.net/85