본문 바로가기

html5

Google Web Designer 구글에서 Web Designer 어플리케이션을 내놓았다. 방금 설치 해서 잠깐 사용해보니 예전 나모 웹에디터로 웹 페이지를 뚝딱 생성해냈을 때의 놀라움을 느끼고 있다. ㅋ유저 인터페이스는 포토샵과 유사(?)하고 몇번 클릭만 해보면 쉽게 사용 가능할 것 같다. 현재는 베타 버전으로 Window, Mac을 지원하며 아쉽게도 Linux는 지원하지 않는다. Google Web Designer 도움말Google Web Designer 다운로드 더보기
[30회 정기세미나] HTML5 실무적용 전략 발표자료 7월 6일(수) 포스코 센터 마이크로소프트 5층에서 진행된 Hoons 닷넷 세미나 자료를 공유합니다. 에어콘문제와 인터넷 문제로 조금 아쉬운 세미나였지만... 많은 분들이 오셨고 호응이 좋아서 기분 좋은 세미나였습니다. ^^ HTML5 어디까지 왔나? from 정현 황 HTML5를 활용한 하이브리드 앱개발하기 from 정현 황 더보기
HTML5 Video 유튜브의 등장으로 웹을 통한 동영상 서비스를 진행하는 기업들이 전세계적으로 많이 늘어났다. 국내에서도 대부분의 포털 기업들이 앞다투어 동영상 서비스를 선보였다. 웹을 통한 동영상 서비스 제공을 위해서는 순수 브라우저 환경에서는 불가능하며, 별도의 플러그인(Plug In)을 설치해야 한다. 대표적으로 어도비의 플래시 플레이어(Flash Player)와 마이크로소프트 실버라이트를 들 수 있다. 앞서 언급된 기업들도 마찬가지로 플래시와 같은 별도의 플러그인을 설치해야만 한다. 하지만 HTML5의 등장으로 더 이상 별도의 플러그인의 설치 없이도 동영상 서비스가 가능하게 되었다. HTML5에서 새롭게 추가된 비디오 마크업 태그만으로 말이다. HTML5 Video 브라우저별 지원현황 아래표와 같이 최신 브라우저에서.. 더보기
HTML5 Canvas Shapes 2 아래와 같은 모서리가 둥근 사각형을 그려보자. 위 도형을 모서리를 처리하기 위하여 quadraticCurveTo 메서드에 대해서 먼저 알아야 한다. context.quadraticCurveTo(controlX, controlY, endX, endY); quadraticCurveTo 메서드 동작원리 (출처 : html5canvastutorials) context point로 moveTo 메서드를 사용하여 point를 이동 후 control point 좌표를 quadraticCurveTo 메서드 인자 controlX, controlY에 지정한다. endX, endY 인자는 곡선의 끝 점을 지정한다. quadraticCurveTo 메서드를 이용하여 모서리가 둥근 사각형을 그려보자. 위 소스의 도형 그리기 순서.. 더보기
HTML5 Canvas Shapes 1 오늘은 Canvas를 이용하여 각종 도형을 그려보자. 우선 아래와 같은 사각형을 그려보자. Canvas는 사격형을 그리기 위한 rect 메서드를 지원한다. context.rect(topLeftCornerX,topLeftCornerY,width,height); rect 메서드를 이용하여 사각형을 그린 소스는 아래와 같다. 6번라인은 rect 메서드를 이용하여 위 그림과 같이 X, Y좌표로 이동하여 width, height 각각 100px의 사각형을 그리게 된다. 7번 라인은 사각형의 배경색을 지정하기 위한 fillStyle 프로퍼티이다. fileStyle에 #000의 배경색을 지정하였다. 8번 라인은 fillStyle로 지정된 배경색을 채우기 위한 명령어 fill 메서드이다. stroke 메서드와 마찬가지.. 더보기
HTML5 Canvas Line2 오늘은 Line 굵기를 조절하는 방법과 선의 색깔, 그리고 선의 끝 맺음 처리를 다양하게 시도해 보겠다. 선의 굵기를 지정하는 lineWidth가 존재한다. context.lineWidth=[value]; 선의 굴기를 지정해보자. 위 소스의 실행 결과는 아래와 같다. 선의 색상을 지정해보자. 위 소스 코드에 아래 소스를 추가한다. context.strokeStyle="#fff000"; 실행 결과는 아래와 같다. 이제 선 lineCap을 사용한 예제를 확인 해보자. 실행 결과는 아래와 같다. 더보기
HTML5 Canvas Line1 HTML5 Canvas 강좌를 시작해보고자 한다. 첫 번째 주제는 Canvas Line이다. Canvas 브라우저 지원 현황 (출처 : http://www.findmebyip.com/litmus) 우선 Line을 그리기 위하여 Canvas 엘리먼트를 만들자. 9라인은 Canvas 엘리먼트의 마크업 형식이며 초기에는 아무 내용도 없고 경계선도 없다. Canvas에 접근하기 위한 id속성과 Canvas크기를 width와 height를 각각 지정하였다. 5번라인은 DOM에서 Canvas 엘리먼트를 찾게 되며 모든 Canvas는 드로잉 컨텍스트를 갖으며 6번라인은 Canvas에 대해 getContext() 메소드를 호출할 수 있다. 이때 "2d"라는 문자열을 getContext() 메소드에 넘겨줘야 한다. 여기.. 더보기