'PROGRAMING/HTML5'에 해당되는 글 7건

2012.04.09 쿠키 vs 세션
2012.02.21 절대 경로 vs 상대경로
2012.02.21 CSS3 가이드, 새로운 속성
2012.02.21 [CSS3] 선택자 분류, CSS적용하는방법 [CSS3] 선택자 분류, CSS적용하는방법
2011.12.15 IIS Access-Control-Allow-Origin 설정 : CORS(Cross-Origin Resource Sharing)
2011.11.23 HTML5 자료
2011.11.18 Visual Studio 2010 : HTML5 TEMPLATE 사용

쿠키 vs 세션

PROGRAMING/HTML5 2012. 4. 9. 11:22

쿠키

쿠키란 무엇이냐? 과자라구요?
하하..무릎꿇고 두손 드십셔.. -_-;;
우리는 다음이나 다른 사이트에 들어갈때..
아이디와 패스워드를 넣고 들어가는 경우가 많습니다. 이는 회원만 사이트를 이용할 수 있게 함이죠..
다른 일반인들이 아무나 들어오지 못하게 로그인 과정을 거치게 하는 겁니다.
근데 한번 로그인을 하고 나면 브라우저를 없애거나 로그아웃을 하기 전까지는
어느 페이지에 가더라도 다시 로그인 하라는 창은 뜨지 않습니다.(특별한 경우 제외)
그 이유는 로그인 후에 접속자에게 쿠키라는것을 만들어 주었기 때문입니다.(사용자컴에)

쉽게 생각해서 우리가 들어갈려고 하는 사이트를 놀이동산이라고 하면.
쿠키는 자유이용권입니다.
처음에 놀이동산에 들어갈때 자유이용권을 사면..(쿠키는 무료지만..^^;;)
어느 놀이기구를 타더라도 그것만 보여주면 다 탈 수 있지요. ^^
대충 이해가 되시나요?

참고.
쿠키는 만료시간을 지정하여 그 시간이 지나면 삭제되거나 만료시간을 지정하지 않은
경우에는 브라우저를 닫으면 삭제됩니다.

세션

세션은 쿠키의 한단계 발전된 개념입니다.
쿠키는 사용자가 들어오는건 알 수 있어도 말없이 나가 버리면
나간것에 대해 알지 못합니다.

세션이 한 수 위라고 했죠? ^^
세션은 사용자가 나가버리면 조금 있다가 "어 이녀석 나가버렸군."하고 세션을 삭제합니다.
그리고 세션은 특이한 기능이 하나 더 있습니다.
놀이 동산에서 놀이기구를 안타고 그냥 멀뚱거리기만하면 ..
"넌 20분동안 놀이기구를 안타고 있으니 세션이 필요없나보구나." 하면서
세션을 삭제해 버립니다. (호홋.. 좀 잔인하져? ^^)
하지만 세션도 단점은 있습니다.
세션이 사용자의 접속상태를 확인하는 등 별도의 작업을 하기때문에 서버를 힘들게 하거든요.
PHP에서도 PHP4가 되면서 세션을 지원하기 시작했습니다.

참고.
쿠키의 정보는 사용자의 컴퓨터에 저장되며 세션의 정보는 서버에 저장됩니다.
그렇기 때문에 쿠키의 경우 사용자에 의해 값이 변경되거나 거짓으로 생성될 수 있습니다.
로그인과 같은 것을 구현하는데 있어서 간단히 쿠키로 체크를 하면 심각한 보안문제를 야기할 수 있습니다.

참조 : http://ezphp.net/lecture/lecture16.php

저작자표시 비영리 (새창열림)

파란실버라이트

To remember the time when I started learning Silver Light!

절대 경로 vs 상대경로

PROGRAMING/HTML5 2012. 2. 21. 14:55

출처 : http://blog.naver.com/PostView.nhn?blogId=love_kopo&logNo=70130199701&categoryNo=20&parentCategoryNo=20&viewDate=&currentPage=1&postListTopCurrentPage=1&userTopListOpen=true&userTopListCount=5&userTopListManageOpen=false&userTopListCurrentPage=1

저작자표시 비영리 (새창열림)

파란실버라이트

To remember the time when I started learning Silver Light!

CSS3 가이드, 새로운 속성

PROGRAMING/HTML5 2012. 2. 21. 11:47

CSS3 의 새로운 기능 및 속성등을 정리 하였습니다. CSS3 처음 배우는 분들이 보시면 좋을 듯 하네요.

출처는 JavaScript.Web.Applications 책에 있는 내용입니다.

* Prefixes

CSS3는 브라우져 별로 사용되는 Prefix 지정이 다르게 되어 있습니다.

        chrome : -webkit-
        safari : -webkit-
        firefox : -moz-
        ie : -ms-
        opera : -o-

        사용 예 )
        #prefix-example {
            -moz-box-shadow: 0 3px 5px //firefox
            -webkit-box-shadow: 0 3px 5px // safari, chrome
            box-shadow: 0 3px 5px
        }

* Colors

- CSS2 에서는 background images 을 이용하여 투명을 지정하였습니다. 그러나 CSS3에서는 뒤에 값을 넣어서 지정할 수 있습니다.
- rgb 스타일 형식으로 칼라를 지정 할 수 있습니다. ( 도구을 이용하면 rgb 색상코드를 쉽게 변환할 수 있습니다. safari's web inspector .. picpick .. )

        #rgb-example {
            rgb(red, green, blue);
            color: rgb(255, 255, 255);
        }

      - HSL style 역시 사용할 수 있습니다. hue, saturation, lightness ( 명도, 채도, 밝기 )
         • Hue : 0 ( or 360 ) red, 120 green, 240 blue ., 0 ~ 360 값 입력
         • Saturation : 퍼센트 값; 100% 풀 칼라 색상 0 ~ 100% 값입력
         • Lightness : 퍼센트 값; 0% dart-black, 100% light-white , and 50% 는 평균

            #alpha-example {
                 background: hsla(324, 100%, 50%, .5);
                 border: 1em solid rgba(0, 0, 0, .3);
                 color: rgba(255, 255, 255, .8);
            }

          - 지원하는 브라우져
          firefox : full support
              chrome: full support
          opera: full support
              ie : full support
              opera : full support

* Rounded Corners

CSS 2.1 에서는 추가 마크업을 많이 포함하였고, 여러 이미지, 자바스크립트를 이용하여 만들었습니다.
CSS3 에서는 매우 쉽습니다, 단지 border-radius 스타일 만 사용하면 됩니다. 그리고 padding 과 margin 스타일 잘 지정하면 멋진 라운드 코너를 만들 수 있습니다.

        border-radius: 20px;

        // horizonal, vertical
        border-radius: 20px 20px;

        // top left, top right, bottom right, bottom left
        border-radius: 20px 20px 20px 20px;



      - 지원하는 브라우져
            • Firefox: full support
            • Chrome: full support
            • Safari: with -webkit-
            • IE >= 9.0: full support
            • Opera: full support

* Drop Shadows

이전에는 Drop Shadows 하기 매우 힘들었습니다.그러나 CSS3 는 box-shadow 스타일만 지정하면 됩니다.

       box-shadow 몇가지 옵션 :
            • horizontal offset
            • vertical offset
            • blur radius
            • op-tional spread distance,
            • color



    // horizonal offset, vertical offset, blur radius, color
     box-shadow: 10px 5px 15px



   // inset shadows
      box-shadow: 10px 5px 15px inset;

// horizonal offset, vertical offset, blur radius, spread distance, color;
box-shadow: 10px 5px 15px 15px

// multiple shadows
box-shadow: 0 1px 1px

            #shadow-example {
               -moz-box-shadow: 0 1px 1px inset;
              -webkit-box-shadow: 0 1px 1px inse
            box-shadow: 0 1px 1px inset;
          }



      - 지원하는 브라우져
            • Firefox: full support
            • Chrome: with -webkit-
            • Safari: with -webkit-
            • IE >= 9.0: full support
            • Opera: full support

* Text Shadow

이전에는 이미지를 사용해야만 text Shadow를 사용할 수 있었습니다. CSS3 에서는 text-shadow style 만 추가 하여 사용할 수 있습니다.

        text-shadow

        // horizonal offset, vertical offset, color
        text-shadow: 1px 1px ;

        // horizonal offset, vertical offset, blur radius, color
        text-shadow: 1px 1px .3em rgba(255, 255, 255, .8);

        - 지원하는 브라우져
            • Firefox: full suppor
            • Chrome: full suppo
            • Safari: full support
            • IE: no support
            • Opera: full support

* Gradients

        CSS2 에는 background 이미지를 반복을 사용하여 gradients를 구현하였다. CSS3 는 linear 그리고 radial gradients 를 추가 지원 합니다.

        linear-gradient(#CCC, #DDD, white)

        // horizontal gradient
        linear-gradient(left, #CCC, #DDD, #FFF);

        // or with a specific angle
        linear-gradient(-45deg , #CCC , #FFF)

         //Just specify a percentage or pixel value along with the color:
        linear-gradient(white , #DDD 20% , black)

        // transparency:
        radial-gradient( rgba(255, 255, 255, .8) , transparent )

        #gradient-example {
          /* Fallback */
          background: #FFF;
          /* Chrome < 10, Safari < 5.1 */
          background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));
          /* Chrome >= 10, Safari >= 5.1 */
          background: -webkit-linear-gradient(#FFF, #CCC);
          /* Firefox >= 3.6 */
          background: -moz-linear-gradient(#FFF, #CCC);
          /* Opera >= 11.1 */
          background: -o-linear-gradient(#FFF, #CCC);
          /* IE >= 10 */
          background: -ms-linear-gradient(#FFF, #CCC);
          /* The standard */
          background: linear-gradient(#FFF, #CCC);
        }

     - 지원하는 브라우져
        • Firefox: with -moz-
        • Chrome: with -webkit-
        • Safari: alternative implementation
        • IE >= 10: with -ms-
        • Opera >= 11.1: with -o-

* Multiple Backgrounds

CSS3 콤마로 구분하여 여러개의 background 를 지정 할 수 있습니다

background: url(snowflakes.png) top repeat-x, url(chimney.png) bottom no-repeat, -moz-linear-gradient(white, #CCC), #CCC;

        - 지원하는 브라우져 :
            • Firefox: full support
            • Chrome: full support
            • Safari: full support
            • IE >= 9.0: full support
            • Opera: full support

* Selectors

CSS3 새로운 선택자 설명합니다.

        :first-child
        선택된 엘리먼트 아이템의 첫번쩨

        :last-child
        선택된 엘리먼트 아이템의 마지막

        :only-child
        선택된 엘리먼트 아이템의 오직 하나의 자식

        :target
        Selects elements targeted in the current URL’s hash

        :checked
        체크박스에서 체크된 아이템

* Nth Child

   :nth-child( n ) n 으로 지정된 자식을를 찿습니다.

        #example:nth-child( 3n ) { /\* ... \*/ }// 3번재

        /* Even children */
        #example:nth-child( 2n ) { /* ... */ }
        #example:nth-child( even ) { /* ... */ }



        /* Odd children */
        #example:nth-child( 2n+1 ) { /* ... */ }
        #example:nth-child( odd ) { /\* ... \*/ }

        /* Last child */
        #example:nth-last-child( 1 )

* Direct Descendants

> 기호를 사용하여 바로 밑의 자식의 엘리먼트를 찿을 수 잇습니다.

/* Only directly descendant divs */
#example > div { }

* Selector Negation

:not 를 이용하여 엘리멘트를 찿을 수 있습니다.

/* Only directly descendant children, except ones with the "current" class */

        #example > *:not(.current) {
            display: none
        }

* Transitions

CSS3는 transition 지원 합니다. 간단한 애니메이션을 만들어셔 스타일을 변경 효과를 줄 수 있습니다.

        /* duration, property, animation type (optional) */
        transition: 1.5s opacity ease-out

        /* Multiple transitions */
        transition: 2s opacity , .5s height ease-in
        transition: .5s height , .5s .5s width

        몇가지 효과 속성 :
            • linear
            • ease-in
            • ease-out
            • ease-in-out

        #transition-example {
            position: absolute;
            /* cubic-bezier(x1, y1, x2, y2) */
            transition: 5s left cubic-bezier(0.0, 0.35, .5, 1.3);
        }

        #transition-example {
            width: 50px;
            height: 50px;
            background: red;
            -webkit-transition: 2s background ease-in-out;
            -moz-transition: 2s background ease-in-out;
            -o-transition: 2s background ease-in-out;
            transition: 2s background ease-in-out;
        }

        #transition-example:hover {
            background: blue;
        }

        - 지원하는 브라우져 :
            • Firefox: with -moz-
            • Chrome: with -webkit-
            • Safari: with -webkit-
            • IE >= 10.0: with -ms-
            • Opera: with -o-

* Border Images

        border-image, 보더에 이미지를 지정 할 수 있습니다.
        border-image: url(border.png) 14 14 14 14 round round;
        border-image: url(border.png) 14 14 14 14 stretch stretch;

        - 지원하는 브라우져
            • Firefox: with -moz-
            • Chrome: with -webkit-
            • Safari: with -webkit-
            • IE: no support
            • Opera: with -o-

* Box Sizing

      padding 과 margin 의 관여하지 않는 width 100% 폭 요소를 지정할 수 있습니다.

    .border-box {
        -webkit-box-sizing: border-box
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

* Transformations ( 변형 )

        CSS3 에서는 기본 2D 변형을 지원 합니다.. translated, rotated, scaled, skewed 를 옵션으로 설정 할 수 있습니다.

        transform: rotate( -30deg ); // 회전

        transform: skew( 30deg , -10deg ); // 비스듬히 움직임

        translateX(30px);
        translateY(50opx);

        transform: scale(1.2);

        transform: rotate(30deg) skewX(30deg);

       - 지원하는 브라우져 :
        • Firefox: with -moz-
        • Chrome: with -webkit-
        • Safari: with -webkit-
        • IE >= 9: with -ms-
        • Opera: with -o-

* Flexible Box Model

콘텐츠 영역에서 콘텐츠가 많아 질수 록 박스가 유동적으로 늘어나고 주변에 영향을 받아서 처리 하는 경우가 있습니다.
이럴 경우 매우 유용히 사용할 수 잇습니다.

        .hbox {
          display: -webkit-box;
          -webkit-box-orient: horizonta
          -webkit-box-align: stretch;
          -webkit-box-pack: left;

          display: -moz-box;
          -moz-box-orient: horizontal;
          -moz-box-align: stretch;
          -moz-box-pack: left;
        }

        .vbox {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-box-align: stretch;

            display: -moz-box;
            -moz-box-orient: vertical;
            -moz-box-align: stretch;
        }

        #sidebar {
            -webkit-box-flex: 0;
            -moz-box-flex: 0;
            box-flex: 0;
            width: 200px;
        }

        #content {
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            box-flex: 1;
        }

        - 지원하는 브라우져 :
            • Firefox: with -moz-
            • Chrome: with -webkit-
            • Safari: with -webkit-
            • IE >= 10: with -ms-
            • Opera: no support

* Fonts

        @font-face 를 사용하여 웹페이지의 사용자 정의 글꼴을 사용 할 수 있습니다.
        TrueType and OpenType 의 포맷을 지원합니다.

        @font-face {
          font-family: "Bitstream Vera Serif Bold";
          src: url("/fonts/VeraSeBd.ttf");
        }

        - 지원하는 브라우져 :
            • Firefox: full support
            • Chrome: full support
            • Safari: full support
            • IE >= 9: full support
            • Opera: full support

* Graceful Degradation

단계적 하향 지원의 의미.

        #example-gd {
            background: white;
            background: rgba(255, 255, 255, .75);
        }

        #example-gd {
            background: #FFF;
            background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));
            background: -webkit-linear-gradient(#FFF, #CCC);
            background: -moz-linear-gradient(#FFF, #CCC);
            background: linear-gradient(#FFF, #CCC);
        }

* Modernizr

      Modernizr 는 CSS3 속성이 지원되는지 검사 합니다. no- 요러게 표시

        .multiplebgs div p {
            /* properties for browsers that
             support multiple backgrounds */
        }
        .no-multiplebgs div p {
            /* optional fallback properties
            for browsers that don't */
        }

       검사되는 속성들:
            • @font-face
            • rgba()
            • hsla()
            • border-image:
            • border-radius:
            • box-shadow:
            • text-shadow:
            • Multiple backgrounds
            • Flexible box model
            • CSS animations
            • CSS gradients
            • CSS 2D transforms
            • CSS transitions

출처 : http://cafe.naver.com/hacosa.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=39503&

저작자표시 비영리 (새창열림)

파란실버라이트

To remember the time when I started learning Silver Light!

[CSS3] 선택자 분류, CSS적용하는방법 [CSS3] 선택자 분류, CSS적용하는방법

PROGRAMING/HTML5 2012. 2. 21. 11:47

선택자의 종류

용어	내용	CSS에서 적용 방법
태그선택자	HTML 태그에 속성 적용	p, table, body, header, nav 등 HTML 태그
클래스선택자	.(점)으로 시작하는 선택자	.classname(개발자가 이름 지정)
아이디선택자	#(샵)으로 시작하는 선택자	#idname(개발자가 이름 지정)
종속선택자	선택자에 종속된 선택자	p.classname table.classname p#idname (이름을 붙여서 사용)
하위선택자	선택자 내부의 모든 자식 선택자	p a p .classname p #idname (선택자와 선택자 사이에 빈칸)
전체선택자	전체 문서에 영향을 줌	*(별표)
그룹선택자	여러 선택자를 복합적으로 적용할 때	p, .classname, #idname, table (각각의 선택자를 ,(콤마)로 분리)
자식선택자	선택자 바로 밑의 자식 선택자	p > a ul > li (> 기호 사용)
인접선택자	붙어있는 선택자와 선택자에 특정 효과를 줄 때 사용	h1 + p (+ 기호 사용)

CSS 적용방법

1. 인라인 방식

태그에 직접 스타일을 적용하는 방식
ex) <p style="color:red;">...</p>

스타일을 바로바로 확인해 볼수 있다.

하지만 웹표준 이전의 방식과 차이가 없고, 유지보수에 불편하므로 비추하는 방식.

2. 임베디드 방식

헤드에 스타일을 지정해서 적용하는 방식

ex) <head>

h1 {color:#ffc;}

</style>

</head>

단일문서일때, 개발의 편의를 위해서 사용

인라인 방식에 비해 같은 스타일을 여러군데 적용할때 편리.

3. @import 방식

외부에 별도로 .css 파일을 만들어 적용하는 방식
ex) <head>

@import url(main.css);

</style>

</head>

구식 브라우저에서는 인식하지 못한다.

CSS파일 내부에서 다른 CSS파일을 불러올 수 있다.

4. link 방식

외부에 별도로 .css 파일을 만들어 적용하는 방식
ex) <head>

</head>

속도면에서 @import보다 빠르게 로딩된다.

많은 CSS파일을 관리하기에 편하다.

강추하는 방식.

[출처] [CSS3] 선택자 분류, CSS적용하는방법|작성자 꼬꼬냥

[출처] [CSS3] 선택자 분류, CSS적용하는방법|작성자 꼬꼬냥

저작자표시 비영리 (새창열림)

파란실버라이트

To remember the time when I started learning Silver Light!

IIS Access-Control-Allow-Origin 설정 : CORS(Cross-Origin Resource Sharing)

PROGRAMING/HTML5 2011. 12. 15. 15:26

WCF RIA 서비스의 end point를 JSON으로 설정하고 Sencha touch로 구현한 클라이언트에서 데이타를 가져오기 위해서 Ajax 통신으로 Json 데이타를 가져오려고 시도 했더니 다음과 같은 에러가 발생하였다.

XMLHttpRequest cannot load [서버 URI]. Origin [클라이언트 도메인] is not allowed by Access-Control-Allow-Origin.

WCF RIA 서비스의 도메인 정책에 문제가 있는 것으로 판단되어 clientaccesspolicy.xml/crossdomain.xml 를 서버에 저장해도 같은 에러가 발생해서 알아보니 다음 내용과 관련된 문제 였다.

참조 : http://blog.iolo.pe.kr/category/hacking/web

Ajax에는 Same Origin Policy라는 원칙이 있다. 말 그대로, 현재 브라우져에 보여지고 있는 HTML을 내려준 웹서버(Origin)에게만 Ajax 요청을 보낼 수 있다.

MS가 XMLHttpRequest를 처음 만들 때만 해도 이런 제약은 당연한 것처럼 보였지만, 지금에 와서는 OpenAPI를 통한 매시업(Mashup)이 활성화되는 데 가장 큰 장애물이 되었다. 매시업이 아니더라도 여러 개의 도메인을 사용해야 하는 대규모 사이트를 개발할 때도 골치거리였다. Same Origin Policy를 우회하는 방법으로 JSONP, IFRAME IO, CrossDomain Proxy 등이 고안되었지만, 보안성이 취약하다거나, 동기 호출이 안되거나, 주고 받는 데이터 형식이 제한되거나, 직관적이지 못하거나(dirty hack), ... 등의 문제점 때문에 표준화되기엔 무리가 있었다.

(중략) 한 참 뒤에야 W3C는 (MS의 IE가 제공하는 방식을 수용하여) 크로스도메인간에도 Ajax요청을 주고 받을 수 있는 방법을 표준화 했는데, 그것이 바로 CORS다.

CORS를 한 마디로 요약하면, "요청을 받은 웹서버가 허락하면 크로스도메인이라도 Ajax로 통신할 수 있다"라는 정책이다. 기술적으로는 크로스도메인에 위치한 웹서버가 응답에 적절한 Access-Control-Allow-류의 헤더를 보냄으로써 크로스도메인 Ajax를 허용 수 있다.

말이 뺑뺑도는 느낌인데, 예를 들어 보자(코드를 줄이기 위해 jQuery를 사용했지만 XMLHttpRequest를 직접 사용해도 마찬가지다). Ajax 요청을 보내는 one.html을 내려 준 a.com이 오리진 웹서버다. 이 요청을 받는 b.com이 크로스도메인 웹서버다. a.com에서 b.com으로... 그래서 크로스-도메인이다.

대충 그려보면 이런 식인데, b.com은 크로스도메인이므로 Ajax 통신이 불가능하지만, CORS를 적용하면 가능하다:

서버 프로그램의 Web Config 설정을 다음과 같이 바꾸어 주었더니 엑세스가 허용되었다. ^^ ( IIS 7.0 기준)

<system.webServer>

</customHeaders>

</httpProtocol>

</system.webServer>

자세한 내용은 다음 사이트를 참고하세요.
http://enable-cors.org/

추가 내용 / 2012.01.31

wcf rest service template 40를 사용해서 Restful service를 제공하는 project를 생성하였고 위 내용을 적용해도 엑세스가 허용되지 않았다.
그래서 다음과 같이 하였더니 허용되었다. ^^

Global.asax 에 다음 내용 추가

        protected void Application_BeginRequest(object sender, EventArgs e)
        {

HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);
HttpContext.Current.Response.Cache.SetNoStore();

EnableCrossDmainAjaxCall();
}

        private void EnableCrossDmainAjaxCall()
        {
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*"); // * 대신 접속 하는 site를 추가하면 될 듯.

            if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
            {
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods",
                              "GET, POST");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers",
                              "Content-Type, Accept");
                HttpContext.Current.Response.AddHeader("Access-Control-Max-Age",
                              "1728000");
                HttpContext.Current.Response.End();
            }
        }

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

저작자표시 비영리 (새창열림)

파란실버라이트

To remember the time when I started learning Silver Light!

HTML5 자료

PROGRAMING/HTML5 2011. 11. 23. 13:29

HTML5 정보 포탈

HTML5 쉽게 쉽게 !!

4대 IT 트랜드라는 세미나에서 RIA 만큼의 충격은 아니었지만 오 ~ 괜찮다 싶었던 HTML5 + CSS3

앞으로 하루 30분씩 적지만 아주 큰 시간을 책과 웹을 검색하며 공부를 해볼까 한다.

STEP 01 - HTML5 에 대한 기초 지식 익히기

HTML5 자료 모음 링크 : http://channy.creation.net/blog/776

상단의 링크는 아래와 같은 내용을 포함하고 있습니다.

- 문서 자료 : 실전 HTML5 가이드 다운로드(A4 인쇄용) <- 아이폰과 아이패드에 삽입 굿

- 강의 동영상

- HTML5 소개

( 등장 이유부터 HTML4와 5의 차이점 등 )

- HTML 5 관련 발표 자료 및 글모음

- 여러 블로그 글 모음

- 각각의 튜토리얼과 데모까지

STEP 02 구축은 어떤식으로 가는가

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

IBM 사이트에 있는 자료들

HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기

http://www.ibm.com/developerworks/kr/library/tutorial/wa-html5/section4.html

HTML 5로 모바일 웹 애플리케이션 작성하기,

Part 1: HTML 5, geolocation API 및 웹 서비스를 결합하여 모바일 매시업

작성하기 http://www.ibm.com/developerworks/kr/library/x-html5mobile1/

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

미디어 쿼리란? 봐야알지 !! ( 클릭해서 창을 움직여 보세요 ^^ )

http://bananatiger.com/study/1_media_queries/exam_1.html
- 이미지가 화면사이즈에 비례되어 사이즈가 조절! ( IE는 8.0이상 )

( 아이폰이나 PC 해상도나 최적화로 보자 )

미디어 쿼리 다른 예제 ( IE에서는 안될수도 있습니다. )

http://chaospace.cafe24.com/html5/mediaQuery_01.html

출처 : http://chaospace.tistory.com/150

보시면 알겠지만 창 사이즈를 변경하였을 때 그 보여지는 것이 다릅니다.

모바일로는 작게 창을 보게 되실것이고, PC나 노트북용 화면은 또 다르겠죠

그리고 돌아다니다가 얻게된 IPHONE4 UI PSD !! 감사합니다

( JQuery Mobile 애플 스킨이 참 편리하긴 하지만 )

참조 : http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/

그리고 이건 정말 대박이다..

http://html5demos.com/

각각의 브라우저별로 소스 지원 부분까지 이거로 오늘 시간 다 보내고 있는듯..

HTML5 NOTIFICATIONS ( 알림 )

데스크탑 알림 창
응용프로그램에서 알림창은 (응용프로그램) 자신의 상태나 변화를 실시간으로 알려주기 위한 장치이다
대표적인 예로 메신저에서 메시지 수신이나 친구 로그인 등의 알려주는 것을 들 수 있다

이러한 알림창은 응용프로그램이 비활성화 되어 있더라도,
사용자에게 중요한 정보를 시각적으로 즉시 알려 주기 위한 유용한 장치이다
HTML5 의 Notifications 은 웹 페이지에서도 이와 같은 데스크탑 알림창을 구현하기 위한 스펙이다

사용법과 지원브라우저 , 데모 확인은 아래의 URL에서 확인가능합니다. ( 트위터 API 도 포함 )

가져옴 : http://m.mkexdev.net/69

인터넷 접속 상태 확인 ( 현재 온라인인지 오프라인인지 )

어도비 에어나 실버라이트의 아웃오브브라우저 같은 경우등 오프라인에서도 앱을 돌릴때 체크용이 할듯..

가져옴 : http://cafe.naver.com/webappdev/291

오 마이갓 크롬으로 써놓고 IE로 네이버 이미지 올리고 저장하다가 쓴글이 날라갔군요 ㅠㅠ

언젠가 브라우저 하나만 쓰는 날이 오겠죠? HTML5 그렇게 해줄겁니까? ㅎㅎㅎ

그외 또다른 정보 모음

JQuery Mobile 에 대해 알고 싶으시다면 ( 웹앱이란 )
http://ahman.kr/30103534325

웹앱 스토어를 알고 싶으시다면
http://ahman.kr/30098469023

HTML 데모 사이트에 대해 더 알고 싶으시다면
http://ahman.kr/30098150715

HTML5 API 같은 사이트 자세히 잘 나와있내요 ^^ GOOD

http://www.whatwg.org/specs/web-apps/current-work/

훌룡하신 선배님들 감사합니다.

HTML5 디자인 개발툴 엣지(EDGE) 공개 - 어도비(Adobe)
http://ahman.kr/30098089486

HTML5 기능 포탈

동영상 플레이 제작법
http://ahman.kr/30098096429

HTML5 Canvas 종결자 - Tutorials

예제에 따른 결과와 소스를 보고 바로 적용해볼 수 있는 Tutorials 잘되어있내요 굿 !

http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/

Canvas API 모음

http://dev.w3.org/html5/spec/Overview.html#the-canvas-element

http://dev.w3.org/html5/canvas-api/canvas-2d-api.html

http://www.canvasdemos.com/

http://www.modernnizr.com/ ( 현재 안들어가지는 느낌 )

http://html5doctor.com/an-introduction-to-the-canvas-2d-api/ ( 예제와 함께 )

https://developer.mozilla.org/en/canvas_tutorial ( 모질라 )

http://dev.opera.com/articles/view/html-5-canvas-the-basics/ ( 오페라 )

자바스크립트와 HTML5 Canvas를 이용한 얼굴인식

http://firejune.com/1674

HTML5 주제별 Tutorials

http://www.html5rocks.com/tutorials/

Typographic effects in canvas ( 주제별 Tutorials 중에 효과들 )

http://www.html5rocks.com/tutorials/canvas/texteffects/

input 태그에 여러가지 속성 추가

<input type="search"> 검색 박스
<input type="number"> 숫자를 위한 input
<input type="range"> 슬라이드
<input type="color"> color picker
<input type="tel"> 전화번호
<input type="url"> 웹 URL 주소
<input type="email"> 이메일 주소
<input type="date"> 달력 표시 및 날짜 선택
<input type="month"> 월 <input type="week"> 주
<input type="time"> 타임스탬프
<input type="datetime"> date+time stamps
<input type="datetime-local"> 지역 날짜와 시간