• 모질라 개발자 센터 - Canvas Tutorial (Canvas를 다루기위한 Javascript 메쏘드,속성)
• Canvas 데모페이지

• 인터랙티브한 이미지 편집 : 자르기, 리사이징, 필터적용
• 래스터 그래픽 생성 : 데이타 표현, 데이터 플롯, 챠트등
• 이미지 분석 
• 게임 그래픽 등

• 해상도 독립적인 웹애플리케이션 사용자 인터페이스
• 매우 인터랙티브하고 애니메이션 되는 사용자 인터페이스
• 데이타 챠트
• 벡터 이미지 편집

1. CSS Resets 이나 overrid된 속성들
2. Link 와 type
3. Main layout
4. Sub layout structures
5. Form 요소
6. 기타

• Future of CSS

delete objectNamedelete objectName.property
delete objectName[index]delete property // with 문장 안에서만 유효

var x=42;
var y= 43;
var myobj=new Number();
myobj.h=4;      // h라는 속성을 만듭니다
delete x;       // returns true (암시적으로 선언된 변수는 지울 수 있습니다)
delete y;       // returns false (var로 선언한 변수는 지울 수 없습니다)
delete Math.PI; // returns false (미리 정의된 속성은 지울 수 없습니다)
delete myobj.h; // returns true (사용자 정의 속성은 지울 수 있습니다)
delete myobj;   // returns true (암시적으로 선언되었으므로 지울 수 있습니다)

trees=new Array("redwood","bay","cedar","oak","maple");
delete trees[3];
if (3 in trees) {   // 이 블록은 실행되지 않는다.
   alert(trees[3]);
}

trees=new Array("redwood","bay","cedar","oak","maple");
trees[3]=undefinedif (3 in trees) {   // 이 블록은 실행된다.
}

var a=document.getElementsByTagName('div');
 for(i=0;i

delete a.member; 

delete Integer.prototype.toUnsigned; 

Object.prototype.extend=function(obj){
       for(var x in obj)
           this[x]=obj[x];
       return this;
 }

var ob={
    a:'가',
    b:'나',
    c:function(){
        return '다';
      },
    d:4
};

ob=ob.extend({e:5,f:'라마바',g:(function(ret){return ret;})('사아자차카타파하')}); 
delete Object.prototype.extend; 

var Vervain = new Herb();
var Verbena = Vervain;  

var Vervain = new Herb();
var Verbena = new Herb();  
Vervain.see = Verbena;  
Verbena.see = Vervain;  

//IE일 경우 모든 이벤트 및 프로퍼티 삭제
if(Ext.isIE) {
    function fnCleanUp() {
        var p = Function.prototype;
        delete p.createSequence;
        delete p.defer;
        delete p.createDelegate;
        delete p.createCallback;
        delete p.createInterceptor;
        window.detachEvent("onunload", fnCleanUp);
    }
    window.attachEvent("onunload", fnCleanUp);
}//객체 destory 처리
destroy : function(){
    Ext.each(arguments, function(arg){
        if(arg){
            if(Ext.isArray(arg)){
                this.destroy.apply(this, arg);
            }else if(Ext.isFunction(arg.destroy)){
                arg.destroy();
            }else if(arg.dom){
                arg.remove();
            }
         }
    }, this);
},
destroyMembers : function(o, arg1, arg2, etc){
    for(var i = 1, a = arguments, len = a.length; i < len; i++) {
        Ext.destroy(o[a[i]]);
        delete o[a[i]];
    }
},
remove : function(o){
    var index = this.indexOf(o);
    if(index != -1){
        this.splice(index, 1);
    }
    return this;
}

사이트의 스플래쉬 페이지는 너무도 낡은 기법이다.  방문자들에게 잊혀지지 않는 느낌을 주기 위한 2010년의 트랜드는 특대형의 로고와 그와 걸맞는 특대형의 헤더이다.  이러한 류의 헤더는 전체 스크린을 차지하되, 하나의 중용한 메세지를 가지고 있다.  방문자는 아무것도 클릭을 할 필요가 없고, 그냥 스크롤 다운을 하면 된다.  방문자들은 (과거의 나쁜 네비게이션 경험으로 생긴) 종종 마우스클릭에 대한 공포를 가지고 있다. 그래서, 대형 헤더는 당신 사이트의 방문자들 이 무엇인가를 클릭하도록 강요하지 않으면서, 스플래쉬 페이지의 역할을 수행한다.

주요 아이디어: 커다란 헤더는 방문자들이 당신을 기억하게 만든다. 

http://ma.tt/

 

2. 스케치/손그림

손으로 그린 디자인은 새로운 것은 아니다. 하지만, 웹 디자인에서는 아직은 가장자리를 차지하고 있음을 알고 있다.  많은 디자이너들이 이러한 스타일에 감탄을 하면서도, "나는 잘 그리지 못해"라는 투의 태도때문에 이 스타일을 사용하기를 두려워하고 있다.  이러한 스타일의 디자인들은 미술박물관에 걸만한것은 아니라고 해도, 일탈의 감성적인 면을 전달을 할 수 있고, 차거운 웹 사이트와 친근한 인터랙션의 경계를 흐리게 할 수 있다 - 그게 인터넷의 궁극적 목적이 아니겠는가?  만약 그림을 끄적거릴 수 있다면, 당신은 이미 웹 디자인을 스케치 할 수 있다.

2010년에는 스케치는 웹 디자인상의 요소로 자리를 할 것이고, 웹 디자인의 주 초점이 되지는 않을 것이다.  또한 스케치는 표준적인 웹을 새롭고 흥미있는 것으로 개인화 시키는 데 사용이 될 것이다.

주요 아이디어: 스케치는 기업 웹 사이트 디자인의 "요소"가 될 것이다.

주요 아이디어: 슬랩 타이프는 당신 누구인지 과감하게 표현하기 위해 사용이 된다.

4. 타이포

타이포그라피는 적용하기에 가장 어려운 트렌드 중에 하나이기때문에, 2010년에도 싱싱하게 존재를 할 것이다.  사용성관련된 모든 걱정들 때문에, 웹 디자이너들은 새롭고 색다른 폰트를 사용하기를 꺼려한다.  다른 폰트사이즈들을 섞는 다는 생각은 절대로 할 수도 없는 것이 였다. 하지만, 폰트들은 탐구의 대상이고, 비틀고, 우리의 목적에 적합하도록 사용이 되어야 한다.  정확한 위치선정을 한다면, 타이포그라피를 주요 디자인 요로 사용을 하는 웹 사이트들은 수많은 사진들로 부담이 되는 사이트들 보다는 독자들에게 더 흥미로와 보일 것이다.

주요 아이디어: 타이포그라피의 사용은 아직 충분한 성장을 하지 못했지만, 웹 디자인의 한 부분으로 남아있을 것이다.

5. 한 페이지 레이아웃

한 페이지 레이아웃은 필요하지 않는 부분을 제거를 하게끔 하는 과제를 준다.  2010년에는 이 스타일이 특이한 네비게이션을 버리고 미니멀리즘 접근방식을 택할 것이다.  이러한 웹 사이트들을 비즈니스 카드라고 생각을 하라.  이러한 웹 사이트들은 당신과 다양한 사이트들에 퍼져있는 당신의 작업물들을 어떻게 찾을까를 알려주는 one-stop-shop이 될 것이다.

주요 아이디어: 한 페이지 레이아웃은 기업 사이트가 보다는 개인 프로파일에 더 적합하다.

 http://www.zachklein.com/

6. 큰이미지

대형 로고/헤더와 가까운 친척인 대형 이미지는 거의 같은 기능을 제공한다.  대형 이미지들은 방문자들이 쉽게 잊지 못할 효과를 준다.  위에서 이야기를 한 대형 헤더와는 달리, 대형 이미지는 사이트의 브랜딩과 관련이 있는 것은 아니다.  대신에, 이러한 이미지들은 방문자들을 사이트의 컨텐츠가 아니라면 이미지를 이용해서라도 방문자들을 사이트로 끌어들인다. 2010년에는, 웹 디자이너들은 사이트의 느낌을 전달하기 위해서, 대형 이미지를 사용하는 것을 더욱 편안하게 느낄것이다. 

주요 아이디어: 대형 이미지들은 방문자들을 초대하기 위해서 사용이 된다.

http://digitalmash.com/ 

7. 시각의 변화

이미 위에서 이야기를 한것과 같이, 데스크 탑 형태의 디자인은 지겹도록 사용이 되어왔다. 2010년에는  좀더 현실감있는 시각으로 변화가 될 것이다. 공간에서 옆을 보는 것과 같은 시각으로 이동도 있을 수 있다.

주요 아이디어: 2010년 여러가지 다른 시각/시점이 시도가 될 것이다.

http://downsign.deviantart.com/art/Book-Store-136542851

http://kpucu.deviantart.com/art/Pastorant-Restaurant-71565329

8.인터렉티브/직관적 디자인

Flash는 지금보다는 더 인기가 있었던 적이 있었다.  한때는 짜증스러운 Flash 인터페이스가 없는 사이트들을 피할 수 없었던 적도 있었다.  최근에는, Flash는 좀더 편안하고 좀더 전문스러워 졌다.  어떤 디자이너들은 폼이나 팝업을 위해서 jQuery를 더 선호할 수도 있지만, Flash는 적당하게 사용이 되었을때면 아직도 웹 디자인의 중요한 부분이다.  Flash은 인터랙티브한 면에서는 아직도 적수가 없다.  2010년에는 웹 디자인너들은 Flash를 좀더 보완할 수 있는 요소들로 이동을 할 것이다.  최근의 방문자들은 웹에 대해서 대부분 잘 알고 있기 때문에, 디자이너들은 과거의 사이트들 보다는 좀더 직관적인 사이트를 제작을 할 것이다.

주요 아이디어: 인터랙티브 디자인이 컴백을 할 것이다.

 http://www.crowleywebb.com/

9. 모달창

모달 윈도우는 2010년에는 말 그대로 사방에서 볼 수 있는 트랜드가 될 것이다.  모달 윈도우는 팝업하고는 달리 부드럽고, 모양도 좋고 더 인기가 많다. 모달 윈도우는 디자인과 사용이 너무 쉽게 때문에, 사용성을 염두에 두는 디자이너들에게는 최적의 해법이 될 것이다.

주요 아이디어: 모달윈도우는 2010년에도 지속적으로 사용이 될 것이다.

 http://digg.com/

10. 미니멀리즘

과거의 미니멀리즘 웹 사이트는 잊어도 좋다.  2010년의 웹 사이들은 많은 여백을 사용을 하되, 과감한 타이포그라피와 놀라운 컬러 스킴을 이용을 할 것이다.  모든 미니멀 웹 사이트들이 명확한 간결성 개념과 일치 하지는 않을 것이다. 미니멀리즘은 그 본연이 강도가 떨어지기는 하지만, 새로운 색상들이 채용이 될 것이다.  미니멀리즘은 차가운 것이 아니고, 따듯하고 핵심을 찌르는 것이다.

주요 아이디어: 미니멀리즘은 타이포그라피로 모험을 시도할 것이다.

 http://www.kylestanding.com/

11. 대형푸터

대형 푸터는 이미 여기저기에서 볼 수가 있지만, 2010년에는 좀더 과장되게 사용이 될 것이다. 앞으로의 푸터는 미약한 존재가 아닌 디자인의 중요한 부분이 될 것이다.  앞으로는 다양한 소셜미디어 사이트의 부터의 피드, 투표기능, 트위터 피드와 같은 무작위적인 정보를 포함을 하고 있는 푸터도 보게 될 것이다.

주요 아이디어: 대형 푸터는 중요도는 떨어지지만, 좀더 퍼스널한 정보를 제공을 할 것이다.

http://www.duirwaigh.com/

 http://oldloft.com/

12. 복고

복고풍의 디자인은 당분간 남아있을 것이다.  많은 수의 디자이너들이 복고풍의 디자인에 감탄을 하기는 하지만, "마무리"를 제대로 짓지 않는 느낌을 제대로 소화하는 것은 쉽지 않다.  복고풍 디자인의 디자인의 톤과 저변에 깔린 재미요소를 통한 영감을 받아야 한다.  2010년의 레트로 디자인은 구식예술을 존중하는 새로운 방법을 찾아갈 것이다.

주요 아이디어: 복고는 "새롭다"

 http://www.level2d.com/

13.  인트로 상자

2010년 디자이너들은 "안녕, 내이름.. " 하는 식의 자신을 방문자에게 소개하는 아름답기까지한 간결함을 알게될 것이다.  만일 당신이 창의적인 "About" 페이지 구성에 고민을 하고 있다면, 인트로 박스가 아마 최적의 답이 될 것이다.  인트로 박스는 당신이 누구인지를 제한된 면적을 통해 알려야 하기 때문에, 정보를 농축시키도록 강요할 것이다.  2010년의 인트로 박스는 그 사용영역을 단순 소개를 넘어서게 될 것이다.  지루한 "Hello"가 아닌 좀더 새로운 "인사법"을 디자이너들은 찾게 될 것이다.  그리고, 왼쪽에 치우쳐서 놓이는 인트로 박스가 아닌, 특이한 자리에 놓이는 - 예를 들면 페이지의 중간 같은 - 인트로 박스를 보게 될 것이다.

주요 아이디어: "Hello"를 하는 새로운 방법들

http://www.alessandro-cavallo.de/ 

14. 잡지형식의 레이아웃

사람들이 점점 더 전통적 인쇄물의 편안함에서 온라인으로 이동을 함에 따라, 디자이너들은 그들의 이동을 부드럽게 하는, 새로운 "환영 방법"을 찾고 있다.  한장의 홈페이지에 잘 정돈이 된 정보들을 가진, 잡지포맷의 디자인을 제공하여, 방문자들이 원하는 정보를 찾아보도록 하는, 이동이 생기고 있다.  잡지나 신문을 읽어본 사람이라면, 제공이 되는 익숙한 디자인에 호감을 갖을 것이고, 사용에 편안함을 느낄 것이다.  2010년에는 잡지포맷은 블로그에서 특히 인기가 있을 것이다.

주요 아이디어: 잡지 형태가 인포테인먼트 사이트에서 사용이 될 것이다.

 http://www.bmivoyager.com/

웹디자인에서 CSS float 속성은 인쇄레이아웃에서 이미지와 같이 해당 이미지 근처의 텍스트 흐름에 영향을 받게된다.  Float된 요소는 (floated elements) 웹페이지의 flow의 한 부분으로 남으며 이것은 고정된 위치값을 가진 요소들과 명백히 다르다.  위치가 고정된 페이지요소는 웹페이지내의 흐름속에서 제외되며 다른 요소에도 영향을 끼치지 못한다.

float속성은 다음과 같이 사용한다.

#sidebar {
   float: right;
}

float속성은 4개의 유효값을 가지고 있다  좌우방향을 표시하는 left와 right, 기본디폴트값인 none, 그리고 부모요소로 부터 상속(cascading)된 inherit속성이 그것이다.

Float속성은 어디에 사용되는가?


float속성값은 이미지를 둘러싸고 있는 텍스트에 사용되나 위 그림과 같이 전체 웹레이아웃을 생성하는데 사용되기도 한다.
또한 아래와 같이 전체레이아웃과 유사한 작은 구성 영역에도 사용된다.
아래의 예는 아바타 이미지와 해당 계정의 내용을 표시한것으로 float 속성을 사용한것이다.
아바타 이미지가 커지더라도 적절한 간격을 유지하며 포지셔닝된다.

그러나 위와 같이 같은 레이아웃이라도 상대적인 위치나 절대적위치값을 이용하여 사용한다면 아래 그림과 같이 이미지사이즈가 변할경우 레이아웃 자체가 깨질수 있다.
데꾸벅 주: 대부분의 경우 디자이너나 에디터의 경우 relative, absolute로 작업하는 경향이 많다. 이는 한국형 웹페이지(?)만의 특징이라고 볼수도 있겠지만 가장 화면레이아웃을 쉽고 빠르게 셋팅할수 있기 때문이다. 이러할 경우 웹표준으로 작업하더라도 그만큼의 효과를 얻지 못한다는 것이다.

float의 속성의 자매속성으로 clear가 있다.  HTML 요소는 float과 같이 흐름속성이 있다면 이와 같은 흐름을 제거하는 속성(clear)를 가지고 있다.

위그림에서 보는바와 같이   사이드바(sidebar)는 메인컨텐츠(Main content)영역보다 짧게 오른쪽으로 float이 되어있으며 footer영역이 main content영역만큼을 채우려고 올라와 있다. 이와같은 문제를 해결하려면 아래와 같이 footer에 clear 속성으로 흐름을 제어하면 된다.

#footer {
   clear: both;
}

 clear속성은 4가지 속성값을 가지고 있는데 보통 양쪽흐름을 끊는 "Both"속성을 많이 사용한다. 왼쪽과 오른쪽 흐름을 끊는 "left", "right" 와  기본값으로 "none", 부모객체의 속성값을 상속(cascading)받는 "inherit" 이 있다.

겹침문제

float속성을 사용해서 작업하다보면 곤혹스런경우를 많이 당하게 되는데 아래 그림과 같이 float속성을 가진 객체의 부모객체밖으로 삐져나오는 경우가 있다.

clear기법을 사용하는 방법으로 아래와 같이 여러가지 방법이 사용되고 있으나 상황에 맞게 적절하게 사용하여야 한다.

• .clearfix:after {
     content: ".";
     visibility: hidden;
     display: block;
     height: 0;
     clear: both;
  }








 위 그림과 같이 서로 다른 float 속성이 먹은 객체들이 나열되어 있을때 그룹화하여 흐름을 제어하고 싶다면 아래 그림과 같이 그룹화된 부모객체에 위의 방법을 쓸 수 있다.

본 기술과 이미지는 GOTOCHINA 및 CSS-TRICKS 에서 가져온것임을 밝히며 다음과 같은 기능들로 구성된다.

• 여백없이 이미지로 전체페이지 채우기
• 필요한만큼 이미지 크기 정하기
• 이미지를 페이지중간에 정렬하기
• 스크롤바 생기지 않게하기
• 크로스브라우저 호환
• 플래쉬같은 장난질 하지 않기(? ) : Isn't some fancy shenanigans like flash

이러한 기능요구사항은 매우 까다로운 주문사항이다. 무엇보다 이미지 사이즈를 변경하는 것은 전통적인 CSS background-image속성에 위배되기 때문이다.



Technique #1

인라인 이미지(Inline image)는 아래와 같이 페이지내에서 특정한 목적에 따라 어떠한 요소로 둘러싸여 있다.
( 데꾸벅 주 :
   이미지는 원래 속성은 block-level요소가 아니라 span태그와 같이 inline-level요소 이므로 크기를 고정시키기 위해 block-level요소 태그들에 의해 둘러쌓여있다.

마크업

CSS :

* {
    margin: 0;
    padding: 0;
}
html, body, #bg, #bg table, #bg td {


    height:100%;
    width:100%;
    overflow:hidden;



}




#bg {


    position: fixed;


}




#bg div {


    height:200%;


    left:-50%;


    position:absolute;


    top:-50%;


    width:200%;


}




#bg td {


    text-align:center;


    vertical-align:middle;


}




#bg img {


    margin:0 auto;


    min-height:50%;   //safari4.0과 chrome에서는 min-height가 잡히지 않음


    min-width:50%;


}

위 소스는 마크업과 CSS를 적게 사용하여 개발하나 아주 좋은 기법이다. 

 <div id="cont">


    <div class="box">


          <!-- 내용 들어가는곳-->


    </div>


</div>

#cont {


    position:absolute;


    top:0;left:0;


    z-index:70;


    overflow:auto;


}

.box {


    margin: 0 auto;


    width: 400px;


    padding: 50px;


    background: white;


    padding-bottom:100px;


    font: 14px/2.2 Georgia, Serif;



}

Action2.part1.rar

Action2.part2.rar

Action2.part3.rar

Action2.part4.rar

deviantART Photoshop actions