본문 바로가기

Study/HTML5,CSS,JQuery

 (28)
[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에..
[HTML5/CSS3/JQUERY] cross message 각 프레임들끼리 데이터 주고 받기 하기 messageEvent2.html 프레임 1로 보내기 프레임 2로 보내기 1.html 부모 창으로 보내기 frame 2로 보내기 2.html 부모 창으로 보내기 frame 1로 보내기
[HTML5/CSS3/JQUERY] message event message event 메인 html에서 새창을 띄워도 해당 결과값이 출력되게 하기 messageEvent.html messageSub.html
[HTML5/CSS3/JQUERY] 현재 시간을 가져와 이미지 시계 나타내기 현재 시간을 가져와 이미지 시계 나타내기 현재 시간을 받아와서 canvas로 시계,시침,분침,초침 이미지를 가져와 시간이 지날 때마다 침 이미지를 그려준다.
[HTML5/CSS3/JQUERY] drag & drop 예제 왼쪽 select 박스와 오른쪽 select 박스의 option들을 서로 이동 시키기 2012.09.10 -> 현재 fire fox에서만 drag & drop이 가능하다. 옵션1 옵션2 옵션3 옵션2_1 옵션2_2 옵션2_3
[HTML5/CSS3/JQUERY] audio와 video 예제 audio & video HTML5에서는 브라우저의 플러그인 없이도 미디어 재생이 가능하다. 그리고 다음과 같이 object, embed element와는 다른 점이 있다. 재생, 일시정지 등 web browser에 자체 control이 있다. source에 파일을 여러 개 지정할 수 있어서 web browser의 지원 format에 따라 표시할 수 있다. HTML5 Audio 지원안함 HTML5 Video 지원안함 audio는 일시정지와 되감기 빨리감기 버튼을 만들어 구현 video는 video가 보여지는 창에 마우스 이벤트를 줘 재생했다 안했다를 반복하고, 화면 밑에 현재 진행되는 시간을 표시한다. 음악재생 |> 00:00:00
[HTML5/CSS3/JQUERY] canvas 1. 선 그리기, 대각선 그리기, 사각형 그리기, 그림자 주기 2. 선 그리기, 사각형 그리기, 반원 그리기, 문자열 그리기, 이미지 적용하기,작은 정사각형 흩뿌리기 캔바스를 이용해서 도형 그리기 연습 3. canvas에 이미지 전달(고전적인 방법, 태그에서 직접 이벤트 부여/자바스크립트에서 이벤트를 부여하여 호출) 하단 이미지를 클릭하면 canvas에 해당 이미지가 그려진다. 이미지는 아무거나 해도 되어서 따로 첨부는 안했다. 방법1: 고전적인 방법, 태그에서 직접 이벤트 부여 방법2: 자바스크립트에서 이벤트를 부여하여 호출 방법2: 자바스크립트에서 이벤트를 부여하여 호출 방법 3: jQuery에서 이벤트 부여하여 호출(code 변환이 안되서 그냥 복사~)

티스토리툴바