WEB Dev Note

Ultimate CSS Gradient Generator는 ColorZilla라는 FireFox 부가기능으로 유명한 Alex Sirota가 제작한 툴이다. 단 한번의 클릭, 혹은 몇번의 클릭으로 그라데이션을 표현하는 CSS를 쉽게 얻을 수 있다. Preview 오른쪽 아래에 IE를 체크하면 Internet Explorer에서 어떻게 보이는지 테스트할 수 있다. (여담: IE9에서도 저렇게 보일까? 언제쯤 표준에 가까워지기라도 할까?) Ultimate CSS Gradient Generator 바로가기

무슨 이유에서인지 아래와 같은 CSS가 Internet Explorer에선 적용되지 않는다. input[type=checkbox] { margin: 10px; border: 1px solid red; } 물론 각각의 checkbox마다 클래스를 주면 적용할 수 있지만 용량 낭비고 시간 낭비다. (이거 뭐 Internet Explorer 때문에 몇줄의 코드를 추가해야 하는건지 -_-) 어쨌든 이와 같은 상황을 해결하기 위해 jQuery를 이용하면 된다. 바로 위에 아래와 같은 코드를 추가한다. 페이지를 모두 로드하고 jQuery가 발동되며 해당 페이지의 input[type=checkbox]를 찾아 설정된 스타일을 입힌다.

placeholder는 input 폼에 글자가 입력되기 전 기본으로 보여주는 텍스트이다. 예를들면, 이렇게 입력하면 아래 스크린샷 같은 결과가 출력된다. type 속성이 password 일지라도 위와 같이 텍스트가 출력되는 등, 미리 지시사항 등을 등록해놓을 수 있기 때문에 공간절약에 탁월한 장점이 있으나... 문제는, 역시나 Internet Explorer는 전혀 인식하지 못한다는 것. 아래와 같은 자바스크립트를 이용하면 placeholder 태그와 같은 효과를 낼 수 있다. // Placeholder for IE function activatePlaceholders() { var detect = navigator.userAgent.toLowerCase(); if (detect.indexOf("safa..

구글 랩스에서 제공하는 Page Speed는 웹페이지의 콘텐츠를 분석하여 성능을 향상시킬 수 있는 방안을 제시해준다. 여기서 성능을 다시 말하면 웹페이지 구동속도를 말한다. 브라우저에서 얼마나 빠르고 효율적으로 웹페이지를 표시하느냐를 가늠하여 100점 만점 점수로 표시해준다. 심심풀이로 자주 가는 웹사이트 몇개를 돌려봤다. 대상 웹사이트 : 구글 / 네이버 / 미투데이 - 네이버 / 네이트 / 다음 / 요즘 - 다음 / 야후 / 트위터 / 페이스북 (가나다순, 아래는 점수 순 정렬) 9위. 네이버 69점 8위. 미투데이 76점 7위. 네이트 81점 6위. 요즘 87점 5위. 야후 89점 4위. 다음 94점 3위. 트위터 96점 2위. 구글 97점 1위. 페이스북 99점 평균 : 87.56점 표준편차 : ..

QR코드는 스마트폰과 결부해 카메라로 스캔하는 것만으로 웹사이트를 방문할 수 있도록 한다. 다양한 방법으로 광고와 마케팅에도 응용되고 있다. 이러한 QR코드를 만들어주는 서비스는 다양하지만, 여기서는 구글에서 제공하는 차트API를 이용해 매우 간단하게 QR코드를 만드는 방법을 소개하고자 한다. 1) 아래의 코드를 페이지의 원하는 부분에 추가한다. 구글 차트 API : http://code.google.com/intl/ko/apis/chart/infographics/docs/qr_codes.html

스마트폰이 대중적으로 보급됨에 따라 웹사이트도 작은 화면에 최적으로 보일 수 있도록 모바일전용 페이지가 필요하게 되었다. CSS3 Media Queries를 이용하면 동적인 레이아웃을 구현할 수 있지만 여기서는 PHP로 모바일기기를 인식하고 리다이렉트 시키는 방법을 소개한다. 1) 아래의 파일을 내려받는다. 첨부된 파일은 2010년 4월 25일 버전이다. 최신 버전을 확인하려면 http://detectmobilebrowsers.mobi/ 를 방문하도록 한다. 2) 내려받은 파일을 자신의 계정에 업로드하고 아래의 코드를 입력한다. include('mobile_device_detect.php'); mobile_device_detect(true,true,true,true,true,true,true,'http:..

방문자의 브라우저 종류를 알아내는 것은 웹개발을 하는데 있어 필수사항이다. 요즘들어 표준을 준수하는 추세에 따라 많은 브라우저 같의 차이가 좁아지고 있지만, 아직도 Internet Explorer 6로 대표되는 구시대 브라우저를 사용하는 방문자가 많다. 예를들어 2011년 5월 31일 기준으로 대한민국 인터넷 사용자의 22.3%가 IE6를 쓰고 있으며, 이는 전세계에서 중국에 이어 두번째로 높은 비율이다 (http://www.theie6countdown.com/). 구시대 브라우저는 보안도 문제지만, 최신 표준으로 규정된 웹 기술의 상당부분을 구현하지 못한다. 뿐만 아니라 최신 버전의 브라우저라 할지라도 같은 페이지를 출력한 결과물에 각각 크고작은 차이를 보인다. 따라서 웹개발자는 하나의 웹사이트를 다양..

출판업이나 웹사이트 디자인/개발을 해본 사람이라면 Lorem ipsum dolor sit amet.. 으로 시작하는 알 수 없는 단어들의 나열을 본적이 있을 것이다. 하지만 알고보면 아무 의미없는 단어를 무작위로 배열한 것이 아니다. 실제로 2,000년이 넘는 문학적 역사를 지니고 있다. 1. 역사 기원전 45년. 철학자 마르쿠스 툴리우스 키케로(Marcus Tullius Cicero)는 최고선이라는 윤리적 문제를 통해 당시의 다양한 철학 사상을 소개하는 5권으로 된 윤리학서 '최고선악론 (De Finibus Bonorum et Malorum)'을 집필했다. 시간이 흘러 1500년대, 무명의 인쇄업자가 최고선악론 본문 중 섹션 1.10.32에서 1.10.33의 일부를 발최하여 무작위로 배열한 후 활자 표..

만약 내가 운영하는 게시판의 모든 글 주소를 줄여서 보이고 싶으면 어떻게 하면 할까? 아래에 간단한 방법이 있다. 1) Snoopy Class를 다운받아 자신의 계정에 올린다. http://sourceforge.net/projects/snoopy/files/Snoopy/Snoopy-1.2.4/Snoopy-1.2.4.zip/download 2) 아래의 php 코드를 해당 게시판 헤더나 원하는 페이지에 입력한다. include './Snoopy.class.php'; // 이 부분의 경로는 본인의 계정상 경로를 지정한다. function short($url){ $snoopy = new Snoopy; $url = urlencode($url); $basepath = 'http://is.gd/create.php?f..