본문 바로가기

반응형

html5

(6)
HTML5-CSS3 개발을 위한 vscode 플러그인 https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag Auto Rename Tag - Visual Studio Marketplace Extension for Visual Studio Code - Auto rename paired HTML/XML tag marketplace.visualstudio.com https://marketplace.visualstudio.com/items?itemName=ullissescastro.theme-bracketslight Brackets Light - Visual Studio Marketplace Extension for Visual Studio Code - Brackets.io..
[HTML5Solution] IE8에서 WebSocket 이용하기 브라우저를 통해 전이중 통신이 가능한 html5 의 websocket!! 책에서는 postmessage 다음에 다루고, 내용도 그렇게 많진 않지만, 제 생각엔( 내맘대로-_- ) html5 에서 canvas, localstorage( localdb ) 와 쌍벽을 이룰정도로 중요하다고 생각합니다. 세가지만 모든 브라우저가 된다면, 이제 웹이아니라 어플이 되는것이지요=ㅁ= ㅎㅎㅎ 어쨌든~ 우리의 마소형님의 큰선물인 IE8 에서는 역시 websocket 을 지원하지 않기 때문에 js 라이브러리 ( 플러그인 ) 이 필요합니다. https://github.com/gimite/web-socket-js 그리고 서버쪽도 준비가 필요합니다. 일단 당연히 웹서버가 설치되어야 하구요. ( APM 패키지가 좋겠죠? ) 그리고..
[HTML5Solution] IE8 에서 HTML5의 canvas 태그 사용하기 저번 웹폼과 마찬가지로, 역시나 구글표 라이브러리입니다. 이름은 excanvas!! js 라이브러리만 링크해주면, html5 의 canvas 관련 명령어들을 쓸수가 있습니다~ http://code.google.com/p/explorercanvas/ 예제 화면들!! 하지만, 불행이도 3번째 예제 ( 이미지 드로잉 및 로테이트 ) 는 정상적이지 않은것 같네요... 그래도 요정도 지원하면, 책에 있는 예제들을 ie8 에서 테스트 해볼수 있을듯합니다!! html5 의 가장 기대되는 태그 canvas 를 써보아요~~ 공부는 이책으로=ㅅ=/
[HTML5Solution] 정규식을 이용한 input type Check html5 부터는 input text 태그의 경우 pattern 을 정규식으로 정의를 해놓고, 유효성을 체크할 수 있습니다. 하지만, IE8 이 메인인 우리나라에서는 꿈-_-나라 이야기지요;; ㄷㄷㄷ 하지만, 훈늉한(?) 사람들이 많은 IT 업계에서는 이를 js 라이브러리로 구현해 놓았습니다. html5 같이 사용하고 js 라이브러리만 링크하면 매우좋은(?) html5의 패턴체크 태그를 쓸 수 있습니다. Input Type Check 유효한 우편번호를 입력하세요 출처 :: HTML5 솔루션 원본소스는 미국식 zipcode 를 체크하는건데 , 우리나라식인 xxx-xxx 로만 바꾸었습니다. 직접실행해보고 싶은 사람은 첨부파일의 압축을 풀고, checkinputForm.html 파일을 IE8 브라우저에서 오픈..
[HTML5 Solution] 떠있는 레이어 만들기 with jquery 딱히 HTML5 와 밀접한 관계는 아니지만, 지금당장 사용가능하며, HTML5 가 범용적으로 바뀌었을때도 사용할 수 있는 코드를 생각하며 어딘가에서 보고 (펌) 약간수정했습니다. *. 코드이해를 위한 최소의 지식 1. html 태그이해 2. javascript 이해 3. jquery 이해 *. 방향성 1. 현재 가장 많이 쓰이는 브라우저에서도 적용가능해야한다. ( 특히 IE8 슬프지만 현재 우리나라 80%를 점유하는 브라우저이니까-_- ) 2. html5 를 기본으로 하되, 역시 현브라우저 구동 가능한 소스가 쵝오 3. 가능하면 크로스 브라우징을 생각함 4. 단순함이 제일 내용 a //적당히 태그를 반복하여 플로팅 레이어를 볼수 있게 만듭니다. a 실제 파일 참조~ 최신 그리고 앞으로의 html 을 위한..
localstorage 이용 방법 function save(item) { var playlistArray = getStoreArray("playlist"); playlistArray.push(item); // localhost storage 저장 localStorage.setItem("playlist", JSON.stringify(playlistArray)); } function loadPlaylist() { var playListArray = getSaveSongs(); var ul = document.getElementById("playlist"); if( playListArray != null ) { for(var i=0;i

반응형