Clipboard 복사하기 – ZeroClipboard

 smlee  No Responses »
Aug 282012
 

웹페이지에서 특정 소스를 클립보드에 복사를 해주는 경우가 있다.
해당 페이지를 사용하는 사용자 입장에서는 편리한 기능이지만, 이를 구현하는 방법은 쉽지가 않다. IE만 지원을 한다면 window.clipboardData Object를 이용해서 간단하게 구현이 가능하다. 대부분 국내 소스들도 해당 스크립트를 이용해서 처리를 하고 있지만, Internet Explorer에서만 제한적으로 사용이 가능하다.

다른 브라우저에서도 지원이 되고, 다른 운영체제(리눅스, OsX, …)에도 지원이 되는 클립보드를 구현하기 위해서 찾은 zeroclipboard 오픈소스를 소개합니다.
대부분 다른 클립보드 지원 소스가 비슷한 원리를 사용하고 있는데, 플래시(Adobe Flash)를 이용하여 클라이언트로 데이타를 전달하는 방식을 사용하고 있다. 여러 오픈 소스를 확인하다 보니, Flash Player 10에서는 지원이 되지 않는 것이 있어서 확인을 해봐야 한다.

아래는 ZeroClipboard 사용방법이다. JavaScript 파일을 추가한 다음에 복사할 문자열을 지정을 하고, 해당 동작을 원하는 HTML에 붙이기만 하면 된다. DOM의 id 값으로 지정을 하기만 하면 동작하게 된다.

        <html> 
        <body> 
                <script type="text/javascript" src="ZeroClipboard.js"></script> 
 
                <div id="d_clip_button" style="border:1px solid black; padding:20px;">Copy To Clipboard</div> 
 
                <script language="JavaScript"> 
                        var clip = new ZeroClipboard.Client(); 
                        clip.setText( 'Copy me!' ); 
                        clip.glue( 'd_clip_button' ); 
                </script> 
        </body> 
        </html>

참고 URL : http://code.google.com/p/zeroclipboard/
테스트 페이지 : http://bowser.effectgames.com/~jhuckaby/zeroclipboard/
메뉴얼(WIKI) : http://code.google.com/p/zeroclipboard/wiki/Instructions

CSS에서 Margin과 Padding, Border 이해하기

 Internet  No Responses »
Aug 282012
 

전문적인 디자인은 아니지만, CSS를 이용해서 HTML을 코딩하면 항상 접하게 되는 항목이 margin, padding, border 이다.

특히 정확한 픽셀을 계산하기 위해서는 실제 width에 maring과 padding, border값이 어떻게 적용되는지를 파악해야만 한다.

일단 W3C를 참고해보면 CSS는 아래와 같은 구조를 가지고 있다.

css box model

이를 기반으로 width와 height를 계산하는 방식은 다음과 같다.

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

자세한 설명은 아래을 참고하면 된다. 홈주소창을 만들때 아래이 방법이 많은 도움을 되었다.

그리고 HTML 표준모드가 아닌 호환모드가 있다. 즉 HTML 헤더에 DOCTYPE이 제대로 정의되지 않는 형태로 이런 경우에는 위의 공식이 적용되지 않는다. 그래서 호환모드에서는 계산 방법을 달리해야 한다. 홈주소창에서는 2가지 모드에 대해서 별도의 계산식을 사용해서 처리를 함으로써 크로스 브라우저 및 HTML 모드를 지원했다.

참고 URL : http://www.w3schools.com/css/css_boxmodel.asp

svn 패스워드 저장하지 않기

 System  No Responses »
Aug 282012
 

동일한 계정으로 여러 명이 svn을 사용하는 경우에는 패스워드를 저장하지 않고, commit 하는 사용자별로 자신의 계정을 사용해서 commit을 하는 것이 효과적입니다.

대개 개발서버를 두고 작업을 하는 경우에 이렇게 하면 누가 commit을 하고, 해당 파일을 마지막에 수정했는지를 쉽게 파악이 가능합니다.

svn 을 shell에서 사용할때 패스워드 저장하지 않는 방법입니다.

1. 기존에 저장된 패스워드 삭제

    [smlee@localhost .subversion]$ pwd
    /home/smlee/.subversion

    [smlee@localhost .subversion]$ mv auth oldauth

2. 패스워드 저장하지 않는 옵션 변경

    [smlee@localhost .subversion]$ pwd
    /home/smlee/.subversion

    [smlee@localhost .subversion]$ grep password config
    ### Set password stores used by Subversion. They should be
    ### the order in which password stores are used.
    ### Valid password stores:
    # password-stores = gnome-keyring,kwallet
    ### Both ‘store-passwords’ and ‘store-auth-creds’ can now be
    ### Set store-passwords to ‘no’ to avoid storing passwords in the
    ### but Subversion will never save your password to disk in
    ### Note that this option only prevents saving of *new* passwords;
    ### it doesn’t invalidate existing passwords. (To do that, remove
    store-passwords = no

3. 이후에 svn commit을 하게 되면 마지막 commit 한 사용자의 패스워드를 입력해야만 commit 이 가능해짐
==> 만약 자신의 계정이 아닌 경우에는 아래와 같이 패스워드를 입력하지 않고 엔터만 입력해서 사용자 변경 가능

    [smlee@localhost public_html]$ svn commit
    인증 영역(realm): 0ee1c4cf-d430-49e6-9165-ac7844d2f91e
    ‘smlee’의 암호:
    인증 영역(realm): 0ee1c4cf-d430-49e6-9165-ac7844d2f91e
    사용자명:

EUC-KR to UTF-8

 System  No Responses »
Aug 282012
 

최근의 대부분 웹페이지는 UTF-8을 사용하고 있습니다.

예전에 만들어진 EUC-KR 페이지를 UTF-8로 변환하는 경우가 많이 있습니다.
이런 경우에 일일이 파일을 converting을 해야 하는데요. 간단한 스크립트를 이용해서 편리합니다.

[smlee@localhost ~]# cat conv.sh
#!/bin/sh
 
set -x
iconv -f uhc -t utf-8 $1 > /tmp/a
RET=$?
 
if [ $RET -eq 0 ]; then
        mv /tmp/a $1
else
        echo "FAIL : $1";
fi

위의 스크립트를 ls -1 > 1.sh 로 만든 다음에 vi에서 1.sh를 치환해서 모든 파일에 대해서 conv.sh를 실행하도록 아래와 같이 설정하면 빠르게 치환이 가능합니다.

[smlee@localhost ~]# cat 1.sh
sh conv.sh index.php
sh conv.sh main.php

CKEditor

 Program  No Responses »
Aug 282012
 

웹페이지를 개발할때 간단한 글쓰기에서 HTML이 지원되는 에디터를 사용하기 위해서 찾은 오픈소스입니다.

http://ckeditor.com/

사용법도 아주 간단하며, PHP 모듈도 지원이 되어, 설치 후에 아래와 같이 PHP 코드를 추가해주면 됩니다.

content라는 textarea name으로 된 부분을 HTML 에디터로 변경해줍니다.

    <?php
    include $_SERVER["DOCUMENT_ROOT"]."/ckeditor/ckeditor_php5.php";
 
    $CKEditor = new CKEditor();
    $CKEditor->basePath = '/ckeditor/';
    $CKEditor->replace("content");
    ?>
 Older Entries
Plugin from the creators of Brindes :: More at Plulz Wordpress Plugins