이건없지

[파일 : iepngfix.htc]

<public:component>
<public:attach event="onpropertychange" onevent="doFix()" />

<script type="text/javascript">
if (typeof blankImg == 'undefined') var blankImg = '/Common/blank.gif';
var f = 'DXImageTransform.Microsoft.AlphaImageLoader';

function filt(s, m) {
    if(filters[f]) {
        filters[f].enabled = s ? true : false;
        if (s) with (filters[f]) { src = s; sizingMethod = m; }
    }
    else if(s) {
        style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'");';
    }
}

function doFix() {
    if(!/MSIE (5\.5|6\.)/.test(navigator.userAgent) || (event && !/(background|src)/.test(event.propertyName))) return;
    var bgImg = currentStyle.backgroundImage || style.backgroundImage;
    if(tagName == 'IMG') {
        if((/\.png$/i).test(src)) {
            if(currentStyle.width == 'auto' && currentStyle.height == 'auto')
                style.width = offsetWidth + 'px';
                filt(src, 'image');
                src = blankImg;
        }
        else if(src.indexOf(blankImg) < 0) filt();
    }
    else if(bgImg && bgImg != 'none') {
        if(bgImg.match(/^url[("']+(.*\.png)[)"']+$/i)) {
            var s = RegExp.$1;
            if(currentStyle.width == 'auto' && currentStyle.height == 'auto')
                style.width = offsetWidth + 'px';
                style.backgroundImage = 'none';
                filt(s, 'crop');
            for(var n = 0; n < childNodes.length; n++)
                if(childNodes[n].style) childNodes[n].style.position = 'relative';
        }
        else filt();
    }
}
doFix();

</script>
</public:component>

설명> 이 소스를 iepngfix.htc 파일로 만든다.

[파일:css에서 호출]

<style type="text/css">
.png24 { behavior: url('./iepngfix.htc'); }
</style>

설명> 이 소스를 처럼 iepngfix.htc 파일을 css로 호출해서 사용한다.

css table cellspacing, cellpadding을 css로 사용하기

<table cellpadding="0" cellspacing="0" border="0">
위 소스 중 cellpadding="0" cellspacing="0"을 css에서 사용하려면
다음과 같이 한다. 

1>
table{border-collapse:collapse;}
=> 이렇게 하는 경우 약간의 여백들이 생기게 된다. 

2>
table {padding:0; border-spacing:0px; border:0; border-collapse:collapse;}
th, td {padding:0px;}

미로 게임 한 판 하세요.

alt, title의 차이?


1. alt(alternative) : '이미지의 대안, 이미지에 대한 설명'이라고 보시면 됩니다. 용도는
① 인터넷 속도, 또는 컴퓨터 사양 문제로 웹브라우저 설정을 '이미지 출력 안 함'으로 한 사용자에게 이미지에 대한 간략한 설명을 볼 수 있음. (데스크탑이 아닌 모바일기기로 접속시에도 유용함.)
② 시각장애인의 웹서핑시 사용하는 리더(reader) 프로그램이 텍스트는 읽어주나, 이미지는 읽을 수 없으므로 alt태그 안의 설명을 읽어줌.
③ 일반인 웹서핑시 인터넷 접속 등의 문제로 해당 이미지를 불러오지 못했을 때, 배꼽과 함께 이미지 설명을 보여줌.

2. title : 이미지 위에 마우스 포인터를 올려 놓았을 때 풍선 도움말처럼 뜨게 함.
① 이미지뿐 아니라, a태그, span태그, td태그 등 거의 대부분의 태그에 사용할 수 있고, '클릭하시면 다음 사진으로 바뀝니다.' 등의 간단한 풍선도움말 형식을 사용할 수 있음. 특히 웹표준에서는 a태그에 title 속성은 필수항목임. 링크주소에 대한 설명을 넣어, 링크주소에도 의미를 부여할 수 있음.
② 터치스크린 모바일기기에서 웹브라우징시에는 a링크 또는 이미지에 마우스 포인터를 올려놓을 수 없으므로, 한 번 터치시 title내용을 보여주고, 두 번 터치시 해당 링크로 접속이 됨.
③ 일반적인 게시판 리스트 페이지에서 게시물 제목을 일정 길이로 잘랐을 때, title속성에 전체 제목을 넣어주면, 해당 게시물을 클릭할 필요 없이 마우스 오버만으로 전체 제목을 볼 수 있음.

IE에서 alt속성의 내용을 마우스 오버시 보여줌으로 인해 alt와 title의 구별에 혼동을 주곤 하지만, alt와 title은 용도와 기능 면에서 확실히 다른 속성이다.

색상 코드 표

아스키 코드표
 

[javascript-tip][ie7,ff3]javascript를 이용한 글자 수 알아내기(byte)-입력시 바로 알아내기(timer 이용)

<script language="javascript">
<!--
var timerBytes;

/*----------------------------------------------------------------------------------------
// 타이머 없애기
----------------------------------------------------------------------------------------*/
function clearTimerStrBytes()
{
 clearTimeout(timerBytes);
}

/*----------------------------------------------------------------------------------------
// 계산 : 글자 수(타이머를 이용한 byte 방식)
----------------------------------------------------------------------------------------*/
function setTimerStrBytes(objThis,eid)
{
 if(document.getElementById(objThis.id) == null)
 {
  return;
 }
 
 var str = document.getElementById(objThis.id).value;
 var l = 0;

 for(var i=0, c; i<str.length; i++)
 {
  c=str.charCodeAt(i);

  if(c > 128 )
  {
   l +=  2;
  }
  
  else
  {
   l +=  1;
  }
 }

 document.getElementById(eid.id).innerHTML = l;

 var fn = function()
 {
   setTimerStrBytes(objThis,eid);
 }

 timerBytes = setTimeout(fn,100);
}
//-->
</script>

<table width="300" height="40" border="0" cellpadding="0" cellspacing="0">
<tr height="10">
 <td></td>
</tr>
<tr>
 <td><font color="#6e75c1">입력 글자 수 : <font style="font-size:11px">(<span id="divStrLength" name="divStrLength">0</span>/255)</font></font></td>
</tr>
<tr>
 <td><input type="text" id="tareaMemo" name="tareaMemo" onfocus="setTimerStrBytes(document.getElementById('tareaMemo'),document.getElementById('divStrLength'));" onblur="clearTimerStrBytes();" onkeypress="if(event.keyCode==13){clearTimerStrBytes();}" style="width:250px; height:20px; border:1px solid #a5aded"></td>
</tr>
</table>

[javascript-tip]문자열 앞뒤 공백을 없애는 자바스크립트 함수(trim()함수)

[1번째 방법]
function jstrim(s)

{
  while (s.charAt(0) == " ")

  {
    s = s.substr(1);
  }

  while (s.charAt(s.length-1) == " ")

  {
    s = s.substr(0, s.length-1);
  }

  return s;

}

[2번째 방법]
function trim (strSource)

{
  re = /^s+|s+$/g;

  return strSource.replace(re, '');
}

function ltrim (strSource)

{
  re = /^s+/g;

  return strSource.replace(re, '');
}

function rtrim (strSource)

{
  re = /s+$/g;

  return strSource.replace(re, '');
}

[3번째 방법]
String.prototype.trim=function()
{
  var str=this.replace(/(\s+$)/g,"");
  return str.replace(/(^\s*)/g,"");
}

예>
a=" assdf asdf ";
alert(a.trim());

[4번째 방법]
function trim(str)
{
  return str.replace(/^\s+|\s+$/, '');
}

a=" assdf asdf ";
alert(a.trim());

[5번째 방법]
String.prototype.trim = function()
{
  // 좌우공백제거
  return this.replace(/^\s+|\s+$/g, "");
}

function fncCheckAll()
{
  var a = " a b c ";
  alert("a :" + a);

  var b = a.trim();
  alert("b :" + b);

  return;
}