web/HTML (15) 썸네일형 리스트형 HTML5 webDB 예제 저번 포스팅에서는 local Storage에 대하여 간략하게 예제를 해보았습니다.local Storage의 장점은 사용하기 간편하다는것이지만 단점은 해쉬형태로 저장되기 때문에 일괄의 데이터(객체형태)를 다루기에는 무리가 있습니다. 이점을 보안하기 위하여 webDB가 있습니다. 실제 DB사용과 매우 유사하며 저장,삭제,변경 또한 간편합니다. -파이어폭스 브라우저에서는 webDB를 현재 지원하지 않습니다. 아래의 내용은 크롬에서 실행한 결과입니다.- IE는 당연히 안됩니다.(IE10에서도 안된다고 하던데... 확인 부탁드립니다.) 참고 싸이트는 요기 : http://www.html5rocks.com/en/tutorials/webdatabase/todo/ 소스 코드 참고링크에는 없던 update와 drop을 .. HTML5 LocalStorage 웹클라이언트에서 데이터 저장은 LocalStorage사용! Web Storage 란?지원 브라우저 : Web Storage는 일종의 클라이언트-사이드 데이터베이스이다. 이 데이터는 서버가 아닌 각 사용자의 브라우저에 보관된다. 일반 데이터베이스와의 두드러진 차이점은 우리에게 익숙한 key-value 형식으로 보관/갱신/호출 한다는 것이다. 이것은 Web Storage를 사용하기위해 별도의 쿼리 문법이나 복잡한 메커니즘을 이해하지 않아도 됨을 의미한다. 그렇기 때문에 우리는 한가지만 기억하면 된다. Web Storage는 Web Database와 마찬가지로 브라우저에서 제공하는 저장공간을 사용한다는 것이다. 만약에 사용자가 사파리에서 파이어폭스로 전환하는 경우 동일한 데이터를 가져올 수 없다는 것을 유념하자.Web Storage는 localStorage와 sess.. 동적 테이블 td 색상 칠하기(배경색) script 소스 var table = document.getElementById("dynamic_table"); var newRow = table_menu.insertRow(); var td0= newRow.insertCell(0); td0.style.cssText="font-size:9pt;color:#FF0000"; var td1= newRow.insertCell(1); td1.style.cssText = "background-color:red"; td0.innerHTML = "font"; td1.innerHTML = ""; html 소스 newRow.insertCell() 로 들어가는 변수에 해당하는 style.cssText 를 선언하여 집어 넣으면 된다. html5 크롬 / 사파리 video 띄우기. 최종 목표는 jqmobile 를 통해서 동영상을 출력하는것이다. 기본적으로 jqmobile 에선 video출력을 제공하지 않기 때문에 html5를 이용하려 한다. 문제는 html5의 태그를 각 브라우저에선 지원을 해주지만 브라우져별 지원 코덱이 다르다는것에 있다. 다행이 두 OS간에 지원하는 요구사항이 하나 있다.(아직은) H.264 // ACC // MP4 !! 같은 조건의 확장자만 달라도 않되는것을 확인했다... 물론 영상/음향의 설정이 다르면 안나오거나 재생조차가 않된다. 다음팟인코더를 사용할 경우 환경설정에서 다음과 같이 설정을 하면 된다. 혹은 애플/아이팟을 선택하면 자동으로 다음과 같이 설정된다. 동영상이 준비 되었다면 코딩은 간단하다. Video 태그가 지원되지 않는 브라우저 입니다. 나의 .. Double Margin Float Bug (IE6~7) 확실히 표준화 관련해서 작업을 하다보니 몇몇 버그를 만나기도 한다. 그중에서 IE6~7 까지 나타나는 버그로 CSS에서 Float 의 Margin이 두배로 잡히는 현상이다. 먼저 소스는 다음과 같다. 아주아주 간단한 소스;;ㅋ 다음은 IE6과 IE8 에서의 보여지는 화면이다. 위의 캡쳐를 보면 마진의 길이가 IE6에서 두배로 먹은것을 볼수 있다.(확실한 확인을 위해서 인터넷 정보창을 띄었다.) IE6는 float된 방향과 같은 방향의 margin이 설정되면 margin이 두배로 적용되는 버그가 발생한다. 해결 방법은 꼼수지만...; dispaly:inline;를 넣어준다. CSS에 display:lnline; 를 추가해주면 다음과 같이 정상적으로 나온다. float 처리된 오브젝트는 display:blo.. HTML tab key 순서 정하기 간단하게 지원하는 태그가 있을줄은..;; 이래서 프로젝트로 배우면 않되고 책으로 배워야 한다는걸 실감한다. 소스가 위와 같다면 tab을 누를 경우 커서의 포인트는 textbox에서 checkbox로 간다음 아래의 textbox로 이동한다. 하지만 몇번 쓸일 없는 체크 박스에 커서를 가는 불편함을 유발시키면 않되므로! tabindex tabindex를 써서 순서를 정해주면 순서대로 tab key 포커스가 움직이는것을 볼수 있다. 인덱스를 3번으로 놔서 3번째엔 체크박스에 이동한다. 물론 이미지도 가능하다. html 테이블 틀고정 이미 개발이 끝난 다음에 view를 바꾼다는건..ㅜㅡㅜ 이래서 mvc패턴을 써야 하나보다 다른 분들은 첨부터 쓰면서 하시길..ㅜㅡㅜ 고정셀1 고정셀2 고정셀3 고정셀4 이전 1 2 다음
