본문 바로가기

공부/HTML518

웹표준) div 가운데 정렬 //head에 //body에 div에 margin:0 auto; 을 해주면 된다. 2012. 3. 11.
현재 위치를 알려 주는 geolocation geolocation의 기본 사용법 네이버 지도 API를 사용해보려 했는데 무슨 문제인지 지도가 뜨질않아서 다음 지도 API를 사용해서 구현해 놓은걸로 올림. 결과 화면 2011. 11. 5.
액티브엑스가 필요 없는 내장 미디어 사운드 재생을 위한 오디오 요소 : 컨트롤 패널을 보기 싫다면 없애도 된다. loop로 반복횟수도 지정가능. :오디오 태그를 지원하지 않는 브라우저는 embed 태그로 대체 사운드 재생 비디오 재생을 위한 비디오 요소 사용하시는 브라우저에서는 비디오를 볼 수 없습니다. 스크립트를 이용한 내장 미디어 컨트롤 2011. 11. 5.
웹 폼 기존에는 자바스크립트를 사용해야 가능했던 것들이 HTML5에서는 쉽게 사용할 수 있다. HTML5에서 추가된 datetime, time, data등의 인풋 타입 결과를 보기 위해서는 오페라 브라우저를 사용해야한다. 달력생성 - 주간 단위로만 선택이 가능한 달력 - 월간 단위로 선택이 가능한 달력 - 시간만 선택할 수 있는 기본 시간폼 - 이메일 형식 체크 - URL체크 - : http:// 존재 여부를 체크한다. 컬러 팔레트를 제공 - 검색을 위한 search - 특정 숫자값만 입력받고자 할 때 - 수치를 제공된 슬라이드 막대에서 선택하도록 해 주는 range - 전화번호를 입력받고자 할 때 - : pattern 속성은 사용자가 아무 값이나 입력하지 못하도록 막아준다. 정규표현식 사용. 기능이 강화된 f.. 2011. 11. 5.
그림자와 그라데이션 구현하기 그림자와 그라데이션 구현은 알아두면 유용하게 쓰일 것 같다. 그림자를 구현하기 위해서 필요한 4개의 속성에는 Context.shadowColor : 그림자와 색상을 지정. 16진수와 RGB값 모두 사용가능하다. Context.shadowOffsetX : 그림자의 가로 위치를 지정해 준다. Context.shadowOffsetY : 그림자의 세로 위치를 지정해 준다. Context.shadowBlur : 그림자를 어느 정도 흐리게 할지 정해 준다. 그라데이션을 구현하기 위해서 필요한 2가지 메소드 createLinearGradient - x0, y0, x1, y1 - 선형 그라데이션 creatRadialGradient - x0, y0, r0, x1, y1, r1 - 원형 그라데이션 한가지 더 알아 두어야 .. 2011. 11. 5.
Canvas3 선 긋기 기본적으로 선을 그으려면 ctx.beginPath(); //새로운 도형을 그림 ctx.lineTo(10, 10); //선이 시작할 좌표 설정 ctx.lineTo(100, 100); //선이 끝나는 곳 좌표 설정 ctx.stroke(); //선 긋기 요게 기본이다. 여기에다 lineTo로 라인을 하나 더 그리면 이전 좌표에 연결해서 선이 그려진다. ctx.stroke(); 전에 ctx.closePath(); 를 하면 도형 그리기가 종료되고, 선 긋기가 종료된 시점과 선 긋기가 최초로 시작된 지점이 연결된다. ctx.fill();을 사용하면 도형의 색을 채울 수 있고, ctx.stroke();를 사용하면 안이 채워지지는 않고 테두리만 그려진 삼각형이 완성된다. 한 Canvas 안에 선 두개 이상을 그릴때는 .. 2011. 11. 5.