IE6에서 PNG 배경이 검정색으로 나오는것 해결방법

User image

구글링을 해보니 몇가지 방법이 나왔는데 그나마 잘 적용된 것을 적어봅니다. (현재 개발중인 사이트에 적용중)

1. CSS 파일에 다음 라인을 추가합니다.


.png24 { tmp:expression(setPng24(this)); }

2. 그리고 항상 include 하는 js 파일에 다음 라인을 추가합니다.


function setPng24(obj) {
 obj.width=obj.height=1;
 obj.className=obj.className.replace(/\bpng24\b/i,”);
 obj.style.filter =”progid:DXImageTransform.Microsoft.AlphaImageLoader(src='”+ obj.src +”‘,sizingMethod=’image’);”
 obj.src=”;
 return ”;
}

3. 이미지 태그에 다음과 같이 삽입합니다.


<img src=”이미지경로/img.png” class=”png24″>


그러면 IE6에서 배경이 검게 나오던 png 파일이 제대로 표시됩니다.

단, background 에는 적용이 안됩니다. gif로 바꿔야 합니다.

구글링하다보니 background에도 적용되는게 있긴 했는데 좀 복잡했고 적용하기가 힘들어서

위의 것으로 대체했습니다.

도움이 되시길…

파이어폭스 3.0 부가기능 – Web Developer

이 부가기능은 설치하면 툴바에 쿠키, css 폼, 이미지, 정보, 리사이즈, 툴, 소스보기 등 여러 버튼이 생긴다.
여러가지 기능중 내가 제일 많이 쓰는 기능은 폼-폼정보 보기 이다
히든 폼으로 id만 선언해놓고 ajax나 DOM으로 결과처리후 value를 줄때 IE에서는 확인하기가 힘들었다.
(폼값을 넘겨서 다음 페이지에서는 확인가능하나 자체 페이지에서 히든폼값을 확인하기란…)
이 부가기능을 설치하고나서는 ajax로 처리하고 히든폼에 넣은 값도 바로 확인이 가능했고
파이어버그를 쓰면 ajax로 넘어온 값도 바로 볼 수가 있다.
시스템 새로 설치하고 이 부가기능의 이름이 생각 안나서 1시간을 검색한 끝에 다음에 위해 남긴다. ^^;

Web Developer 1.1.6



Adds a menu and a toolbar with various web developer tools.

평가 178개

Updated 2008년 05월 19일

67,627
다운로드

Firefox 에 추가

imageMagick을 이용한 리사이징 & Crop




thumbnail을 만들때 각기 좌우 크기가 다른 사진들때문에 홈페이지 레이아웃이 엉망이 되는 경우가 많아서 사진크기와 상관없이 일정한 가로세로를 가진 thumbnail을 생성하기 위해서 만들었습니다.

원리는 간단합니다.
원본사진의 크기를 측정해서 가로세로중 크기가 작은 쪽이 원하는 사이즈가 되게 리사이즈하면서 중앙을 중심으로 가로세로가 같은 크기가 되게 잘라내는 방식입니다.

당근 imagemagick이 깔려있어야 작동하겠지요?
http://imagemagick.org/script/download.php 참조…

[code]
function crop_thumb($jpg1,$jpg2,$width=150) {
    $path=”/usr/local/bin/”; //imagemagick 실행 경로
      if (!$jpg1||!$jpg2) return;
      $size=@getimagesize($jpg1);     
      if (!$size) return;
      if ($size[0]>=$size[1]) {
              $size[0]=intval($size[0]*$width/$size[1]);
              $size[1]=$width;
      }
      else if ($size[0]<$size[1]) {
              $size[1]=intval($size[1]*$width/$size[0]);
              $size[0]=$width;
      }

              $x=(int)(($size[0]/2)-($width/2));
              $y=(int)(($size[1]/2)-($width/2));
              if ($x<0) $x=0;
              if ($y<0) $y=0;

        $str = “nice -10 “.$path.”convert -compress JPEG -quality 100 -resize $size[0]”.”x$size[1] -crop $width”.”x”.”$width+$x+$y \”$jpg1\” \”$jpg2\””;
      exec($str);

[/code]

본문에서 이미지태그 정보만 추출하기

[code]
    $buff = Array(); // 결과 저장 배열

    $input = ‘
        <IMG alt=P41901.jpg src=”files/attach/images/304/440/P41901.jpg” editor_component=”image_link”>
        <IMG alt=P41902.jpg src=”files/attach/images/304/440/P41902.jpg” editor_component=”image_link”>
        <IMG alt=P41903.jpg editor_component=”image_link” src=”files/attach/images/304/440/P41903.jpg”>
        <IMG alt=P41904.jpg src=”files/attach/images/304/440/P41904.jpg” width=300 height=200>
        <IMG alt=P41905.jpg src=\’files/attach/images/304/440/P41905.jpg\’ width=300 height=200>
        <IMG alt=P41906.jpg src = “files/attach/images/304/440/P41906.jpg”>
        <IMG alt=”P41907.jpg”>
    ‘;

    $cnt = preg_match_all(‘@<img\s[^>]*src\s*=\s*([“\’])?([^\s>]+?)\1@i’,$input,$output);

    echo “<xmp>”;
    print_r($output[2]);
    echo “</xmp>”;
[/code]

자바스크립트를 이용한 정규표현식 체크









function validPWD( str )
{


var isPW = /^[a-z0-9]{6,16}$/;
     if( !isPW.test(str) ) {
         alert(“비밀번호는 6~16자의 영문 소문자와 숫자만 사용할 수 있습니다.”);
         return 0;
     }
     return 1;


}



——-








































































































문자 설명
\ 다음에 오는 문자를 특수 문자나 리터럴로 표시합니다. 예를 들어, “n”은 문자 “n”과 일치합니다. “\n”은 줄 바꿈 문자와 일치합니다. 시퀀스 “\\”은 “\”와 같고, “\(“는 “(“와 같습니다.
^ 입력의 시작 부분을 찾습니다.
$ 입력의 끝 부분을 찾습니다.
* 앞에 오는 문자를 0번 이상 찾습니다. 예를 들어, “zo*”를 입력하면 “z” 또는 “zoo”를 찾습니다.
+ 앞에 오는 문자를 1번 이상 찾습니다. 예를 들어, “zo+”를 입력하면 “zoo”를 찾지만 “z”는 여기에 포함되지 않습니다.
? 앞에 오는 문자를 0번 이상 찾습니다. 예를 들어, “a?ve?”를 입력하면 “never”에 있는 “ve”를 찾습니다.
. 줄 바꿈 문자를 제외한 단일 문자를 찾습니다.
(pattern) pattern을 찾고 일치하는 내용을 기억합니다. 일치하는 부분 문자열은 Item [0]…[n]을 사용하여 결과로 나오는 Matches 컬렉션에서 검색할 수 있습니다. 괄호 문자 ( )를 찾으려면 “\(” 또는 “\)”를 사용합니다.
x|y x 또는 y를 찾습니다. 예를 들어, “z|food”는 “z” 또는 “food”를 찾습니다. “(z|f)ood”로는 “zoo”나 “food”를 찾을 수 있습니다.
{n} n은 음이 아닌 정수입니다. 정확하게 n번 일치하는 부분을 찾습니다. 예를 들어, “o{2}”는 “Bob”의 “o”를 찾지 않지만 “foooood”의 처음 두 o를 찾습니다.
{n,} n은 음이 아닌 정수입니다. 적어도 n번 일치하는 부분을 찾습니다. 예를 들어, “o{2,}”는 “Bob”의 “o”를 찾지 않지만 “foooood”의 o는 모두 찾습니다. “o{1,}”은 “o+”와 같습니다. “o{0,}”은 “o*”과 같습니다.
{n,m} mn은 음이 아닌 정수입니다. 최소 n번, 최대 m번 일치하는 부분을 찾습니다. 예를 들어, “o{1,3}”은 “fooooood”의 처음 세 o를 찾습니다. “o{0,1}”은 “o?”와 같습니다.
[xyz] 문자 집합입니다. 괄호 안의 문자 중 하나를 찾습니다. 예를 들어, “[abc]”는 “plain”의 “a”를 찾습니다.
[^xyz] 문자 집합에 없는 문자를 찾습니다. 괄호 안에 있지 않은 문자 중 하나를 찾습니다. 예를 들어, “[^abc]”는 “plain”의 “p”를 찾습니다.
[a-z] 문자 범위입니다. 지정한 범위에 있는 문자 중 하나를 찾습니다. 예를 들어, “[a-z]”는 “a”에서 “z”까지의 알파벳 소문자를 찾습니다.
[^m-z] 지정한 문자 범위가 아닌 집합입니다. 지정한 범위에 있지 않은 문자 중 하나를 찾습니다. 예를 들어, “[m-z]”는 “m”에서 “z”까지에 없는 문자를 찾습니다.
\b 단어의 경계, 즉 단어와 공백 사이의 위치를 찾습니다. 예를 들어, “er\b”는 “never”의 “er”를 찾지만 “verb”의 “er”는 찾지 않습니다.
\B 단어의 경계에 있지 않은 문자를 찾습니다. “ea*r\B”는 “never early”의 “ear”을 찾습니다.
\d 숫자를 찾습니다. [0-9]와 같습니다.
\D 숫자가 아닌 문자를 찾습니다. [^0-9]와 같습니다.
\f 용지 공급 문자를 찾습니다.
\n 줄 바꿈 문자를 찾습니다.
\r 캐리지 리턴 문자를 찾습니다.
\s 공백, 탭, 용지 공급 등 모든 종류의 공백 문자를 찾습니다. “[ \f\n\r\t\v]”와 같습니다.
\S 공백 문자가 아닌 문자를 찾습니다. “[^ \f\n\r\t\v]”와 같습니다.
\t 탭 문자를 찾습니다.
\v 세로 탭 문자를 찾습니다.
\w 밑줄을 포함한 모든 단어 문자를 찾습니다. “[A-Za-z0-9_]”와 같습니다.
\W 단어가 아닌 문자를 찾습니다. “[^A-Za-z0-9_]”와 같습니다.
\num num을 찾습니다. 여기서 num은 양의 정수입니다. 이전에 참조한 값을 다시 참조합니다. 예를 들어, “(.)\1″은 연속적으로 같은 문자가 두 번 나오는 것을 찾습니다.
\n n을 찾습니다. 여기서 n은 8진 제어 값입니다. 8진 제어 값은 1, 2, 3 자리 중 하나라야 합니다. 예를 들어, “\11″과 “\011″은 모두 탭 문자를 나타내지만 “\0011″은 “\001” & “1”과 같습니다. 8진 제어 값은 256을 넘을 수 없습니다. 이 값이 256을 넘는 경우에는 처음 두 자릿수 만이 식을 구성합니다. 정규식에 ASCII 코드를 사용할 수 있습니다.
\xn n을 찾습니다. 여기서 n은 16진 제어 값입니다. 16진 제어 값은 정확히 두 자리이어야 합니다. 예를 들어, “\x41″은 “A”에 해당하지만 “\x041″은 “\x04” & “1”과 같습니다. 정규식에 ASCII 코드를 사용할 수 있습니다.



정규식에 사용할 수 있는 메소드는


test(), compile(), match(), replace(), search() 등이 있습니다