Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

[Javascript] Tab Navigation에서 최근 탭 활성화하기

현재 작업 중인 사이트에서 Tab Navigation이 필요한데, 시중에 잘 만들어진 라이브러리들이 하나 단점이 있어서 몇 차례 반복하면서 작업했었다. 탭이 5개가 있다고 가정했을 때, 2번째 탭이 활성화 된 상태에서 다른 페이지를 간 다음에 다시 Back했을 때 2번째 탭이 아닌 1번째 탭이 활성화된다는 것이었다.   의외로 원하는 탭을 활성화하기가 쉽지 않아서, 진도가 나가질 않다가 좋은 방법을 찾아서 기록 및 공유한다.   Codyhouse의 Responsive Tabbed Navigiation 코드를 보면, 굉장히 깔끔하게 제작되어 있는 것을 볼 수 있다. 아래 코드는 위 링크를 클릭하면 확인할 수 있는 샘플 코드다.   12345678910111213141516171819 <div class="cd-tabs">    <nav>        <ul class="cd-tabs-navigation">            <li><a data-content="inbox" class="selected" href="#0">Inbox</a></li>                        <li><!-- ... --></li>        </ul> <!-- cd-tabs-navigation -->    </nav>     <ul class="cd-tabs-content">        <li data-content="inbox" class="selected">            <p>Inbox… Read the rest

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

[Javascript] 스크롤이 내려가면 줄어드는 헤더

스크롤이 내려가면 헤더를 작게 만들어서 고정시키는 방법이 많이 쓰인다. http://edition.cnn.com/ 을 보면 어떤 것인지 쉽게 알 수 있다. 그리고 가로 창 사이즈를 줄이면 모바일에 적합한 형태로 바로 전환되는 반응형 디자인이 적용되어 있다. 특정 픽셀보다 아래로 내려가면, 헤더를 줄이는 기능은 아래와 같이 설정한다. 1234567891011121314 function scrollShrink() {     window.addEventListener('scroll', function(e){        var distanceY = window.pageYOffset || document.documentElement.scrollTop,            shrinkOn = 150; // 기준점인 y 픽셀.                     if (distanceY > shrinkOn) { // 줄어든 헤더 버전            $("#search").hide();            $("#logo-image-desktop").css("height","45");        } else { // 평소 헤더 버전            $("#search").show();            $("#logo-image-desktop").css("height","85");        }    });         }       그리고 페이지가 로드될 때 바로 호출되도록 설정한다. 1 <body onload="javascript:scrollShrink();"> 나는 부트스트랩을 활용해서 페이지로 만들고 있는데, 헤더에 navbar-fixed-top 클래스가 적용되어 있어야 한다. 12345678910111213 <header class="navbar… Read the rest

[jQuery Plugin] Carousel 플러그인 – Owl Carousel

어제 포스팅한 슬라이드쇼 플러그인에 이어서, Carousel 플러그인 소개. 마찬가지로 모바일, PC, 태블릿 등에서 모두 최적화된 상태로 보여져야 해서 여러 플러그인을 골라봤는데, 그 중에 마음에 들었던 플러그인이라 소개한다. 내가 찾았던 조건들은 아래와 같다. 모바일, 태블릿, PC 모두 지원 스와이프로도 좌/우 롤링 되어야 함 하단에 동그란 점들이 표시되어 클릭으로도 이동이 쉬워야 함 IE 까지도 지원해야 함 이런 조건들을 충족시키고 있으니, Carousel 플러그인을 찾는 분들은 한 번쯤 적용해보면 좋을 것 같다. 이전에 소개한 플러그인과 마찬가지로 역시 무료다 🙂 보다 자세한 내용은 Owl Carousel 사이트에서 확인할 수 있다.… Read the rest

[jQuery Plugin] 슬라이드쇼 플러그인 – Camera

코믹시스트를 모바일, PC, 태블릿 등에서 모두 최적화된 상태로 보여지게끔 만들고 싶어서, 슬라이드쇼 플러그인을 많이 찾아 헤맸던 기억이 난다. 메인 화면을 장식하는 영역이라 꽤 많은 조건이 필요했는데, 정리하자면 다음과 같다. 모바일, 태블릿, PC 모두 지원 스와이프로도 좌/우 롤링 되어야 함 슬라이드가 바뀔 때 애니메이션 효과 적용 요란한 효과가 아니라 페이드인/아웃만 되어도 환영 이미지 위에 텍스트를 쓸 수 있는 구조 정해진 시간이 지나면 자동으로 슬라이드가 변경되어야 함 이 조건을 다 충족시키는 플러그인을 찾은 것이 바로 Camera. 완전 무료이고 사용법도 간단하여 적용하기도 매우 쉬워서 추천!… Read the rest

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Bootstrap 템플릿을 IE에서도 깨지지 않게 하는 법

HTML을 처음 배운 것이 15년은 넘었고, PHP도 12년은 넘었다. 처음에 잘 배워야 한다는데… 내 HTML 코딩은 back to 90’s 다. <div>는 찾아볼 수 없고, 온통 중복 테이블의 연속이다. 구식 방식이라는 것은 알아도 크게 아쉬운 것 없이 써오다가, IE의 시대가 저물고 모바일이 치고 올라오면서 내 HTML은 쓰레기가 됐다 😡 나도 멋지게 반응형 웹을 만들고 싶은데 도저히 거기까지는 배울 엄두가 안 나고, 기존 사이트를 워드프레스로 옮기자니 그것도 막막했다. 이러지도 저러지도 못 한 상태로 1, 2년을 보내다가, 구세주나 다름없는 Bootstrap을 발견했다. 디자인과 HTML코딩까지 다 되어있고, 내 수준보다 훨씬 높은 템플릿을 너무나 쉽게 받아볼 수 있다. 구글에서 Bootstrap template responsive free 라고 치면 어마어마하게… Read the rest

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

PHP로 트위터에 글 등록하기

트위터 예약 발송, 대량 발송 등을 구현하고 싶었는데, 봇 운영 툴이나 Buffer 같은 서비스로는 딱 필요한 것이 없어서, PHP로 구현해봤다. 구현이라고 하기에는 민망할 정도로 라이브러리가 너무 좋음 🙂 이미지까지 업로드가 되어 매우 유용하게 쓰고 있다. 먼저, https://github.com/jublonet/codebird-php에서 codebird 라이브러리를 다운 받는다. 그리고 https://apps.twitter.com 에서 앱을 등록한 후, 권한을 Read and Write로 설정하고 소스에 4개 데이터를 대입하면 된다. 1234567891011 <?    include_once('codebird.php');    \Codebird\Codebird::setConsumerKey(“API key”, “API secret”);    $cb = \Codebird\Codebird::getInstance();    $cb->setToken(“Access token”, “Access token secret”);        $status = "테스트용 트윗입니다";    $filename = "http://www.dev-diary.com/logo.png";        $cb->statuses_updateWithMedia(array('status' => $status, 'media[]' => $filename));    ?>… Read the rest

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

환율 API 연동하기

환율 API가 필요해서 구글링을 했더니, 구글에서 API 지원 서비스가 종료했다는 이야기 뿐이다. 다행히 Yahoo에서 서비스하고 있는 내용을 찾아서 공유. 사용법은 매우 간단한데, 아래 URL에서 USDKRW 라고 써있는 부분만 필요에 따라 바꾸면 된다. 1 USD가 KRW로 얼마인지 의미하는 것이다. 1234567 $exchange_url="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20(%22USDKRW%22)&format=json&env=store://datatables.org/alltableswithkeys&callback=";$ch = curl_init();curl_setopt($ch, CURLOPT_URL, $exchange_url);curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 1000);$rt = curl_exec($ch);curl_close($ch); 리턴 값($rt)은 아래와 같이 JSON 형태로 출력되는데, 여기서 Rate 값을 취하면 된다. {“query”:{“count”:1,”created”:”2014-04-14T15:33:16Z”,”lang”:”en-US”,”results”:{“rate”:{“id”:”USDKRW”,”Name”:”USD to KRW”,“Rate”:”1039.85″,”Date”:”4/14/2014″,”Time”:”11:30am”, “Ask”:”1039.90″,”Bid”:”1039.80″}}}} 나는 아직도 주로 작업하는 서버에서 PHP 4를 쓰고 있어서 -_-, JSON 파싱 함수가 공식적으로 지원되지 않는 것으로 알고 있다. 사용하는 PHP 버전에 따라서 방법은 달라지겠지만, 이 다음은 간단하니깐 생략!… Read the rest