시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크 jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
> 커뮤니티 > 골드팁 상세보기
커뮤니티 구인구직
사이트등록
현재접속자 새로고침
게시판타이틀 골드팁 / 상세보기
트위터로 보내기 미투데이로 보내기 싸이월드 공감
추천수 397 | 조회수 10,982 | 등록일 2005-11-17 13:57:11

닉네임

HappyCGI

제목

[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 우리나라 만세 무궁화 삼천리 화려강산


아주 오래전 일인 것같은데... 이거 몰라서 얼마나 해맸는지 모릅니다.
별로 쓰일 곳이 없을 것같지만... 실제로 게시판 디자인 할때나 해상도에 따라서 유동적인 사이트를 제작할
때 유용하게 쓰일 수 있는 팁입니다.
추천스크랩소스보기 목록
이전게시글 [html] 가는 테이블 만들기 2005-11-17 13:55:28
다음게시글 [HTML] 스타일로 표현할 수 있는 여러가지 링크모양 2005-11-17 13:58:41