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

 

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

Posted by 꼬장e
,

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

 

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

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

Posted by 꼬장e
,

● 선그리기

<!-- 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);

Posted by 꼬장e
,

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

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

 

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

 

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

 

 

Posted by 꼬장e
,

[PHP]쿠키

WEB 2015. 3. 18. 16:19

● 생성

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

 

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

 

● 삭제

setcookie( "이름", "", 0 ) 혹은 setcookie( "이름" )

 

 
Posted by 꼬장e
,

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

 

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

 

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

 

 

# BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

# END WordPress
 

 

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

 

 

Options +FollowSymLinks
AllowOverride FileInfo

 

 

Posted by 꼬장e
,

출처 : 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'을 포함하고 있다.

}


Posted by 꼬장e
,

출처 : 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



Posted by 꼬장e
,

xampp 다운로드 주소

WEB 2015. 1. 13. 12:50

https://www.apachefriends.org

 

 

 

Posted by 꼬장e
,

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

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

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

 

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

훅(hook)입니다.

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

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

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

 

1
<?php add_action( $hook, $function_to_add, $priority, $accepted_args ); ?>

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

 

1
<?php add_filter( $tag, $function_to_add, $priority, $accepted_args ); ?>

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

 

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

 

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

1
2
3
4
5
define('THIS_DOMAIN', 'wpdev');
 
function this_get_domain() {
 return constant('THIS_DOMAIN');
}

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

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

 

 

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function wpdev_setup() {
 
add_theme_support( 'post-formats',
                    array( 'aside', 'image', 'video', 'link', 'quote', 'status' ) );
 
 register_nav_menus( array(
 'primary' => __( 'Primary Menu', this_get_domain() ),
 ) );
 
 add_theme_support( 'post-thumbnails' );
 set_post_thumbnail_size(720, 380, true);
 add_image_size('article-box-thumbnail', 500, 200, true);\
 add_image_size('article-list-thumbnail', 1024);
 
}
add_action( 'after_setup_theme', 'wpdev_setup' );

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

글형식

 

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

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

메뉴

메뉴지정

 

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

 

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

1
2
3
if ( has_post_thumbnail() ) {
    the_post_thumbnail('article-box-thumbnail', array('class' => 'img-responsive'));
}

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

 

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

 

 

 

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function wpdev_scripts_styles(){
 
// css
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/include/bootstrap/css/bootstrap.css', array(), null, 'all' );
 
wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/fonts/font-awesome-4.1.0/css/font-awesome.min.css', array(), null, 'all' );
 
wp_enqueue_style( 'googleapis-font1', 'http://fonts.googleapis.com/css?family=Oswald:400,700,300', array(), null, 'all' );
 
&nbsp;
 
// js
wp_enqueue_script( 'jquery-min', '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', array(), null, true );
 
wp_enqueue_script( 'jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js', array(), null, true );
 
wp_enqueue_script( 'bootstrapjs', get_template_directory_uri() . '/include/bootstrap/js/bootstrap.min.js', array(), null, true );
 
wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom.js', array(), null, true );
 
}
 
add_action( 'wp_enqueue_scripts', 'wpdev_scripts_styles' );

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

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

 

 

 

사이드바 위젯영역 셋팅

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function wpdev_widgets_init() {
 
register_sidebar( array(
'name' => __( 'Primary Sidebar', this_get_domain() ),
'id' => 'sidebar-primary',
'description' => __( '기본 사이드바로 Single post의 좌측 영역에 위치', this_get_domain() ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
 
register_sidebar( array(
'name' => __( 'Left Front Page Widget Area', this_get_domain() ),
'id' => 'sidebar-top-left',
'description' => __( '메인페이지 하단 왼쪽', this_get_domain() ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
 
register_sidebar( array(
'name' => __( 'Center Front Page Widget Area', this_get_domain() ),
'id' => 'sidebar-top-center',
'description' => __( '메인페이지 하단 가운데', this_get_domain() ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
 
register_sidebar( array(
'name' => __( 'Right Front Page Widget Area', this_get_domain() ),
'id' => 'sidebar-top-right',
'description' => __( '메인페이지 하단 오른쪽', this_get_domain() ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
 
}
add_action( 'widgets_init', 'wpdev_widgets_init' );

 

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

사이드바위젯영역

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

1
2
3
4
5
<?php if ( is_active_sidebar( 'sidebar-primary' ) ) : ?>
<div id="sidebar-primary" class="widget-area col-md-3" role="complementary">
<?php dynamic_sidebar( 'sidebar-primary' ); ?>
</div>
<?php endif; ?>

 

 

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

 

 

 

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

1
2
3
4
5
function new_excerpt_more( $more ) {
return ' <p><a class="read-more" href="'. get_permalink( get_the_ID() ) . '"><i class="fa fa-plus"></i> ' . __('Read more...', this_get_domain()) . '</a></p>';
}
 
add_filter( 'excerpt_more', 'new_excerpt_more' );

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

 

excerpt_more

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

1
return ' <p><a class="read-more" href="'. get_permalink( get_the_ID() ) . '"><i class="fa fa-plus"></i> ' .get_the_title().__('Read more...', this_get_domain()) . '</a></p>';

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

 

excerpt_more2

 

 

 

이상 간단히 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/




Posted by 꼬장e
,