HTML5 강좌 18강 - HTML5 태그 - 입력양식 form 사용하기 지난 강좌에 이어서 입력양식 form에서 사용하는 여러가지 태그들에 대해 알아보겠습니다.그 전에 지난강좌에서 테스트 했던 range 타입에 대해 추가적으로 기능을 더해볼까 합니다.바의 값을 변경하면 변경된 값을 모니터 할 수 있게 말이죠. *range 지난 강좌에서는 이렇게만 작성했는데요.간단한 코드를 추가해서 변경하는 값을 출력 해보겠습니다.(1)먼저 태그 안에 하나를 추가합니다.oninput="out.value = parseInt(points.valueAsNumber)"'입력이 일어나면 out 이라는 출력대상에 points 라는 객체의 값을 숫자로 출력한다'라는 내용입니다.(2)range 타입 밑에 아래와 같은 출력 태그를 하나..

HTML5 강좌 17강 - HTML5 태그 - 입력양식 form 사용하기 이번 강좌에서는 입력양식 form에서 사용하는 여러가지 태그들에 대해 알아보겠습니다.HTML5 form 에 관련된 태그는 꽤 많은 종류가 있습니다.태그들과 속성에 대해 정리를 하고 예제를 통해 테스트를 해보죠~ *form 입력양식button : 클릭이 가능한 버튼 정의(주로 자바스크립트를 활성화시키기 위해서 사용)checkbox : 체크박스file : 파일 업로드를 위한 파일 입력과 선택 필드 정의hidden : 숨겨진 입력 필드 정의image : 이미지를 전송 버튼으로 정의password : 비밀번호 입력 필드(필드 내의 각 글자는 다른 글자로 대체 표시됨)radio : 라디오 버튼reset : 리셋 버튼(폼의 모든 필드를 초기값..

HTML5 강좌 16강 - HTML5 태그 - 미디어 제어하기 이번 강좌에서는 미디어 파일을 자바스크립트를 통해 제어해 보도록 하겠습니다. 자바스크립트에 대해 생소한 분들이 있을수도 있겠네요.자바스크립트는 웹 문서의 기능적인 부분이나 제어적인 부분을 처리하는 언어 정도로간단히 인지하고 넘어가면 될 듯 합니다.자바스크립트에 대한 강좌는 html5 강좌 이후에 진행하겠습니다. 먼저 기본적인 메소드를 보겠습니다. *play() : 미디어 파일을 재생함*pause() : 미디어 파일을 일시 정지함 위 내용대로 한 버튼에는 미디어 파일을 재생하는 버튼을 연동시키려 하고요한 버튼에는 미디어파일을 일시정지 하는 버튼을 연동시켜 보겠습니다. 먼저 버튼을 만들고 onclick 속성을 이용하여 클릭했을 경우 발생하는 이벤..

HTML5 강좌 15강 - HTML5 태그 - 비디오 이번 강좌에서는 비디오를 재생하는 플레이어를 만들어보겠습니다.비디오 태그는 오디오 태그와 거의 흡사합니다. 지원 불가능한 브라우저에서 표현할 내용 정말 간단하죠?오디오 태그와 마찬가지로 source 요소를 사용하여 좀 더 디테일한 플레이어 설정이 가능합니다. 지원 불가능한 브라우저에서 표현할 내용 비디오 태그에 속성에 대해 알아보겠습니다.오디오 태그 속성과 비슷합니다. (1)src : 재생할 파일 경로 지정(2)autoplay : 페이지 로드 시 사운드를 재생할 지 여부 지정(3)controls : 플레이어 표시(4)loop : 반복할 재생 횟수(5)preload : 페이지가 열릴 때 오디오의 로드 설정-> none : 자동 로드하지 않음, auto ..

HTML5 강좌 14강 - HTML5 태그 - audio 이번 강좌에서는 오디오를 재생하는 플레이어를 만들어보겠습니다.기존 html 에서는 embed 방식을 사용했는데요.html5에서 기본적인 오디오 플레이어는 정말 간단합니다. 오디오 태그에 아이디 속성값과 오디오파일 경로를 입력해주면 됩니다.그리고 마지막에 controls 이라는 속성을 선언해 주면 끝~ *audio 속성(1)src : 재생할 파일 경로 지정(2)autoplay : 페이지 로드 시 사운드를 재생할 지 여부 지정(3)controls : 플레이어 표시(4)loop : 반복할 재생 횟수(5)preload : 페이지가 열릴 때 오디오의 로드 설정-> none : 자동 로드하지 않음, auto : 자동 로드, meta : 오디오의 메타 정보만 ..

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()는 선의 마지막 지점과 첫번째 지점을 연결하는 메소드 입니다. 위와 같이 선이 이어져 삼각형을 만들었습니다.위 방법을 이용하여 다양한 모양의 다각형을 만들 수 있죠.처음 만들었던 자바스크립트 코..