WEB Dev Note

iOS나 macOS의 반투명하고 흐린 효과를 웹에서 구현할 수 있다. 예를 들면 아래와 같은 효과. .element-blur 클래스에 3px의 blur 효과를 주는 CSS는 아래와 같다.@supports (-webkit-backdrop-filter: none) { .element-blur { -webkit-backdrop-filter: blur(3px); } } 이렇게 해두면 .element-blur 클래스가 적용된 객체 뒤로 깔리는 모든 요소가 실시간으로 흐리게 처리된다 (스크롤 할때도 마찬가지). 더불어 -webkit-backdrop-filter 에는 blur(), invert(), grayscale() 효과를 줄 수 있으며, 아래 이미지로 설명한다. 이미지 출처: https://webkit.org/..

배열을 json_encode() 해서 json으로 바꿀때 한글 값이 유니코드로 깨져 들어가는 현상을 해결하는 방법.PHP 버전별로 다르게 구현한다. 1. PHP 5.4 이상 $array = array("foo","bar"); $result = json_encode($array,JSON_UNESCAPED_UNICODE); 2. PHP 5.3 이하 function my_json_encode($arr) { //convmap since 0x80 char codes so it takes all multibyte codes (above ASCII 127). So such characters are being "hidden" from normal json_encoding array_walk_recursive($arr..

문자열의 인코딩을 판단하여 UTF-8이 아닐 경우 변환한다. function changeCharset(&$item) { if(is_string($item)==true) { $encoding = array('UTF-8'); if(detectEncoding($item, $encoding)!='UTF-8') $item = iconv('EUC-KR', 'UTF-8', $item); } } function detectEncoding($str, $encodingSet) { foreach ($encodingSet as $v) { $tmp = iconv($v, $v, $str); if(md5($tmp) == md5($str)) return $v; } return false; } 위와 같이 함수 두개가 함께 쓰이며, 실..

모바일 웹킷 기반 브라우저, 즉 아이폰이나 아이패드의 사파리 브라우저에서 유동적(dynamically)으로 생성된 객체에 z-index가 제대로 적용되지 않는 문제가 있다. 이는 애플에서도 알고 있는 공식적인 문제인데 조만간 패치가 나오지 않는 이상 아래와 같은 방법으로 우회하여 해결한다. z-index가 적용된 객체의 CSS에 아래를 추가한다. -webkit-transform-style: preserve-3d; -webkit-transform: translateZ(-5px); 설명하자면, z-index는 이차원 공간에서 객체를 정렬하지만, preserve-3d를 적용하고 translateZ() 값을 주면 삼차원 공간에서 객체를 위치시킨다. 따지고보면 같은 말인데 모바일 웹킷에서 삼차원으로 해야 작동하는..

기유투브 주소를 보면 v 값에 비디오 고유 아이디가 들어간다. 예를들면 아래에 붉게 표시된 부분이다. http://www.youtube.com/watch?v=7KdMiRUbHi0&feature=channel PHP를 이용해 간단히 이 아이디 값만 뽑아오려면 아래와 같이 하면 된다. $string = "http://www.youtube.com/watch?v=7KdMiRUbHi0&feature=channel"; $url = parse_url($string); parse_str($url['query']); echo $v;

아래의 플러그인을 이용하면 불러오는 페이지의 높이에 따라 아이프레임 높이가 자동으로 조절된다. 단, 외부 경로는 적용되지 않는다. 1) 플러그인을 내려받고 압축을 푼 다음 계정에 올린다. 2) 바로 위에 아래 스크립트를 입력한다. 3) 아이프레임이 출력될 본문에 아래를 입력한다.

이건 IE 브라우저 버전을 알아낼때 쓰일 소스다. PHP 4 버전에서도 잘 돌아간다. function ieversion() { $match=preg_match('/MSIE ([0-9]\.[0-9])/',$_SERVER['HTTP_USER_AGENT'],$reg); if($match==0) return -1; else return floatval($reg[1]); } 기본적으로 IE 버전을 리턴하고, 만약 IE가 아니라면 -1을 리턴한다.

트래픽 부하를 막기 위해 이미지 주소를 숨겨야 할 경우, 아래와 같이 할 수 있다. $location = '이미지 주소'; $extTemp = explode('.',basename($location)); $ext = $extTemp[1]; if($ext == 'jpg') { $ext = 'jpeg'; } header('Content-Type: image/'.$ext.''); readfile($location); 1) 위의 코드를 image.php로 저장한다. 2) '이미지주소' 부분에 원하는 이미지 경로를 입력한다. 3) 형태로 지정할 수 있다. 만약 DB에 주소가 저장되어 있을 경우, image.php의 내용을 살짝 수정하고, image.php?no=뭐뭐 의 형태로 지정하면 된다. 이 부분에 대해 질문..

다음과 같은 폼이 있다고 하자. Login 기존에 제목과 같은 효과를 내기 위해서 onload="document.login.idn.focus();" 이러한 코드를 태그 내부에 추가했지만, 어찌된 영문인지 동작하지 않을 때도 있었다. 따라서 아래와 같이 jQuery를 이용하면 간단하게 해결할 수 있다. $(document).ready(function(){ $("#idn").focus(); }); 추가> 만약 #idn이 쿠키로 저장되어있을 경우, #password가 포커스 되도록 하려면 아래와 같이 한다. $(document).ready(function(){ if($.cookie('쿠키이름')){ $("#password").focus(); } else { $("#idn").focus(); } }); 물론, ..

트윗픽닷컴을 이용해 트위터에 사진을 올리는 경우 아래와 같은 방법을 이용하면 사진만 깔끔하게 뽑아내서 갤러리로 꾸밀 수 있다. 원본 소스 출처는 http://www.ixis.co.uk/blog/twitpic-gallery . 하지만 작년에 쓰인 이 글의 소스는 두가지 문제점을 갖는다. a. 대부분의 호스팅 업체는 file_get_contents()를 지원하지 않는다. b. preg_math()에 사용된 정규식이 변경되었다. 따라서 Snoopy class를 이용해서 재구성 해 보았다. 1) Snoopy Class를 다운받아 자신의 계정에 올린다. http://sourceforge.net/projects/snoopy/files/Snoopy/Snoopy-1.2.4/Snoopy-1.2.4.zip/download..