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 부분에 메뉴도 수정하였습니다. 보라색 부분은 강좌를 진행하면서 추가될 메뉴 입니다.메뉴가 추가되면 당연히 페이지도 추가되겠죠~그리고 추가되는 페이지마다 링크를 걸어 주겠습니다.그리고 붉은색 부분은 강좌마다 연습할 테스트를 입력할 부분입니다.추가되는 페이지마다 ..

HTML5 강좌 3강 - HTML5 레이아웃 잡아보기 지난 강좌에 이어 이번강좌에서는 HTML5를 이용하여 기본적인 레이아웃을 잡아보도록 하겠습니다.레이아웃을 잡아 페이지를 만들다 보니 css 요소가 무지 많이 들어갑니다. 위 붉은색 부분이 바로 css 요소입니다.css는 웹문서의 스타일을 잡아주는.. 그러니까 좀 더 깔끔하고 멋진 페이지로 만들어 주는것 입니다.소스코드를 받아보면 깜짝 놀랄수도 있습니다.하지만 걱정하실 필요 없습니다.css.. 스타일시트는 차근차근 알아가면 됩니다.중간중간 css 관련 요소가 강좌 내용에 나올겁니다.그리고 부족한 부분은 따로 강좌 내용에 넣도록 하겠습니다. 이렇게 레이아웃을 만들어 보았습니다.이왕 이렇게 레이아웃을 만들었으니 태그를 연습하면서 메뉴들을 하나씩 채워보도록 ..

HTML5 강좌 2강 - HTML5 시맨틱웹을 위한 구성요소 지난 강좌에 이어 이번강좌에서는 시맨틱웹을 위한 HTML5 새로 추가된 태그에 대해 공부하겠습니다.지난 강좌에 시맨틱웹 태그에 대해 잠깐 언급했는데요.복습하는겸 정리를 하자면 다음과 같습니다. *시맨틱웹을 위한 태그머리말을 나타내는 태그제목과 부제목을 묶는 태그메뉴 부분을 나타내는 태그개별 콘텐츠를 나타내는 태그제목별로 나눌 수 있는 태그좌우측의 사이드바를 나타내는 태그제작자의 정보나 저작권의 정보를 나타내는 태그 위의 내용이 왜 시맨틱웹을 위한 태그일까요?예를 들면 우리는 지난 HTML에서 코딩을 할 경우 다음과 같이 했습니다. 헤더에 들어갈 내용 헤더 부분의 영역을 div라는 박스에 묶어서 사용을 했죠.하지만 시맨틱웹에서는 태그 자체의 의미..

HTML5 강좌 1강 - HTML5 개념 및 기본구조 지난 강좌에서 HTML 태그에 대해 공부하고 연습을 했습니다.이번 강좌에서는 HTML5에 대해 알아보도록 하죠.이번 강좌 역시 기본적인 개념은 간단히 이해하고, 예제를 테스트 해보면서 HTML5를 공부하도록 하겠습니다. 참고로 이 강좌는 능숙한 개발자들을 위한 강좌가 아닙니다.지극히 웹에 대해 초보적이고 이제 입문하는 분들을 위한 강좌입니다. 먼저 HTML5가 무엇인지, 왜 HTML5를 사용하는지 알아보겠습니다. *HTML5란 무엇인가?HTML5란 웹 문서를 제작하는 데 쓰이는 기본 프로그래밍 언어 HTML(hypertext markup language)의 최신규격 입니다.HTML5를 사용하면 별도 프로그램을 깔지 않아도 인터넷 브라우저상에서 화려한 ..

HTML 강좌 16강 - HTML 태그 익히기#15 - object 이번 강좌에서는 object 태그에 대해 알아보도록 하겠습니다.object 태그를 사용해 미디어 영상 파일이나 플래시 파일을 재생할 수 있습니다.영상을 삽입하는 방법은 embed 태그 형식이 더 간단합니다.하지만 embed 태그 형식은 사용자의 컴퓨터에 미디어를 재생할 수 있는 플레이어가 없으면 재생이 되질 않습니다.반면에 object 태그는 ActiveX 기반이므로 사용자의 컴퓨터에 플레이어가 없어도 재생이 가능합니다.하지만 ActiveX가 지원되는 브라우저에서만 가능하죠. 간단하게 사용법을 보도록 하겠습니다. Object 태그 속성- id : 객체의 아이디(ID) - 개발자가 임의로 지정합니다.- classid : 윈도우 레지스트리나..

HTML 강좌 15강 - HTML 태그 익히기#14 - marquee 이번 강좌에서는 marquee 태그에 대해 알아보도록 하죠.이 태그는 이런 저런 사이트들을 돌아다니다 보면 가끔씩 볼 수 있는데요.좌에서 우로, 혹은 우에서 좌로 움직이는 텍스트를 표현하는 태그입니다.스크롤 기능이 있는 텍스트라고 합니다. 사용법은 간단합니다.시작태그와 종료태그 사이에 원하는 텍스트를 입력하면 끝!하지만 좌/우 스크롤 방향을 옵션으로 설정해 주어야겠죠~오른쪽으로 흐르는 텍스트왼쪽으로 흐르는 텍스트direction 속성값을 설정해 주면 되겠네요~ 이렇게 코딩을 하고 테스트를 해보도록 하겠습니다. 설정한 값대로 아주 잘 움직이는군요~ 그리고 marquee는 behavior 라는 속성도 가지고 있습니다behavior는 어떤 ..