레이블이 Client-Side인 게시물을 표시합니다. 모든 게시물 표시
레이블이 Client-Side인 게시물을 표시합니다. 모든 게시물 표시

2010. 6. 7.

CSS3 embossing, highlight, gradient effect

text embossing effect

<주요 속성 요약>
#test1 {
     color: #ccc; font-size: 55px; font-weight: bold; background-color: #b38f00;
     text-shadow: 0 1px 0 #fff, 0 -1px 0 #000; 
     border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
}

<속성 설명 >
- 첫번째 : X좌표     - 두번째 : Y좌표     - 세번째 : 블러     - 네번째 : 색상


box highlight effect


<주요 속성 요약>
#test2 {
     color: #ccc; font-size: 55px; font-weight: bold; background-color: #bbb;
     text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;
     border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
   box-shadow: 4px 4px 4px #555, -4px -4px 4px #555, 4px -4px 4px #555, -4px 4px 4px #555;
     -moz-box-shadow: 4px 4px 4px #555, -4px -4px 4px #555, 4px -4px 4px #555, -4px 4px 4px #555;
     -webkit-box-shadow: 4px 4px 4px #555, -4px -4px 4px #555, 4px -4px 4px #555, -4px 4px 4px #555;
}

<속성 설명>
- 첫번째 : X좌표     - 두번째 : Y좌표     - 세번째 : 블러     - 네번째 : 색상

linear gradient effect


<주요 속성 요약>
test3 {                    
     background: -moz-linear-gradient(90deg, #1a1a1a, #808080);
     background: -webkit-gradient(linear, 0 0, 0 100%, from(#808080), to(#1a1a1a));
}

<속성 설명 -moz-linear-gradient>
- 첫번째 : 각도. 0deg 왼쪽에서 시작, 90deg 아래에서 시작
- 두번째 : 시작 색     - 세번째 : 끝나는 색

<속성 설명 -webkit-gradient>
- 첫번째 : 타입 (radial or linear)
- 두번째 : 해당 타입이 적용될 영역의 %단위, 오른쪽 밑
- 세번째 : 해당 타입이 적용될 영역의 %단위, 왼쪽 위
- 네번째 : 시작 색     - 다섯째 : 끝나는 색


작성자: 시간: 댓글 없음:
라벨: , , , , , , ,

2010. 6. 6.

HTML5 meta Tag

1. 문서 설명 : 검색엔진에 좀 더 노출 시킬 수 있다.
<meta name="description" content="HTML5 Tutorial" />

1. 문서 키워드 : 검색엔진에 좀 더 노출 시킬 수 있다.
<meta name="keywords" content="HTML5,CSS3,JavaScript" />

1. 문서 작성자를 정의
<meta name="author" content="Jace Park" />

1. 문서 수정자와 날짜 정의
<meta name="revised" content="Jace Park, 07/06/2010" />

1. 문자인코딩 정의
<meta charset="cp949" />

1. 페이지 리다이렉트 (5초 뒤, 해당url로 이동한다.)
<meta http-equiv="refresh" content="5;url=http://www.abc.com/" />

1. 페이지 리플레시 (5초 간격)
<meta http-equiv="refresh" content="5" />

1. 문서 편집기 정의
<meta name="generator" content="Gvim 7.2">

1. 어플리케이션 이름 정의: 만일 어플리케이션 이름이 없다면 정의하지 안아도 좋다.
<meta name="APPLICATION-NAME" content="Long headed application">

1. 웹크롤러에 노출여부 결정 (noindex - 문서 긁어가지 않음, nofollow - 문서 내 링크 긁어가지 않음)
<meta name="robots" content="noindex,follow" />
작성자: 시간: 댓글 없음:
라벨: ,

JavaScript - Zoo Keeper

zookeeper_1.zip

Javascript로 Zoo Keeper를 만들었습니다.

더 깨질 블럭이 없는 경우 판을 재배치하는 기능과
동시에 여러개 블럭을 움직였을 때의 경우가 구현이 안되었습니다.
그 밖에 미쳐 발견하지 못한 버그가 있을 수 있겠지만
일단은 프로토타입 거의 완성입니다!

물론 css로 눈속임을 했고, 기능이 완벽하지 않지만 뿌듯하네요.
이번 프로젝트를 통해서 게임을 만들기 위해서 어떤 고민을 해야하는지를 꺠달았습니다.

향후 구현하지 못한 부분을 완성시키고,
html5, css3, javascript UI library(스크립타큘러스 또는 제이쿼리 UI 등등)를 이용해서
좀더 화려한 게임으로 업그레이드 시키고 싶네요.
작성자: 시간: 댓글 없음:
라벨: , , , , ,

2010. 5. 10.

CSS3와 jQuery TOOLS 를 사용한 탭디자인

jQuery 기반 UI Library인 jQuery TOOLS가 나온 소식을 몇일전에 접했습니다.

자바스크립트 코드 몇줄이면 멋진 UI가 튀어나오더군요.

너무 재밌어서 데모를 시연해보다가 탭 디자인 한개를 직접 사용해봤습니다.


<탭 디자인 그림파일>


1. jQuery와 jQuery TOOLS 링크입니다.

펼쳐두기..


2. css3를 적용했습니다. (참고사이트 : http://www.designlog.org/2512076)

펼쳐두기..


3. HTML

펼쳐두기..


4. jQuery TOOLS를 사용한 자바스크립트

펼쳐두기..



이 링크를 따라가시면 jQuery TOOLS 데모를 볼 수 있습니다.
      
작성자: 시간: 댓글 없음:
라벨: , , , , , , ,

2010. 4. 27.

[Prototype, Script.aculo.us] twitter Top tweets 따라하기



















twitter.com에서 Top tweets에서의 push notification이 흥미로워서

javascript에서 흉내만 내봤다.

오랜만에 prototype과 scriptaculous를 써서 그런지 버벅거리긴 했다.

---------------------------<Source Code>----------------------------------
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/effects.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css" charset="utf-8">
        #input {
            width: 200px;
            margin-bottom: 5px;
        }
        #button {
            width: 60px;
            height: 30px;
            margin-bottom: 10px;
            border: 1px solid #CCCCCC;
        }
        #wrapper {
            height: 200px;
            overflow: hidden;
        }
        #comments {
            width: 200px;
            height: 250px;
            overflow: hidden;
        }
        .talk {
            height: 49px;
            color: #FFFFFF;
            background-color: #23A420;
            border-bottom: 1px solid #000000;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="input" />
        <div id="button">click</div>
    </div>
    <div id="wrapper">
        <div id="comments">
            <div id="5" class="talk">
                <div>5</div>
            </div>
            <div id="4" class="talk">
                <div>4</div>
            </div>
            <div id="3" class="talk">
                <div>3</div>
            </div>
            <div id="2" class="talk">
                <div>2</div>
            </div>
            <div id="1" class="talk">
                <div>1</div>
            </div>
        </div>
    </div>
    <script type="text/javascript" charset="utf-8">
    <!--
        // setting id of first-child
        var comments = $('comments').childElements();
        var nowId = comments[0].id;

        $('button').observe('click', function () {
            // create new comment element
            var superDiv = document.createElement('div');
            superDiv.className = 'talk';
            nowId++;
            superDiv.id = nowId;
           
            var childDiv = document.createElement('div');
            childDiv.innerHTML = $('input').value;
            superDiv.appendChild(childDiv);
           
            // attach new comment
            $('comments').insert({
                top: superDiv
            });
           
            new Effect.SlideDown(superDiv);
            new Effect.Opacity(superDiv, {from: 0, to: 1});

            // remove last comment
            var newComments = $('comments').childElements();
            var len = newComments.length;
            newComments[len-1].remove();
        });
    //-->
    </script>
</body>
</html>
작성자: 시간: 댓글 없음:
라벨: , , , , ,

2010. 3. 10.

PHP에서 OAuth 사용하기

http://wiki.opensocial.org/index.php?title=Validating_Signed_Requests
여기보면 OAuth 사용법이 상세히 나와있고,
내가 자주쓰는 PHP와 요즘 관심이 가는 JAVA 코드를 상세히 봤다.

잠시 PHP 코드를 소개하면 이렇게 되어있다.
--------------------- Source Code ------------------------

<?php
   require_once("OAuth.php");
 
   class OrkutSignatureMethod extends OAuthSignatureMethod_RSA_SHA1 {
     protected function fetch_public_cert(&$request) {
       return <<<EOD
 -----BEGIN CERTIFICATE-----
 MIIDHDCCAoWgAwIBAgIJAMbTCksqLiWeMA0GCSqGSIb3DQEBBQUAMGgxCzAJBgNV
 BAYTAlVTMQswCQYDVQQIEwJDQTEWMBQGA1UEBxMNTW91bnRhaW4gVmlldzEUMBIG
 A1UEChMLR29vZ2xlIEluYy4xDjAMBgNVBAsTBU9ya3V0MQ4wDAYDVQQDEwVscnlh
 bjAeFw0wODAxMDgxOTE1MjdaFw0wOTAxMDcxOTE1MjdaMGgxCzAJBgNVBAYTAlVT
 MQswCQYDVQQIEwJDQTEWMBQGA1UEBxMNTW91bnRhaW4gVmlldzEUMBIGA1UEChML
 R29vZ2xlIEluYy4xDjAMBgNVBAsTBU9ya3V0MQ4wDAYDVQQDEwVscnlhbjCBnzAN
 BgkqhkiG9w0BAQEFAAOBjQAwgYkCgYEAseBXZ4NDhm24nX3sJRiZJhvy9eDZX12G
 j4HWAMmhAcnm2iBgYpAigwhVHtOs+ZIUIdzQHvHeNd0ydc1Jg8e+C+Mlzo38OvaG
 D3qwvzJ0LNn7L80c0XVrvEALdD9zrO+0XSZpTK9PJrl2W59lZlJFUk3pV+jFR8NY
 eB/fto7AVtECAwEAAaOBzTCByjAdBgNVHQ4EFgQUv7TZGZaI+FifzjpTVjtPHSvb
 XqUwgZoGA1UdIwSBkjCBj4AUv7TZGZaI+FifzjpTVjtPHSvbXqWhbKRqMGgxCzAJ
 BgNVBAYTAlVTMQswCQYDVQQIEwJDQTEWMBQGA1UEBxMNTW91bnRhaW4gVmlldzEU
 MBIGA1UEChMLR29vZ2xlIEluYy4xDjAMBgNVBAsTBU9ya3V0MQ4wDAYDVQQDEwVs
 cnlhboIJAMbTCksqLiWeMAwGA1UdEwQFMAMBAf8wDQYJKoZIhvcNAQEFBQADgYEA
 CETnhlEnCJVDXoEtSSwUBLP/147sqiu9a4TNqchTHJObwTwDPUMaU6XIs2OTMmFu
 GeIYpkHXzTa9Q6IKlc7Bt2xkSeY3siRWCxvZekMxPvv7YTcnaVlZzHrVfAzqNsTG
 P3J//C0j+8JWg6G+zuo5k7pNRKDY76GxxHPYamdLfwk=
 -----END CERTIFICATE-----
 EOD;
     }
   }
 
   //Build a request object from the current request
   $request = OAuthRequest::from_request(null, null, array_merge($_GET, $_POST));
 
   //Initialize the new signature method
   $signature_method = new OrkutSignatureMethod();
 
   //Check the request signature
   @$signature_valid = $signature_method->check_signature($request, null, null, $_GET["oauth_signature"]);
 
   //Build the output object
   $payload = array();
   if ($signature_valid == true) {
     $payload["validated"] = "Success! The data was validated";
   } else {
     $payload["validated"] = "This request was spoofed";
   }
 
   //Add extra parameters to help debugging
   $payload["query"] = array_merge($_GET, $_POST);
   $payload["rawpost"] = file_get_contents("php://input");
 
   //Return the response as JSON
   print(json_encode($payload));

--------------------- Source Code ------------------------

너무도 당연한 이야기지만 $signature_vaild == true 인 경우
DB단과 작업을 진행하거나, 서버쪽 작업을 진행하면 된다.

이렇게 대놓고 소스코드에 써있는데 한참을 보고 알아버리다니....
역시 제 프로그래밍 기초에 대한 회의감마저 드네요;;
작성자: 시간: 댓글 없음:
라벨: , , ,

2009. 12. 5.

[html]테이블의 올바른 사용법

http://hyeonseok.com/soojung/webstandards/2009/11/12/554.html

 

신현석님의 블로그에 자세한 설명이 나와있습니다.


- 09년 11월 17일 19시 21분 -

작성자: 시간: 댓글 없음:
라벨: , , , ,

이메일 체크.

var emailRegEx = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var email = $('email').value;

if( !email.match(emailRegEx) ){
window.alert("이메일 양식에 맞게 입력하세요.");
}

- 09년 9월 24일 15시 4분 -
작성자: 시간: 댓글 없음:
라벨: , , ,

javascript mootools addEvent 주의사항.

$(element).addEvent(event, function);    <- addEvent 문법.


mootools에서 addEvent를 사용하는 경우 주의사항이 있다.
function부분을 잘 살펴 보자.

만일 함수부분에서 메소드를 호출하는 경우,

$(element).addEvent(click, Dog.bark());
이런식으로 사용하게 되면 돔에 이벤트 리스너를 붙임과 동시에 실행을 하게 된다.

$(element).addEvent(click, Dog.bark);
이렇게 하면 실행은 하지 않은채 이벤트 리스너만 붙인다.


prototype의 경우도 마찬가지이다.

$(element).observe(click, Dog.bark());
-> 이벤트 리스너를 돔에 붙임과 동시에 실행.
$(element).observe(click, Dog.bark);
-> 이벤트 리스너를 돔에 붙인다. 실행은 하지 않는다.

- 09년 9월 17일 23시 4분 -
작성자: 시간: 댓글 없음:
라벨: , , , ,

jsdoc 실행하기.


jsdoc 실행하기.

간만에 실행했더니 가물가물 하네요.

워낙 코드보기가 쉽지 않다는 자바스크립트를 위해 나왔죠.

- 09년 9월 15일 16시 22분 -
작성자: 시간: 댓글 없음:
라벨: , , ,

Prototype => Element.extend

this.a = document.createElement('a');

var Item = this.a;

Item.toggleClassName('class');

IE에서 문제가 생길 수 있다.

=========================================

IE에서 createElement를 이용해서 DOM을 생성했다면,
그리고 Prototype의 명령어를 사용해야 한다면,

Element.extend 를 사용할 것.

참고
http://prototypejs.org/learn/extensions

- 09년 8월 20일 14시 44분 -
작성자: 시간: 댓글 없음:
라벨: , , , , ,

hover를 위한 li태그와 a태그.

li태그 안에 a태그를 이용해서 html 코딩을 해야지만,
IE6등 하위버전 웹브라우저에서 hover기능을 활용할 수 있다.

여기서 id 값을 li태그에 주느냐, a태그에 주느냐에 따라 크로스 브라우징 시에
문제가 상당히 달라질 수 있다.

a태그에 주는 것이 IE에서나 FF에서나 용이하다고 생각한다.

<li><a href="#" id="id" class="class" onClick="return false;"> 내용</a></li>

- 09년 8월 20일 14시 34분 -
작성자: 시간: 댓글 없음:
라벨: , , , , ,

2009. 12. 4.

div(block element) vs span(inline element)

div 안에는 span 들어갈 수 있다.
span 안에는 div 들어가면 표준에 위배된다.

=============================================================================

* Strict HTML 4.01로 가기 위한 지침서
1. 모든 웹페이지는 DOCTYPE로 시작, <html>~</html>로 끝나야 함
2. <head><body>를 반드시 사용해야 함
3. <title>을 반드시 사용해야 함
4. <body>에는 블록 엘리먼트만 넣어야 함(입력했을 때 자동으로 행이 분리되는 태그, h1, h2, ..., p, blockquote 등)
5. 블록 엘리먼트들은 인라인 엘리먼트 밖에 둬야 함
6. 블록 엘리먼트들은 <p> 엘리먼트 밖에 둬야 함(<p> 문단은 텍스트를 위한 것)
7. 리스트는 리스트 항목들만을 위한 것임(ul, ol안에는 li만 올 수 있음)
8. 리스트 항목에는 원하는 것을 무엇이든지 넣을 수 있음
9. blockquote에는 오직 블록 엘리먼트만이 올 수 있음(<p>,</p>엘리먼트 등)
10. 다른 인라인 엘리먼트 안으로 인라인 엘리먼트를 중첩시킬 때는 주의할 것!

- 09년 3월 24일 20시 44분 -
작성자: 시간: 댓글 없음:
라벨: , , , , ,

2009. 12. 3.

name=contents readOnly

<textarea name=contents readOnly> : 스타일시트. 게시판을 읽기전용으로 바꾼다.

 

원래는 ELEMENT disabled="true" 를 이용했는데

 

이경우는  textarea의 글자색이 은색으로 고정되어 있기 때문에

 

위의 방법을 이용해서 글자색까지 바꿔줄 수 있게 만들었다.

- 06년 11월 27일 13시 45분 -

작성자: 시간: 댓글 없음:
라벨: , , , , ,
피드 구독하기: 글 (Atom)