Blog Content

사각형, 삼각형, 원 그리기 기초를 했는데요. 이를 응용해서 간단하게 제가 좋아하는 애니메이션중 그랑죠의 마법진을 그려봤습니다...피닉스랑, 포세이돈은...-_-a ex06.Shape.html Colored By Color Scripter™ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91..

HTML5 에 새로 추가된 캔버스 입니다. 캔버스는 그림을 그리드는 기능을 갖고 있는데요. 도형을 그리는 순서는 캔버스 객체를 얻고, 캔버스 객체로 부터 컨텍스트를 얻고, 컨텍스트의 메서드, 속성을 가지고 그림을 그립니다. 렌더링~ fillRect(시작 X좌표, 시작 Y좌표, 사각형의 가로, 사각형의 세로) 간단하게 사각형 모양으로 그림을 그려봅니다. ex03.canvas.html Colored By Color Scripter™ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 결과를 확인합니다. 참 쉽죠~?

스파트폰 웹 개발을 할 때 가장 중요하고 기본이 되는거라고 생각하는게 ViewPort라고 생각이 됩니다. 뷰포트는 기기별로 화면의 크기가 다른데요. 뷰포트를 사용하게 되면 자동으로 화면 사이즈를 맞춰주는 기능이 있습니다. 뷰포트 속성 width, height : px 단위 기본 960px initial-scale : 초기 배율, (기본값 : 꽉 찬 화면) minimum-scale : 최소 배율 0~10.0 maximum-scale : 최대배율 0~10.0 user-scalable : 확대 축소 여부 : yes/no 뷰포트 사용 기본 코드 입니다. ex02.ViewPort.html Colored By Color Scripter™ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 안..

실제 HTML5를 실행할때 실행 환경별로 어떻게 나오는지 궁금합니다. 가상으로 아이폰, 아이패드, 안드로이드, PC에서 보는 방법입니다. 먼저 설치를 하셔야 하는데요. 아이폰, 아이패드 같은 경우에는 iBBDemo 를 설치. 안드로이드는 안드로이드 SDK를 설치 하시면 됩니다. 설치방법은 크게 어렵지 않고 간단하고...검색을 통해서 찾으시면 쉽게 하실수 있습니다. 이전에 만든 HTML5 페이지를 실행합니다. 또는 마우스 오른쪽 클릭해서 브라우저에서 보기를 선택하세요. 실행을 하시면 웹 페이지에서 실행되는것을 확인 할 수 있습니다. 여기서 URL 주소 전체를 복사를 하시고... 설치하신 iBBDemo를 실행하고 URL 주소에 복사한 내용을 입력하면 확인 할 수 있습니다. 참 쉽죠~?

HTML5 작업을 하다보면 소스 오류가 생기면 고치기에 많은 시간이 걸립니다. 어디서 오류인지는 확인 하려면 전체 다 살펴보거나 자바스크립트로 메세지창을 띄워서 결과를 확인해야하니 번거롭습니다. Visual Studio에서 HTML5 자바스크립트 디버깅 하는 방법입니다. 버튼을 클릭을 하면 자바스크립트로 메세지창을 띄우는 코드를 작성합니다. ex01.Hello.html Colored By Color Scripter™ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 디버깅 할 코드 라인을 찾습니다. 버튼 클릭 할때 이벤트를 보기 위해서 17번 라인에 디버깅을 걸어줍니다. 라인 숫자 옆에 보면 회색 줄이 보입니다. 이곳에 마우스 왼쪽을 클릭하시면 빨간 점으로 표시되는데요..

HTML5 공부를 하면서 코딩하면서 화면을 같이 보고 싶은데 코드 페이지만 보여지고, 화면을 직접 보고 싶으면 인터넷 화면을 실행해서 매번 확인해야하니 귀찮습니다. ASP.NET WebForm.aspx와 같이 소스,디자인 페이지를 같이 보고 싶어 찾아보니 방법이 있어 올립니다. 소스와 디자인 페이지를 같이 보고싶은 페이지를 선택합니다. 마우스 오른쪽 클릭 '연결 프로그램' 선택합니다. 연결 프로그램 팝업창이 나오면 'HTML(Web Froms) 편집기'를 선택 하고 '기본값으로 설정' 버튼을 클릭 후 확인 확인 버튼을 클릭하시면 메세지 창이 나옵니다. '예'를 클릭하시고 결과를 확인 합니다. 참~쉽죠~?

HTML5 공부를 하기 위한 개발툴이 설치가 완료 되었으면 이제 프로그램의 가장 기본인 Hello 를 보여주기 위한 작업을 하겠습니다. 작업을 하면서 HTML5에서 필요한 설정등을 하도록 하겠습니다. 프로젝트 구성을 시작 하겠습니다. 추후에 계속해서 페이지를 추가 하다보면 나중에 관리하기 힘드니깐 각자 편한 방법으로 해줍니다. 제가 구성한 프로젝트 입니다. 아래 '더 보기'를 클릭하세요. 기본 프로젝트 구성하기 파일 -> 새프로젝트를 실행합니다. 템플릿 -> 기타 프로젝트 형식 -> Visual Studio 솔루션 -> 빈 솔류션을 만들어주세요. 왜 이렇게 해야하는지는 마지막에... 위에 빈 솔루션을 만들면 화면 오른쪽 솔루션 탐색기에 보시면 프로젝트가 생성되었습니다. 프로젝트를 선택하시고 마우스 오른쪽..