Media Log

table-layout 속성 값에 대해

2009. 6. 11. 15:26 | ### 프로그래밍/Javascript/Css/Html
table-layout 속성을 이용하여 테이블 고정하기

table-layout 속성값을 fixed로 지정하면 셀안의 데이터가 길어서 지정한 너비 이상으로 셀을 밀어버리는 것을 방지합니다.

보통 셀안의 내용이 한글인 경우 공백이 중간 중간에 들어가므로 자동으로 지정한 너비에서 줄바꿈이 일어납니다.

<table width="200" cellpadding="5" cellspacing="2" border="1" align="center">
<tr>
    <td>셀안의 데이터가 한글인 경우 지정한 셀의 크기에 따라서 자연스럽게 줄바꿈이 일어납니다.</td>
</tr>
</table>

테이블의 너비가 200픽셀로 셀안의 내용에 비해서 좁더라도 아래와 같이 자연스럽게 줄바꿈이 일어납니다.

셀안의 데이터가 한글인 경우 지정한 셀의 크기에 따라서 자연스럽게 줄바꿈이 일어납니다.

반면 홈페이지 주소와 같이 영문으로 공백이 없는 경우는 셀을 밀어버리는 현상이 발생합니다.

<table width="200" cellpadding="5" cellspacing="2" border="1" align="center">
<tr>
    <td>http://www.homejjang.com/09/border_collapse.php</td>
</tr>
</table>

위의 테이블과 똑같이 200픽셀로 너비를 지정했음에도 테이블이 밀려나는 걸 확인할 수 있습니다.

http://www.homejjang.com/09/border_collapse.php

table-layout 속성값을 fixed로 지정하면 테이블의 너비가 200픽셀로 고정됩니다.

<table width="200" cellpadding="5" cellspacing="2" border="1" align="center" style="table-layout:fixed;">
<tr>
    <td>http://www.homejjang.com/09/border_collapse.php</td>
</tr>
</table>

그러나 아래와 같이 200 픽셀까지만 보이고 그 이상은 화면에 출력되지 않는 현상이 발생합니다.

http://www.homejjang.com/09/border_collapse.php

줄바꿈이 일어나게 할려면 word-break:break-all; 속성을 추가적으로 지정해 주면 됩니다.

<table width="200" cellpadding="5" cellspacing="2" border="1" align="center" style="table-layout:fixed; word-break:break-all;">
<tr>
    <td>http://www.homejjang.com/09/border_collapse.php</td>
</tr>
</table>

그러면 아래와 같이 테이블은 고정되고 자연스럽게 줄바꿈이 일어납니다.

http://www.homejjang.com/09/border_collapse.php

/

자바스크립트 문자를 숫자로

2009. 6. 1. 12:31 | ### 프로그래밍/Javascript/Css/Html
문자를 숫자로 -> parseInt("문자")
/

정규식을 이용한 자바스크립트 replace

2009. 6. 1. 11:40 | ### 프로그래밍/Javascript/Css/Html

정규식을 이용한 자바스크립트 replace
replace(/a/gi,'b')
해당 문자열의 a문자를 b로 전부 바꾼다.

/

숫자에 콤마 집어넣기, 천단위마다.

2009. 6. 1. 11:12 | ### 프로그래밍/Javascript/Css/Html
천단위마다 숫자에 콤마 집어넣는 함수

function commify(n)
  {
   var reg = /(^[+-]?\d+)(\d{3})/;   // 정규식
   n += '';                          // 숫자를 문자열로 변환
   
   while (reg.test(n))
   n = n.replace(reg, '$1' + ',' + '$2');
   
   return n;
  }

숫자를 입력하고 나서 한번에 변환 시켜준다.
만약 숫자를 한개씩 입력할때 마다 체크해주고 싶으면 천단위에 콤마가 붙기때문에
숫자가 한개씩 입력 될때 , 콤마를 replace로 없에준 다음 실행해주면 된다. 함수를 호출 하면된다.
/

showModalDialog 메소드

2009. 5. 11. 11:32 | ### 프로그래밍/Javascript/Css/Html

문법

vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])

파라메타 값

sURL : 디스플레이될 웹페이지의 url

vArguments (선택사항)

다이얼로그 박스로 넘겨줄 값

메세지 박스에서는 document.write(window.dialogArguments) 이런 형태로 값을 찍어주면 됩니다.

sFeafures

dialogHeight:sHeight - 다이얼로그 창의 높이를 지정

dialogLeft:sXPo - 창의 왼쪽에서 부터의 위치

dialogTop:sYPos - 창의 상단에서의 위치

dialogWidth:sWidth - 다이얼로그 창의 길이를 지정

center:{ yes | no | 1 | 0 | on | off } - 위치를 지정하지 않을경우 창의 위치를 중앙에 놓을지 여부

help:{ yes | no | 1 | 0 | on | off } - 도움말 보이기/보이지 않기

resizable:{ yes | no | 1 | 0 | on | off } - 창크기변형을 할수 있나 없나

scroll:{ yes | no | 1 | 0 | on | off } - 스크롤바의 유/무

status:{ yes | no | 1 | 0 | on | off } - 상태바를 표시/표시안함

/

티스토리툴바