워드프레스 테마 설치 시, 400 Bad Requeset 오류 해결 방법

Your browser sent a request that this server could not understand. 오늘 cafe24에 새 계정에 워드프레스 설치를 도와줄 일이 있어서 하는데, 테마 업로드 시에 위와 같은 에러가 나왔다. 평소에 본 적이 없는 에러라서 이게 왜 발생하나 알아봤더니, PHP 5.5 에서는 저런 에러가 발생한다고. PHP 5.3 이하 버전에서는 상관없는데, 5.5에서는 7메가(?) 이상의 용량을 올릴 때 위와 같은 에러가 난다고 한다. (7메가가 기준인지는 확실치 않음. 내가 올린 테마는 9메가) php.ini 파일을 설정해주면 해결이 된다고 하나, 웹호스팅 업체의 신세를 지고 있는 입장이라면 그게 쉽지 않을테니, 5.3이하로 다운그레이드를 하면 매우 쉽게 해결된다.… 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

페이스북 공유시 썸네일 이미지 바로잡기

웹사이트에 좋아요, 공유하기 버튼을 설치하면 알아서 제목과 썸네일 이미지를 잡는다. 그런데 엉뚱한 제목이나 내용, 썸네일 이미지가 들어갈 수 있기 때문에 meta 태그에서 올바르게 설정해줘야 제대로 된 내용이 들어간다. 123 <meta property="og:title" content=“제목” /><meta property="og:description" content=“내용” /><meta property="og:image" content=“이미지 경로” /> 그런데 문제는 이미지다. meta 태그로 제대로 설정해도 나오지 않는 경우가 있는데, 이럴 때는 사이즈가 문제가 될 때가 있다. 200 x 200 사이즈를 넘지 않으면 다른 이미지를 가져오는 경우가 있다. 내가 작업하는 페이지는 페이지별 대표 이미지가 180 x 260 사이즈였는데, 억지로 200 x 289 사이즈로 조정하니 그 이후에는 정상적으로 표기됐다. 이렇게 수정해도 바로 반영이 되지 않을 경우에는 페이스북 디버거 페이지에 접속하여,… 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

[HTML&CSS] 모바일웹 하단 광고 고정

앱처럼 모바일웹에도 배너를 하단에 고정시킬 수 있다면 수익이 좀 생길까 싶어서 알아봤는데, 일단 구글 애드센스는 불가능했다. 그런 사례가 걸린다면 계정을 없애버린다고. 잠깐 다른 이야기지만, 예전에 사이트 운영할 때 3~4년 걸려서 $100이 모였는데 불법 클릭을 유도했다며 어느 날 갑자기 계정을 없애버렸던 것을 생각하면 지금도 열받는다. 아무 것도 한 것이 없읐는데. 여하튼, 구글은 그 쪽에서 결정한 것이 곧 법이기 때문에 거슬리는 일을 해서는 안 된다. 그래서 다른 곳을 알아봤다. 다음의 애드핏(구 아담)과 카울리는 앱이 아닌 모바일웹에도 광고를 게재할 수 있도록 해주며, 둘 다 하단 광고 고정에 대해서는 별다른 규제가 없다. 아래 샘플은 카울리 광고다. <head>에 css와 js 정의하고, 12345678910111213141516171819202122 @media only screen… Read the rest

코믹시스트 ver 1.1 업데이트

약 1년만에 업데이트를 한 것 같다. 코믹시스트 사이트를 리뉴얼한 것이 2주 전, 그리고 앱도 그에 맞춰서 업데이트를 했다. 사실, 변화의 폭이 그다지 크지 않지만 앱을 수정하는 것이 1년만이라 낯설어서 혼났다. 일단 새 회원을 유치하는 것이 가장 중요하다고 판단되어, Facebook 로그인 버튼을 웹과 앱에 추가했다. 앱에는 Facebook SDK가 일부 적용됐던 것이 있었는데 그 사이에 버전이 3.5.2에서 4.4.x로 크게 바뀌어서 생각보다 작업이 지체됐다. 그 외 서버 캐릭터셋이 변경되며 글자가 깨지던 문제를 전부 수정하였으나, 아직 웹툰쪽 정보는 제대로 틀을 잡지 못 해서 아직은 반쪽짜리 서비스에 그치고 있다. 고쳐야 할 것이 산더미다. 여하튼, 죽어있던 앱을 살리겠다는 의지로 작은 업데이트를 진행했다. 하지만 이 버튼을 달았다고… 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

[PHP, jQuery Tutorial] 검색어 자동완성 구현하기

  만화책 제목으로 검색할 때, 앞부분만 맞으면 아래에 목록을 표시하는 기능을 구현하였다. 요즘은 너무나도 흔한 기능이지만, 꽤 오랫동안 구현하고자 생각만 하다가 이번 리뉴얼에 맞춰서 작업을 했다. 처음에 개념이 잘 안 잡혀서 고생한 탓에, 최소한의 소스로 정리하였다.   1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <link href="css/bootstrap.min.css" rel="stylesheet">        <link href="css/font-awesome.min.css" rel="stylesheet">         <script src="js/jquery.js"></script>        <script src="js/bootstrap.min.js"></script>         <style>            #display {                width:100%;                display:none;                position:absolute;                z-index:9999;                           float:right;                border-left:solid 1px #dedede;                border-right:solid 1px #dedede;                border-bottom:solid 1px #dedede;                overflow:hidden;            }                .display_box {                padding:4px;                font-size:12px;                height:80px;                background:#FFFFFF;                color: #333333;            }                        .display_box:hover {                background:#fcffaa;                color: black;                cursor: pointer;            }                        .boximage {                 float:left;                margin-right:10px;            }        </style>              <script>            $(document).ready(function () {                $("#keyword").keyup(function()   {                    var keyword = $(this).val();                    var dataString = 'searchword='+ keyword;                                                                                                    if(keyword=='') {                         $("#display").hide();                    } else {                            $.ajax({                        type: "POST",                        url: "suggestions.php",                        data: dataString,                        cache: false,                        success: function(html) {                                           $("#display").html(html).show();                            }                        });                    } return false;                                             });                 });                  function goDetail(no) {                 document.location.href="detail.php?no="+no;            }                           function checkSearch() {                 var searchKeyword=document.getElementById("keyword").value;                                if(!searchKeyword.trim())                    alert('검색어를 입력해주세요');                else {                    location.href='searchresult.php?q='+searchKeyword;                }            }             </script>    </head><!--/head-->     <body>            <form action="javascript:checkSearch();">            <div… 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

[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

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

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

[Android Tutorial] 좌우 스와이프 가능한 탭 기반의 앱 만들기

앱을 만들 때 좌측 상단에 햄버거 아이콘을 넣고 좌측에서 나오는 슬라이딩 메뉴를 활용하는 방식을 선호하는 편이다. 그런데 더 심플한 형태가 필요할 때가 많을 것 같아 ViewPager와 Tab이 모두 적용된 형태를 만들어봤다. 예전에는 프로요와 진저브레드가 호환되지 않는다는 이유로 ActionBar를 안 쓰고 ActionBarSherlock 라이브러리를 썼었는데, 이젠 다 지원되나보다. 새 프로젝트를 그 동안 너무 안 해본 것이 티가 남 🙂 프로요와 진저브레드를 아직까지 지원할 필요가 있을까도 싶지만, 그래도 지원 안 하면 괜히 찜찜. 일단, 아래와 같이 설정하면 Action Bar Tabs (with ViewPager) 앱이 만들어진다. 가장 눈에 거슬리는 것이 상단의 타이틀 바인데, onCreate 에 아래 두 줄을 삽입하고, onCreateOptionsMenu와 onOptionsItemSelected 모두 제거하면 된다. 12… Read the rest

혼자 일하고 싶을 때, 읽어보면 좋은 글과 반드시 챙겨야 할 자료

어제 포스팅한 비정상이 정상이 된 일정 산정 방식이라는 글을 쓰다 보니, 대안도 없이 조직 생활의 단점만 쓴 것 같다. 그렇다고 이번 포스팅에서 조직 생활의 장점을 쓰겠다는 것은 아니고, 혼자서도 경쟁력을 갖춘 사례와 경쟁력을 갖추기 위해 참고할만한 글을 소개하고자 한다. 어제 SNS상에서 혼자 만든 앱 하나로 1억 다운로드를 달성한 박상원 대표에 대한 인터뷰가 화제가 됐다. 촬영과 편집이 모두 되는 카메라 필터 앱인 레트리카가 그 주인공인데, 누구나 한 번쯤 꿈꾸는 모습일 수 있기에 매우 재미있게 읽을 수 있다. 결과물이 좋아서 개발을 시작했다는 점, 조직 내에서는 용역처럼 일을 해야 하는 점, 투자 유치를 우선하지 않는다는 점 등 공감하게 되는 부분이 많다. 특히 투자에… Read the rest

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

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