꼬장

http://code.google.com/p/canvas-text/

단순 그림그릴땐 canvas 사용하지만 글자는 위 링크에서 해결

http://code.google.com/p/explorercanvas/ 에서 excanvas_r3.zip 다운로드

//단순 아래 한줄만 추가후 사용

<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->

● 선그리기

<!-- canvas  선언 ( 크기를 미리 정해야 한다 ) -->

<canvas id ="sample" width=500 height=500 ></canvas>

<script>

//canvas 오브젝트 받기

var canvas = document.getElementById("sample");

//canvas의 context 받기
var context = canvas.getContext("2d");    

context.beginPath();        //시작 및 초기화

context.moveTo(100, 0);    //시작지점

context.lineTo(100, 200);    //시작지점에서 그리기

context.strokeStyle = "black";    // 선색 변경

context.lineWidth = 0.5;             // 선 두깨 설정

context.stroke();    // 선그리기

</script>

● 사각형 그리기

<script>

//canvas 오브젝트 받기

var canvas = document.getElementById("sample");

//canvas의 context 받기
var context = canvas.getContext("2d");    

context.rect(50,50,100,100);       // 설정  ( 50,50기준으로 가로 100세로 100 )

context.strokeStyle = "black";    // 선색 변경

context.lineWidth = 0.5;             // 선 두깨 설정

context.stroke();                     //선그리기

</script>

● 면 그리기

<script>

//canvas 오브젝트 받기

var canvas = document.getElementById("sample");

//canvas의 context 받기
var context = canvas.getContext("2d");    

context.fillStyle = "green";    // 면색 변경 

context.fillRect(150, 150, 50, 50);    // 채워서 그리기 ( 150,150 기준으로 가로 50 세로 50 )

</script>

● 원 그리기

context.beginPath();

// 100, 100 에 반지름 50 인 0*Math.PI 시작으로 2*Math.PI 로 끝나는 원

context.arc(100, 100, 50, 0*Math.PI, 2*Math.PI, false);    

//다 못그릴 경우 선으로 메운다. ex )  0*Math.PI 에서 1.5*Math.PI 일경우 1/4 은 안그리게 된다 이걸 선으로 마무리

context.closePath();

context.strokeStyle = "blue";
context.stroke();

● 3차 곡선 그리기 ( 하트 )

context.beginPath();
context.moveTo(100,150); //시작점

context.bezierCurveTo( 0, 50, 100, 50, 100, 70); //3개의 Point
context.moveTo(100,150); //시작점
context.bezierCurveTo( 200, 50, 100, 50, 100, 70); //3개의 Point
context.strokeStyle = "green"; //선색

context.stroke();

● 캔버스 초기화

var canvas  = document.getElementById("canavas");
var ctx   = canvas.getContext("2d");
ctx.beginPath();
ctx.clearRect(0, 0, canvas.width, canvas.height);

다운로드 : http://nuli.navercorp.com/sharing/nwagon

테스트 : http://jsfiddle.net/dl_nuli/6aqdyjko/

방사형 차트를 찾다가 발견한..

아주 간단하게 차트를 만들어준다

● 생성

setcookie( "이름", "값", time() + 사용할시간, "경로", "도메인", secure );

예) $_COOKIE["쿠키이름"] 처럼 기존의 $_POST $_GET 처럼 사용 한다

출처 : http://pubi.hamandgom.wo.tc/25/

페이지 생성해서 외부파일 연결했는데 계속 404 에러를 뿜는다

▶ 웹호스팅 사용시 .htaccess 을 수정

▶ 웹서버 운영일 경우 httpd.conf 수정

출처 : http://blog.naver.com/birdparang/220097620268

자바스크립트에서 브라우저 구분을 위해서는 대개 navigator 개체의 userAgent 속성을 이용한다.

var a = navigator.userAgent;

if (a.indexOf('MSIE') >=0)

{

// IE는 userAgent에 'MSIE'가 포함되어 있다.

}

또는 IE 브라우저 구별을 위한 아래와 같은 매우 간단한 방법도 있다.

if  (/*@cc_on!@*/false)

{

// IE면 true, IE가 아니면 false

}

그러나 위 두 코드는 IE10까지만 작동한다. IE11부터는 userAgent에 'MSIE'를 사용하지도 않고 더 이상 조건부 컴파일(@cc_on)을 지원하지 않는다.

따라서 아래의 코드로 바꿔야 한다.

if (/msie|trident/i.test(a))

{

// userAgent에 'msie'나 'trident'가 대소문자 구별없이 포함되어 있는지?

}

비 IE 브라우저들은 거의 게코(gecko) 엔진에 기반하고 있기 때문에 많은 부분 호환되나 조금씩 다른 부분이 있어 구별이 필요할 수도 있다.

var a = navigator.userAgent;

if (/firefox/i.test(a))

{

// 파이어폭스

}

else if (/chrome/i.test(a))

{

// 크롬

}

else if (/safari/i.test(a))

{

// 사파리

}

else if (/opera|opr/i.test(a))

{

// 오페라

}

크롬과 사파리는 내부적으로 같은 엔진을 사용하고 있어 특별히 구별하지 않아도 대부분 같은 결과를 보인다.

if (/chrome|safari/i.test(a))

{

// 크롬과 사파리

}

모바일 브라우저의 구별

모바일 브라우저는 거의 웹 표준을 준수하고 있어 PC 환경 만큼 브라우저 사이의 차이가  그리 크지 않다.

따라서 모바일 환경에서는 어떤 브라우저냐 보다 모바일용 브라우저냐 아니냐를 알아나는게 더 중요하다.

그런데 문제는 현재 나와있는 모바일 기기가 너무 많고 각각의 기기는 기본으로 제공하는 브라우저마다 고유의 userAgent를 가지고 있다는 점이다.

이러한 모든 모바일 브라우저의 userAgent를 알아내서 프로그래밍한다는 것은 매우 어려운 일이다.

해서 현재 많이 쓰이는 기기를 대상으로 검사하게 된다.

if (/android|webos|iphone|ipad|ipod|blackberry|windows phone/i.test(navigator.userAgent))

{

// 현재 많이 사용중인 기기의 브라우저만 검사

}

현재 가장 많이 쓰이는 모바일 기기는 안드로이드 계열과 아이폰 계열이므로 아래와 같이만 해도 대개 만족한다.

if (/android|iphone|ipad|ipod/i.test(navigator.userAgent))

{

// 안드로이드 계열과 아이폰 계열만 검사

}

아이폰과 안드로이드 계열  브라우저는 대개 userAgent에 'Mobile'이라는 단어가 포함되어 있다.

따라서 아래와 같이 간단히 해도 대부분 포함한다고 볼 수 있다.

if (/mobile/i.test(navigator.userAgent))

{

// 모바일 브라우저 대부분은 userAgent에 'mobile'을 포함하고 있다.

}

출처 : http://blog.naver.com/hyunkh4097/40130140607

▶ dir 클래스를 이용한 목록구하기

function get_file_list($path, $arr=array()){
    $dir = dir($path);
    while($file = $dir->read()){
        if($file == '.' || $file == '..'){
            continue;
        }else if(is_dir($path.'/'.$file)){
            $arr = get_file_list($path.'/'.$file, $arr);
        }else{
            $arr[] = $path.'/'.$file;
        }
    }
    return $arr;
}

▶ opendir 핸들을 이용한 목록구하기
function get_file_list($path, $arr=array()){
    $dir = opendir($path);
    while($file = readdir($dir)){
        if($file == '.' || $file == '..'){
            continue;
        }else if(is_dir($path.'/'.$file)){
            $arr = get_file_list($path.'/'.$file, $arr);
        }else{
            $arr[] = $path.'/'.$file;
        }

    }
    closedir($dir);
    return $arr;
}

>> 개인적으로 2번의 opendir핸들을 이용한 목록 구하기 추천

>> 잡동사니 파일넣고 돌려본바로 2번이 빠름

예) 아래와 같은경로에서...

/test/a.txt
/test/a/a1.txt
/test/a/aa/aa1.txt

$path = '/test';

$arr = get_file_list($path);

-------------------------------

$arr[0] => /test/a.txt
$arr[1] => /test/a/a1.txt
$arr[2] => /test/a/aa/aa1.txt

https://www.apachefriends.org

워드프레스테마 Functions파일 이용하기

Functions.php 파일은 워드프레스테마를 만들때 테마를 위한 특정 기능을 추가 하는 파일입니다.

워드프레스가 실행 될때 이파일은 자동으로 인클루드 되기때문에 이 파일에 있는 함수는 모든 템플릿 파일에서 사용 할 수 있습니다.

우선 파일내의 함수를 만들기 전에 알아두어야 할 것이있습니다

훅(hook)입니다.

훅킹이라고도 합니다,  훅을 이용해 워드프레스가 실핼 되는 도중에 임의의 함수를 실행하여 기존의 함수나 출력을 변경 할 수 있습니다

훅에는 액션훅(add_action)과 필터훅(add_filter)이 있습니다

액션훅은 워드프레스에서 이벤트가 발생할때 실행하는것이며 필터훅은 콘텐츠의 내용을 변경할 때 사용하는 것입니다.

액션훅으로 처음 파라메터는 기존에 있는 훅입니다, 두번째는 추가할 함수, 세번째는 우선 순위이며 기본은 10입니다, 마지막으로 인수의 갯수이며 기본은 1입니다.

필터훅이며 처음파라미터는 기존에 있는 필터이며 나머지 는 액션훅과 동일합니다.

이제 가장 많이 쓰이는 액션훅과 필터훅에 대해 알아봤으니 functions.php파일에 자주쓰이는 몇가지를 추가 하도록 하겠습니다

우선 도메인 이름이 자주쓰이니 이것을 정의 하도록 하겠습니다

앞으로 제작하는 테마의 도메인은  tiis_get_domain()함수를 사용 하도록 하겠습니다.

차후 변경이 되면 define부분만 수정하면 됩니다.

워드프레스테마 셋업에 추가 함수

3라인의 내용은 포스트 타입에 사용할 것을 정의 하는 것입니다, 글쓰기 할대 오른쪽에 글형식에서 선택하는 부분입니다.

6라인은 Primary Menu라는 메뉴를 선언하는 부분이며 선언 후에는 테마의 서브메뉴에 “메뉴” 항목이 나오게 됩니다.

배열로 선언하기 때문에 여러개의 메뉴 타입을 선언하여 사용 할 수 있습니다

 11라인은 기본 섬네일 사이즈를 선언합니다

 12,13라인은 특정 섬네일을 선언하고 첫번째 파라메타를 이용하여 출력시 사용합니다.

위와 같이 사용하게 되면 500*200 사이즈에 크롭된 섬네일이 출력됩니다

마지막으로 16라인에서 after_setup_theme 훅에 만든 함수를 액션훅하게되면 완료됩니다.

자바스크립트와 CSS파일 추가하기

자바스크립트 파일과 CSS파일을 테마 폴더의 특정 디렉토리에 만든 후 위와 같이 하면 모든페이지 로딩시 추가 됩니다

함수를 만들고 wp_enqueue_scripts에 액션훅을 추가하면 끝~~~

사이드바 위젯영역 셋팅

위와 같이 함수를 만든 후 widgets_init에 훅추가를 하면 사이드바 위젯영역이 테마 위젯메뉴에 나오게 됩니다

테마에서 사용할때는 아래와 같이 코딩합니다.

지금까지 액션훅(add_action)만 소개 하였는데 필터훅(add_filter)한가지만 하고 글을 마치도록 하겠습니다

the_excerpt 함수에서 more 출력 방식 변경

기존의 excerpt_more에 새로운 함수를 적용하면 아래와 같이 새로운 함수의 결과가 출력 됩니다.

2라인의 Read more… 부분을 아래와 같이 수정하면

get_the_title() 함수는 포스트 제목을 불러오는 것이기때문에 제목 다음에 Read more… 이 출력됩니다.

이상 간단히 Functions.php 파일의 이용 방법을 알아봤습니다

아래 주소는 각각의 레퍼런스 사이트이며 주소 마지막에 함수 필터 액션 명 입력하면 바로 나옴니다

자세한 워드프레스 함수는 http://codex.wordpress.org/Function_Reference/

필터는 http://codex.wordpress.org/Plugin_API/Filter_Reference/

액션은 http://codex.wordpress.org/Plugin_API/Action_Reference/

출처 : http://www.wpdev.kr/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4%ED%85%8C%EB%A7%88-functions%ED%8C%8C%EC%9D%BC-%EC%9D%B4%EC%9A%A9%ED%95%98%EA%B8%B0/