WEB_TECH/HTML5 썸네일형 리스트형 단말기의 기종을 알아내는 구문 내가 사용하고 있는 단말기의 기종을 출력하는 소스입니다.다음 HTML 코드를 작성합니다. 테스트 경로는 다음과 같습니다.아이폰이나 아이패드나 안드로이드폰에서 테스트 가능합니다.http://m.anne-soft.com/device.html 더보기 canvas animation 예제입니다. 캔바스에 공을 움직여 벽에 부딪히면 방향이 바뀌는 애니메이션을 만들어 보겠습니다. 더보기 HTML5 사운드 플레이어 만들기1 HTML5와 자바스크립트로 사운드 플레이어 만들기를 해 보겠습니다.이렇게 하면 아주 간단하 사운드 플레이어가 만들어 졌습니다. 물론 HTML5를 사용해서 이렇게 구현할 수도 있겠죠.하지만 나만의 디자인과 각 요소를 모두 콘트롤하는 플레이어를 만드는 것을 목표로 해서 작업하겠습니다. 아래와 같이 작업하면 현재의 진행상태와 볼륨상태가 나옵니다. 사운드플레이어 더보기 Geolocation API Geolocation API는 디바이스의 위치정보를 얻는 javascriptAPI입니다.GPS로 부터 얻은 것인지 네트워크로부터 얻은 것인지는 구분하지 않습니다. Window.navigator 객체로부터 정보를 얻습니다. 크롬에서 아래의 경로로 가보면http://www.browsergeolocation.com/자신의 현재위치가 나옵니다. PC로 볼 때 안나올 수도 있습니다. 위치정보 객체의 속성위치정보 객체의 속성들을 알아보겠습니다. coords 여러개의 속성들이 있다timestamp Geolocation 지원 브라우저http://www.caniuse.com여기서 geolocation이라고 쳐 보면 지원하는지 확인할 수 있습니다.역시 HTMl5를 지원하지 않는 브라우저에서는 지원이 안 되는 것을 확인할 .. 더보기 Google Maps Javascript API V3 Google Maps Javascript API V3 는 그 유명한 구글지도 세번째 번입니다. https://developers.google.com/maps/documentation/javascript/tutorial 위 경로의 Hello, World 예제를 살펴보도록 하겠습니다.이 예제는 HTML에 캔버스로 지도가 나올 영역을 정의하고 위도 경도를 입력하고 옵션값을 객체로 정의해서 캔버스에 지도를 그리는 형식으로 되어 있습니다. 주의 할 점1. 선언을 사용하여 HTML5로 선언2. script 태그를 사용하여 Maps API 자바스크립트를 포함3. 지도를 넣을 'map_canvas'라는 div 요소를 생성4. 다양한 지도 속성을 담고 있는 자바스크립트 객체 리터럴을 만듬5. 'map' 객체를 만들기 위.. 더보기 새로운 HTML5 Javascript API HTML5 는 자바스크립트 API가 추가되었습니다.어떤것이 있는지 알아볼까요? , control APILocal Storage APIWeb SQL DB APIIndexed DB APIGeolocation APIOffline web apps APIWeb SocketWeb WorkerDrag and Drop APIFile API 이쯤되면 못할것이 없어보이는데요.HTML5는 이제 더이상 웹페이지를 만들기위한 마크업이 아닙니다.웹어플리케이션을 만들기 위한 언어입니다. 더보기 <canvas>에 4가지 간단 그리기 예제 1. 선분그리기 Your browser does not support the canvas element. 2. 원 그리기 Your browser does not support the canvas element. 3. 그라디언트 그리기 Your browser does not support the canvas element. 4. 외부 이미지 불러오기 Your browser does not support the canvas element. 이렇게 하는 것과 태그를 사용하는 것과는 엄연히 다릅니다. 더보기 <canvas>란 무엇일까? www.w3schools.com 에 있는 내용을 번역하겠습니다. 엘리먼트는 웹페이지에서 그래픽을 그리기 위해 사용됩니다. Canvas가 무엇일까?HTML5의 엘리먼트는 단지 그래픽들을 위한 컨테이너입니다.당신은 그래픽을 그리기 위해 자바스크립트를 사용해야 합니다. 캔바스는 높이와 넚이 속성이 있는 그리기가 가능한 지역이라고 HTML코드에서 정의됩니다.캔버스는 선분들, 사각형들, 원, 문자(Characters) 그리고 이미지를 추가하는 메서드가 있습니다. 캔바스는 왠만한 메이저급 브라우저에서는 다 지원됩니다. IE8만 빼고.... MS 각성하시오. 1. 캔바스 만들기캔바스는 엘리먼트로 정의합니다.id와 height 속성을 엘리먼트에서 정의합니다. 2. 자바스크립트로 그리기엘리먼트는 그림을 그리는 어떤 속성.. 더보기 HTML5에서 새로 사용된 엘리먼드들 html5에서 도입된 더 좋은 구조를 위한 새 엘리먼트들입니다.를 사용해도 되는데 문서의 포맷을 더 명확히 해주기 위해서 아래의 태그를 사용할 것을 권장합니다. Defines an articleDefines content aside from the page contentIsolates a part of text that might be formatted in a different direction from other text outside itDefines a command button that a user can invokeDefines additional details that the user can view or hideDefines a visible heading for a elementSpeci.. 더보기 html5에서 사운드 사용하기 html5에서는 새로운 태그가 지원됩니다. 사운드를 플레이 하려면 다음과 같이 단순하게 구현할 수 있습니다. 당신의 웹브라우저는 audio 요소를 지원하지 않습니다. audio 태그에 control속성을 넣어주면 콘트롤바가 생깁니다. 만일 loop로 돌리려면 이런 속성울 주면 되겠죠. 만일 콘트롤러 없애고 자동으로 시작하고 루프 하려면 다음과 같이 적어주면 됩니다. 더보기 이전 1 다음
