HTML5 강좌 13강 - HTML5 태그 - 그림자스타일,도형합성하기 *그림자 스타일 지정하기그림자 스타일을 지정하기 위해 다음과 같은 속성을 사용합니다.(1)shadowColor그림자 색깔 지정 (기본 값: 투명)(2)shadowOffsetX대상을 기준으로 그림자의 X 좌표 지정 (기본 값: 0)(3)shadowOffsetY대상을 기준으로 그림자의 Y 좌표 지정 (기본 값: 0)(4)shadowBlur그림자의 흐린 정도 지정 (기본 값: 0) 예제를 통해 테스트 해보겠습니다. context.shadowOffsetX = 10; context.shadowOffsetY = 10; context.shadowColor = '#474747'; context.shadowBlur = 1; context.fillSt..

HTML5 강좌 12강 - HTML5 태그 - canvas 채우기 스타일,그라데이션 *단색으로 채우기context.beginPath(); context.lineWidth = 10;context.strokeStyle = '#474747'; context.strokeRect(30, 30, 150, 150);context.fillStyle = '#F15F5F';context.fillRect(30, 30, 150, 150); 이전 강좌에서 종종 나왔던 내용입니다.lineWidth와 strokeStyle을 사용하여 선의 스타일을 먼저 잡았고fillStyle과 fillRect을 사용하여 단색으로 채웠습니다. 더불어 사각형을 채운 색의 투명도를 조절할 수 있습니다.globalAlpha 속성을 사용합니다. *색의 투명..

HTML5 강좌 11강 - HTML5 태그 - canvas 베지에곡선, 선 스타일 *bezier curve(베지에 곡선)베지에 곡선은 말그대로 '휘어진 선' 입니다.제어점과 종료점을 이용하여 선을 휘어지게 합니다.사용법은 다음과 같습니다.(1)2차 베지에 곡선quadraticCurveTo(제어점x, 제어점y, 종료점x, 종료점y)(2)3차 베지에 곡선bezierCurveTo(제어점x1, 제어점y1, 제어점x2, 제어점y2, 종료점x, 종료점y) 먼저 2차 베지에 곡선을 테스트 해보겠습니다. 시작점을 지정하고, 제어점을 지정해주면 그 폭에 따라 선이 휘어집니다.그리고 종료점까지 이어지죠. context.moveTo(50, 50); context.quadraticCurveTo(200, 200, 400, 50..

HTML5 강좌 10강 - HTML5 태그 - canvas 원그리기 이번 강좌에서는 canvas arc() 이용하여 원을 만들어보겠습니다.원그리기는 좀 복잡합니다.수학적인 부분이 어느정도 있어요.학창시절 수학을 무지 싫어했던 터라..공식만 보면 정신이 없는데요.원그리기는 공식이 조금 들어갑니다.먼저 원호를 그려보겠습니다. 그림을 보면 이해가 되시나요?설명을 조금 덧붙이겠습니다.먼저 항상 그래왔듯이 시작점을 지정합니다.그리고 arc()를 이용하여 반지름 및 각도를 설정합니다.그리고 그리는 방향도 설정해줍니다.코딩을 통해 테스트를 해보죠. 위와 같이 코딩을 하고 실행을 해보겠습니다. 사실 공식은 외워야 하는 부분입니다.우리는 공식을 외우고 각도와 반지름 설정값을 변경하면서 테스트를 하면 되겠네요.이번에는 원..

HTML5 강좌 9강 - HTML5 태그 - canvas 다각형 이번 강좌에서는 canvas 선그리기를 이용하여 다각형을 만들어보겠습니다.closePath() 메소드를 이용하여 선이 마지막으로 종료된 지점과 최초의 지점을 연결 할 수 있는데요.예제를 통해 테스트를 해보죠. 위 그림을 보면 주석으로 설명을 달았습니다.먼저 선을 초기화 하고 첫번째 선을 만듭니다.그리고 첫번째 선을 이어서 두번째 선을 만듭니다.그리고 context.closePath()를 이용하여 선을 마무리 하는데요.context.closePath()는 선의 마지막 지점과 첫번째 지점을 연결하는 메소드 입니다. 위와 같이 선이 이어져 삼각형을 만들었습니다.위 방법을 이용하여 다양한 모양의 다각형을 만들 수 있죠.처음 만들었던 자바스크립트 코..

HTML5 강좌 8강 - HTML5 태그 - canvas 선그리기 지난 강좌에 이어 canvas 에서 선그리기를 연습해 보겠습니다.선그리기의 순서는 다음과 같습니다. 1. 패스를 초기화한다.2. 패스를 지정한다.3. 지정한 패스를 그리기/채우기 메소드를 사용하여 선/도형을 그린다.4. 지정한 패스를 닫는다.5. 선을 출력한다. 그러면 선그리기 메소드에 대해 알아보죠.*beginPath( )선그리기 패스를 지정하고 초기화를 합니다.이전까지 그렸던 패스는 모두 리셋하고 새로운 패스를 그린다는 의미입니다.*moveTo(x, y)시작점을 지정합니다.*lineTo(x, y)시작점 위치에서 지정한 위치 (x, y)까지 선을 그립니다.*stroke( )선을 출력합니다.*fill( )색을 채웁니다.*closePath(..

HTML5 강좌 7강 - HTML5 태그 - canvas 사각형 지난 강좌에 이어 canvas 에서 사각형을 연습해 보겠습니다. *strokeRect( x, y, width, height )지난 강좌에서 테스트했던 메소드 입니다.테두리만 있는 사각형을 그리는 메소드죠.x,y 는 시작하는 위치의 좌표값 입니다.width, height 는 사각형의 크기를 설정해 줍니다. *fillRect( x, y, width, height )색으로 채워진 사각형을 그립니다.역시 x,y 는 시작하는 위치의 좌표값 입니다.width, height 는 사각형의 크기를 설정해 줍니다. *clearRect( x, y, width, height )이 메소드는 특정 영역을 지우는 기능을 가지고 있습니다.지정한 위치에서 지정한 크기만큼..

HTML5 강좌 6강 - HTML5 태그 - canvas #1 지난 강좌에 이어 canvas 태그를 연습해 보겠습니다. *canvas 태그canvas는 웹 페이지에서 자바스크립트를 통해 그림을 그리는데 사용합니다.하지만 단순한 그림 표현을 넘어 다양한 효과를 주고 텍스트를 표현하고 간단한 애니메이션까지 표현이 가능합니다.canvas로 그림을 그리기 위해서는를 사용해서 그림 영역을 지정하고, 자바스크립트를 사용해 실제 그림을 그립니다. 이 브라우저는 HTML5의 canvas를 지원하지 않습니다. 기본값 : 너비 300px, 높이 150px미지원 브라우저의 경우 텍스트 또는 이미지로 대체할 수 있습니다.예제를 통해 테스트를 해보죠~ 먼저 canvas 영역을 설정해 줍니다. 붉은색 부분이 canvas 영역입니..

HTML5 강좌 5강 - HTML5 태그 - prograss,download 지난 강좌에 이어 태그를 연습해 보겠습니다. *prograss 태그prograss 태그는 meter 태그와 사용법이 흡사합니다. 속성값 설정에 따라 다운로드 상태가 바뀌죠. 하지만 HTML5 단독적으로 다운로드 상태의 변화를 표현할 수는 없습니다.자바스크립트나, 제이쿼리 같은 스크립트 프로그래밍이 필요합니다. *a 태그를 이용한 download기존에는 a 태그를 이용하여 단지 페이지를 이동하였습니다.하지만 HTML5 에서는 다운로드까지 가능합니다.먼저 기존에 사용하던 a 태그 방식을 테스트 해보겠습니다. 위와 같이 코딩을 하고 실행을 해보죠~ 그럼 위와같이 이미지가 나오고 클릭을 하면 이미지의 경로로 이동합니다. 이에 추가적으로..

HTML5 강좌 4강 - HTML5 태그 - mark,time,meter 지난 강좌에서는 우리가 앞으로 계속 사용할 레이아웃을 잡아봤습니다.이번강좌 부터는 태그를 중심으로 연습을 하겠습니다. 하지만 그전에 페이지에 대해서 잠시 설명을 하겠습니다.이전 강좌에서 첨부파일을 받았다면 01.html 이라는 파일이 있을겁니다.그 파일을 메인페이지로 사용하려고 합니다.그래서 일단 01.html 을 main.html 이라고 파일명을 수정하였습니다.그리고 nav 부분에 메뉴도 수정하였습니다. 보라색 부분은 강좌를 진행하면서 추가될 메뉴 입니다.메뉴가 추가되면 당연히 페이지도 추가되겠죠~그리고 추가되는 페이지마다 링크를 걸어 주겠습니다.그리고 붉은색 부분은 강좌마다 연습할 테스트를 입력할 부분입니다.추가되는 페이지마다 ..