[해피CGI][cgimall][HTML] word-break:break-all, nowrap 유용하게 쓰기

사실 기본적으로 제공되는 형태의 HTML태그만으로 사이트를 개발한다는 얘기는 제약을 상당히 많이
감수해야 한다는 얘기이기도 합니다.
특히 테이블태그에서 경우에 따라 지정한 <td></td>의 크기가 제멋대로 벗어나버리는 경우가 대표적이라
할 수 있겠습니다.
그렇다면 그 기본적인 제약에서 벗어날 수 있는 방법을 모색해 볼까요?

우선 제목에 열거한 녀석들의 기능을 알아보겠습니다.

word-break:break-all
- 하나의 문장을 띄어쓰기할 때 쓰인 공백 기준이 아닌 문자 하나하나를 단위로 끊어주는 역할을
하는 스타일속성입니다.
기본적으로 <td></td> 안에서 문장은 띄어쓰기의 공백을 기준으로 잘리기 때문에 100픽셀로 크기를
지정했다 해도 공백 없이 100픽셀을 넘어가는 단어가 들어올 경우 이를 무시하고 마구 늘어나게 됩니다.
이런 단어를 문자단위로 끊어주면 자동으로 100픽셀되는 시점에서 줄바꿈을 해주겠죠?

nowrap
- 그렇다면 반대의 경우도 있을 수 있을 겁니다. 특정경우에는 셀의 너비를 지정했다 해도 줄바꿈을 하지
않았으면... 싶을 때도 분명히 있겠죠. 그역할을 수행하는 HTML태그가 바로 nowrap 이며... <td>태그의
속성으로만 작동하는 태그입니다. 

아래는 두녀석들이 적당히 쓰인 예입니다.

#1. 강제 줄바꿈을 허용치 않음
--------------------------------------------------------------------------------------------------------
<table width="400" border=1>
  <tr>
    <td width="50%" nowrap>동해물과 백두산이 마르고 닳도록 하느님이</td>
    <td width="50%">우리나라 만세 무궁화 삼천리 화려강산</td>
  </tr>
</table>
--------------------------------------------------------------------------------------------------------
(결과)

동해물과 백두산이 마르고 닳도록 하느님이

우리나라 만세 무궁화 삼천리 화려강산

 

#2. 강제로 줄바꾸기
--------------------------------------------------------------------------------------------------------
<table width="400" border=1>
  <tr>
    <td width="50%" style="word-break:break-all">ooooooooooooooooooooooooooooooooo</td>
    <td width="50%">우리나라 만세 무궁화 삼천리 화려강산</td>
  </tr>
</table>
--------------------------------------------------------------------------------------------------------
(결과)

ooooooooooooooooooooooooooooooooo

우리나라 만세 무궁화 삼천리 화려강산

아주 오래전 일인 것같은데... 이거 몰라서 얼마나 해맸는지 모릅니다.
별로 쓰일 곳이 없을 것같지만... 실제로 게시판 디자인 할때나 해상도에 따라서 유동적인 사이트를 제작할
때 유용하게 쓰일 수 있는 팁입니다.