아이디 비밀번호 | 회원가입 | 비밀번호분실
   
 새로운소식
 FAQ
 웹프로그램
 웹DB
 웹서버
 웹프로그램수정
 해피칼럼
 골드팁
 
제작의뢰
웹프로그램 판매몰
 
현재위치: 메인 해피포럼 황금 : 게시물 읽기
  2005-11-17 (13:57:11) from 211.199.40.171
  작성인 : HappyCGI 조회수 : 21397   
제목 : [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 우리나라 만세 무궁화 삼천리 화려강산


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



HappyCGI's SIGN
개발자의 미덕은

게으름(Laziness)
참지말기(Impatience)
교만(Hubris)


   메모

남겨진 메모가 없습니다.

:네맞아요: :화나는군요: :잠와: :우울해: :이건아냐: :왕하하: 왕웃음~ 놀램~

  

 
제목
작성인
조회
등록일
[HTML] word-break:break-all, nowrap 유용하게 쓰기
HappyCGI
21398
2005-11-17
 



  HOME | 회사소개 | 제작의뢰 | 개인정보취급방침 | CGIMALL | 자료실 | 사이트등록 | 랭킹100 | 포럼 | 초보가이드 | 질문과답변 | 배너광고
Copyrightⓒ1997~2008 HappyCGI All rights reserved
Powered By HappyCGI