본문 바로가기

Study

 (220)
[HTML5/CSS3/JQUERY] selector selectorTest1.html selectorTest2.html 셀렉터 속성 연습 셀렉터 연습 하나 Naver target : X Naver target : X Daum target : X Daum target : 0 Korea target : X Korea target : 0 id 값에 특정 패턴 적용 DIV content-1 DIV content-2 DIV view-1 DIV content-3 name 값에 "한국"이 포함된 요소 표시
[HTML5/CSS3/JQUERY] web sql database WEB SQL DATABASE web sql database란 클라이언트 쪽에서 사용할 수 잇는 관계형 데이터 베이스. 클라이언트의 데이터 스토리지로 web storage나 indexed database API 등 몇 가지 사양이 있으나 sql을 이용한 유연한 데이터베이스 액세스가 가능하다는 장점이 있다. dbTest.html 0 / 0 바이트 (0 %)
[HTML5/CSS3/JQUERY] file 접근 FILE 웹 어플리케이션이 로컬 파일의 내용에 접근할 수 있도록 하는 API FILE API INTERFACE file interface를 사용하면 file의 file name이나 size 등의 기본적인 정보에 접근할 수 있다. file reader interface는 file의 내용을 읽을 수 있는 기능을 제공한다. file interface는 browser가 막 건드릴 수 있는 것이 아니라 file 선택 form이나 drag & drop을 통해서 사용자가 직접 선택한 file에 한정되므로 보안문제는 안심해도 된다. FILE INTERFACE METHOD 설명 NAME FILE의 이름 TYPE FILE의 MIME TYPE(알 수 없을 때는 NULL) URN FILE의 범용 식별자 SIZE FILE SI..
[HTML5/CSS3/JQUERY] geolocation, geolocation map GEOLOCATION Geolocation API는 프로그램을 실행하는 디바이스의 위치 정보를 얻기 위한 메소드 3개로 이루어진 간단한 JavaScript API다. Geolocation API 관련된 메소드는 모두 window.navigator 객체에 정의 되어 있다. getCurrentPosition(successCallBack, errorCallBack, options) 현재 위치 정보를 비동기로 확인한 다음 처리 결과를 인수로 하여 successCallBack을 한번만 호출. 에러가 발생했을 때는 상세한 에러 정보를 인수로 하여 errorCallBack 호출 한다. successCallBack : 위치정보 사용 가능 시 호출 errorCallBack: 에러 시 호출 options : 데이터 수집 ..
[HTML5/CSS3/JQUERY] web worker WEB WORKER 자바스크립트 코드를 백그라운드에서 실행시키기 위한 기술 백그라운드에서 실행되는 코드를 '워커'라 부르며, DOM과는 완전히 분리된 환경에서 동작한다. 현재 웹 브라우저는 기본적으로 웹 페이지를 하나의 스레드로 실행한다. 자바 스크립트의 모든 작업을 모두 같은 하나의 스레드로 작업하게 되면 UI작업이 끝날 때까지 화면이 멈춰 있게 된다. 이런 현상을 개선할 때 WEB WORKER를 사용한다. 목적에 따라 사용할 수 있는 2가지의 워커가 규정되어 있다. 1. 워커 객체와 백그라운드 프로세스가 1:1로 대응하는 모델 2. 여러 개의 객체가 하나의 백그라운드 프로세스를 공유하는 모델(공유워커) 워커는 DOM을 조작할 수 없다.(WINDOW나 DOCUMENT 등 브라우저에서 자바스크립트로 접근..
[HTML5/CSS3/JQUERY] web storage WEB STORAGE (ie는 지원하지 않는다.) 클라이언트의 디스크에 소량의 데이터를 저장해 두기 위한 기억공간(쿠키와 비교) 키-값 쌍으로 자료를 저장하고 키를 이용하여 자료를 조회한다. 오프라인 웹 어플리케이션과 비슷하게 갑자기 전원이 꺼진다거나 다시 pc를 켰을 때 이전의 작업한 데이터를 보존할 수도 있고, 웹 메일을 web storage에 저장해 두었다가 읽는다거나, 서버의 많은 정보를 client에 저장해둘 수 있다. 그리고 용도에 따라서 local storage와 session storage로 나뉘는데, 두 storage의 차이는 저장기간이나 유효 범위만 다를 뿐 대게 같은 API를 사용한다. web storage는 client disk에 소량의 데이터를 저장하기 위한 storage로, 이전..
[HTML5/CSS3/JQUERY] application cache APPLICATION CACHE (ie는 지원하지 않는다.) 웹 어플리케이션을 오프라인에서도 사용할 수 있도록 웹 어플리케이션이 필요로 하는 리소스를 클라이언트 쪽에 캐시하는 기능이다. 모바일 기기에서 유용하게 쓰인다. network 상태가 좋지 않은 장소에서 사용할 수 있을 것이다. 그리고 network 사용도 줄어 배터리 관리에도 도움이 된다. Manifest 작성 오프라인 웹 어플리케이션은 오프라인 상태에서 웹 어플리케이션을 동작시키기 위해서 캐시를 사용한다. 그리고 캐시를 사용하기 위해서는 어떤 파일들을 캐시해야 하는 지 알려주어야 하는데, 이때 사용하는 것이 manifest이다. 먼저 manifest파일은 브라우저에 의해서 다운로드 되는 파일이므로 웹 서버에 manifest파일에 대해 등록해 주..
[HTML5/CSS3/JQUERY] channel message CHANNEL MESSAGING 다대다 메세지 통신을 실현하기 위한 API MessageChannel이라는 채널을 통해 메시지를 송수신하게 되는데, 메시지의 출입구가 되는 채널에는 두 개의 port가 있어서 port1에 수신된 메시지는 port2로 전달되고 port2에 수신된 메시지는 port1으로 전달된다. 각각의 port는 MessagePort라는 type의 object로 다음과 같은 method와 속성을 가진다. Method 설명 start() port를 사용할 수 있게 한다. 두 개의 port 모두 start 해줘야 한다. close() port를 중지한다. postMessage port에 message를 보낸다. 보낸 message는 상대편 port로부터 읽어들인다. onmessage port에..

티스토리툴바