웹프로그래밍 제 4 장 HTML5
4. HTML5 교재 p.349 4.1 HTML5 기초 4.2 HTML5 문서작성 4.3 HTML5 그래픽 4.4 HTML5 API 4.5 HTML5 추가및제외사항 2
4.1. HTML5 기초 교재 p.351 HTML5 개요 HTML5 문서의구조 3
4.1.1 HTML5 개요 교재 p.351 HTML5 WHATWG(Web Hypertext Application Technology Working Group) 모임에서새로운 HTML의표준안을만들기시작 W3C에서이모임을흡수하여본격적으로 HTML5 표준화작업진행 4
4.1.1 HTML5 개요 교재 p.352 HTML5 의특징 시맨틱태그의추가 그래픽및멀티미디어기능강화 새로운폼컨트롤추가 애플리케이션개발을위한 API 제공 5
4.1.2 HTML5 문서의구조 HTML5 문서의기본구조 교재 p.353 6
4.1.2 HTML5 문서의구조교재 p.353 7
4.1.2 HTML5 문서의구조 문서구조태그 기본태그 <!DOCTYPE html> <html> <head> <title> <body> 교재 p.354 8
4.1.2 HTML5 문서의구조 문서구조태그 ( 계속 ) 시맨틱태그 <header> <nav> <article> <section> <aside> <footer> 교재 p.354 9
문서구조태그 교재 p.354 <!DOCTYPE> 선언 형식 : <!DOCTYPE html> <header> 태그 형식 : <header> 머리말 </header> <hgroup> 태그 형식 : <hgroup> 제목태그그룹 </hgroup> <nav> 태그 형식 : <nav> 링크블록 </nav> 10
문서구조태그 교재 p.355 <article> 태그 형식 : <article> 문서내용 </article> <section> 태그 형식 : <section> 섹션내용 </section> <aside> 태그 형식 : <aside> 부가적인내용 </aside> <footer> 태그 형식 : <footer> 꼬리말 </footer> 11
간단한 HTML5 문서작성 [ 예제 first-example.html ] 1: <!DOCTYPE html> 2: <html> 3: <head> 4: <title> 여행 </title> 5: </head> 6: <body> 7: <header> 8: <hgroup> 9: <h1> 여행을떠나자 </h1> 10: <h3> 여행목적지에따른준비사항 </h3> 11: </hgroup> 12: </header> 13: <nav> 14: <ul> 15: <li> <a href="#"> 국내 </a> </li> 16: <li> <a href="#"> 동남아 </a> </li> 17: <li> <a href="#"> 유럽 </a> </li> 교재 p.357 12
간단한 HTML5 문서작성 교재 p.357 18: <li> <a href="#"> 미주 </a> </li> 19: </ul> 20: </nav> 21: <article> 22: 여행을하기전에준비물을점검합시다. 23: <section> 24: <header> 25: <h4> 비상약챙기기 </h4> 26: </header> 27: <p> <br> <br> 감기약, 진통제, 소화제, 밴드, 간단한소독약등 </p> 28: </section> 29: </article> 30: <aside> 31: 여권발급방법 32: </aside> 33: <footer> 2013.1.10 작성 </footer> 34: </body> 35: </html> 13
간단한 HTML5 문서작성 실행결과 교재 p.358 14
간단한 HTML5 문서작성 [ 예제 first-example.css ] 교재 p.358 1: header, section, nav, article, aside, footer 2: {position:absolute; padding:10px; border:1px solid black; display:block;} 3: header {top:0%; width:100%; height:15%; background-color:yellow;} 4: nav {top:20%; width:100%;} 5: nav ul li {top:20%; left:10%; margin:0 20px; list-style:none; display:inline;} 6: article {top:32%; width:70%; height:53%;} 7: section {top:60%; width:93%; height:30%; padding:2%; background-color:orange;} 8: section header {top:10%; width:92%; height:30%; padding:0px;} 9: aside {top:32%; left:75%; width:25%; height:53%; background-color:pink;} 10: footer {top:90%; width:100%; background-color:lightgreen;} 15
간단한 HTML5 문서작성 교재 p.359 [ 예제 first-example.html의 <head> 요소수정 ] <head> <title> 여행 </title> <link href="first-example.css" rel="stylesheet" type="text/css"> </head> 16
간단한 HTML5 문서작성 실행결과 교재 p.359 17
4.2 HTML5 문서작성 교재 p.360 기본태그 폼태그 미디어태그 18
4.2.1 기본태그 교재 p.360 HTML5 에서새롭게추가한기본적인 태그들에대하여알아보자. 19
<ruby> 태그 교재 p.360 <ruby> 태그 텍스트주변에나타나는주석을표시 주로발음이나설명을나타내는데이용 - <ruby> -<rt> -<rp> : 하나이상의 <rt> 나 <rp> 요소를포함 : 작은글씨로주석을나타냄 : <rt> 태그를지원하지않은브라우저에서괄호안에주석을표현 형식 : <ruby> <rt> ~ </rt> </ruby> 20
<ruby> 태그 교재 p.360 [ 예제 ruby.html ] 7: <h1> 8: <ruby> 9: 大 <rt> 대 </rt> 韓 <rt> 한 </rt> 10: </ruby> 11: </h1> 12: <h1> 13: <ruby> 14: 民 <rt><rp>(</rp> 민 <rp>)</rp></rt> 15: 國 <rt><rp>(</rp> 국 <rp>)</rp></rt> 16: </ruby> 17: </h1> 21
<ruby> 태그 교재 p.361 실행결과 ( 익스플로러 ) ( 파이어폭스 ) 22
<bdi> 태그 교재 p.361 <bdi> 태그 텍스트방향이다른부분을분리할때사용 보통문장의진행방향 : 좌횡서 아랍어같은경우 : 우횡서 문장중간에진행방향이다른문구를삽입 <bdi> 태그로표시 본래의문장과구분형식 : <bdi> ~ </bdi> * bdi: bi-directional isolation 23
<mark> 태그 교재 p.362 <mark> 태그 중요하다고생각되는부분표시 노란형광색으로표현 형식 : <mark> ~ </mark> [ 예제 mark.html ] 7: <h2> 우유를살때는반드시 <mark> 유통기한 </mark> 을확인하세요.</h2> 24
<mark> 태그 교재 p.362 실행결과 25
<meter> 태그 교재 p.363 <meter> 태그 막대그래프로분포비율 형식 : <meter [ 속성 ]> ~ </meter> 속성 form = " 폼이름 " : <meter> 요소가속하는폼 value = " 수 " high = " 수 " low = " 수 " max = " 수 " min = " 수 " optimum = " 수 " : 범위에서최적의값 26
<meter> 태그 교재 p.363 [ 예제 meter.html ] 7: <meter value="0.3"> </meter> 30% 를표현 <br> <br> 8: <meter min="0" max="10" value="7"> </meter> 10 에서 7 을표현 <br> <br> 9: <meter min="0" max="10" low="2" high="8" value="9" optimum="5"> </meter> high 가 8 일때 9 를표현 27
<meter> 태그 교재 p.364 실행결과 28
<progress> 태그 교재 p.364 <progress> 태그 작업의진행상황표시에사용 형식 : <progress [ 속성 ]> ~ </progress> 속성 value = " 수 " max = " 수 " 29
<progress> 태그 교재 p.364 [ 예제 progress.html ] 7: <progress value="0.3"></progress> 30% 를표현 <p> 8: <progress max="10" value="7" ></progress> 10 에서 7 을표현 <p> 30
<progress> 태그 교재 p.365 실행결과 31
<details> 태그 교재 p.365 <details> 태그 추가적인세부사항기술을위해사용 <summary> 태그와함께사용 형식 : <details [ 속성 ]> ~ </details> 속성 open 또는 open = "open" 32
<summary> 태그 교재 p.365 <summary> 태그 <details> 태그내포함 내용의요약 ( 또는제목 ) 을나타내는데사용 형식 : <summary> ~ </summary> 33
<details> 태그 / <summary> 태그 [ 예제 details.html ] 교재 p.366 7: <details> 8: <summary> 웹프로그래밍에사용되는언어 </summary> 9: <p> 웹문서와웹에서실행되는프로그램을작성하기위해서는 HTML, 10: HTML5, CSS, JavaScript, JSP, SQL 등의언어를사용한다. </p> 11: </details> 34
<details> 태그 / <summary> 태그교재 p.366 실행결과 35
<wbr> 태그 교재 p.366 <wbr> 태그 화면의너비때문에줄바꿈이필요한경우에지정된곳에서줄바꿈허용 형식 : <wbr> 36
<wbr> 태그 교재 p.367 [ 예제 wbr.html ] 7: <h1> Hello!! GoodMorning!! </h1> 8: <h1> Hello!! Good<wbr>Morning!! </h1> 9: <nobr> <h1> Hello!! GoodMorning!! </h1> </nobr> 10: <nobr> <h1> Hello!! <wbr> GoodMorning!! </h1> </nobr> 37
<wbr> 태그교재 p.367 실행결과 38
<command> 태그 교재 p.368 <command> 태그 명령실행 형식 : <command [ 속성 ]> ~ </command> 속성 disabled type = "command( 기본 ) checkbox radio" checked 또는 checked = "checked" icon = "url" label = " 이름 " radiogroup = " 이름 " : radio type 일때 command 그룹의이름 39
<command> 태그 교재 p.368 [ 예제 command.html ] 8: <menu> 9: <command type="command" label=" 사과 " onclick="alert(' 사과 ')"> 사과 </command> 10: <command type="command" label=" 배 " disabled onclick="alert(' 배 ')"> 배 </command> 11: <command type="command" label=" 귤 " onclick="alert(' 귤 ')"> 귤 </command> 12: </menu> 40
<command> 태그 교재 p.369 실행결과 41
<figure> 태그 /<figcaption> 태그 <figure> 태그 그림, 사진, 다이어그램등포함할때사용 형식 : <figure> ~ </figure> 교재 p.369 <figcaption> 태그 <figure> 요소내에서그림에제목을붙임 형식 : <figcaption> ~ </figcaption> 42
<figure> 태그 /<figcaption> 태그 [ 예제 figure.html ] 9: <figure> 10: <img src="flower.jpg" alt=" 참나리 "> 11: <figcaption> [ 그림 1] 참나리 </figcaption> 12: </figure> 교재 p.370 43
<figure> 태그 /<figcaption> 태그교재 p.370 실행결과 44
<time> 태그 교재 p.371 <time> 태그 형식 : <time [ 속성 ]> ~ </time> 속성 datetime = "YYYY-MM-DDThh:mm:ssTZD" - YYYY -MM -DD -T : 분리자 -hh - mm -ss -TZD - 시각대 (UTC, GMT 등 ) pubdate = "pubdate" 45
<time> 태그 교재 p.371 [ 예제 time.html ] 7: <h2> 은행업무는 <time> 9:00 </time> 에시작한다. </h2> 8: <h2> 평창동계올림픽은 <time datetime="2018-02-09"> </time> 개막한다. </h2> 9: <time datetime="2013-01-20" pubdate="pubdate"> </time> 46
<time> 태그 교재 p.371 실행결과 * 브라우저가 <time> 태그를지원하지않음 47
4.2.2 폼작성태그 교재 p.372 기존의폼태그에새롭게추가된기능들 에대해알아보자. 48
4.2.2.1 폼태그 교재 p.372 형식 : <form action = "url" method = "get post"> ~ </form> action method enctype novalidate target accept-charset autocomplete name * 적색은 HTML5 에서추가 49
4.2.2.2 입력태그 교재 p.373 <input> 태그 형식 : <form> ~ <input 속성 > ~ </form> 속성 형식 : <input type = " 형식 " name = " 이름 " value = " 값 " size = " 문자수 " checked = "checked" maxlength = " 문자수 "> 50
4.2.2.2 입력태그교재 p.373 type 속성 type -text - password -checkbox -radio -hidden -image - file -button -submit -reset 51
<input> 태그에새롭게추가된속성교재 p.374 type 속성에추가된형식 type -color -date -datetime -datetime-local -email -month -number -range -search -tel -time -url - week 52
<input> 태그에새롭게추가된속성교재 p.374 새롭게추가된속성 autocomplete autocfocus form formaction formenctype formmethod formnovalidate formtarget height list max min multiple pattern placeholder required step width 53
type 속성 교재 p.374 color 타입 색상컨트롤을생성하여사용자가색상선택가능 [ 예제 input-color.html ] 7: <form> 8: 좋아하는색깔 <input type="color" name="color"> 9: </form> 54
type 속성 교재 p.375 실행결과 55
type 속성 교재 p.375 date 타입 날짜컨트롤에서날짜선택 [ 예제 input-date.html ] 7: <form> 8: 당신이태어난날은 : <input type="date" name="date"> 9: </form> 56
type 속성 교재 p.376 실행결과 57
type 속성 교재 p.376 datetime 타입 날짜와시각선택 [ 예제 input-datetime.html ] 7: <form> 8: 당신이태어난날짜와시각은 : <input type="datetime" name="date"> 9: </form> 58
type 속성 교재 p.377 실행결과 59
type 속성 교재 p.377 datetime-local 타입 날짜와시각선택 타임존사용하지않음 [ 예제 input-datetime-local.html ] 7: <form> 8: 당신이태어난날짜와시각은 : <input type="datetime-local" name="date"> 9: </form> 60
type 속성 교재 p.378 실행결과 61
type 속성 교재 p.378 email 타입 이메일주소입력시오류검사 [ 예제 input-email.html ] 7: <form> 8: 당신의이메일주소는 : <input type="email" name="email"> 9: <input type="submit"> 10: </form> 62
type 속성 교재 p.379 실행결과 63
type 속성 교재 p.379 month 타입 연과월선택 [ 예제 input-month.html ] 7: <form> 8: 당신이태어난연도와월은 : <input type = "month" name = "month"> 9: </form> 64
type 속성 교재 p.380 실행결과 65
type 속성 교재 p.380 number 타입 수입력가능한컨트롤생성 속성 max min step value 66
type 속성 교재 p.381 [ 예제 input-number.html ] 7: <form> 8: 1 ~ 100 사이에서당신이좋아하는수는 : 9: <input type="number" name="number" min="1" max="100"> 10: </form> 67
type 속성 교재 p.381 실행결과 68
type 속성 교재 p.381 range 타입 마우스로스크롤바움직여서수선택 속성 max min step value 69
type 속성 교재 p.382 [ 예제 input-range.html ] 7: <form> 8: 1 ~ 10 사이에서당신이원하는위치는 : 9: <input type="range" name="range" min="1" max="10"> 10: </form> 70
type 속성 교재 p.382 실행결과 71
type 속성 교재 p.382 search 타입 검색어입력할수있도록함 [ 예제 input-search.html ] 7: <form> 8: 검색하고싶은용어는 : <input type="search" name="search"> 9: </form> 72
type 속성 교재 p.383 실행결과 73
type 속성 교재 p.383 time 타입 컨트롤에서원하는시각선택 [ 예제 input-time.html ] 7: <form> 8: 당신의태어난시각은 : <input type="time" name="time"> 9: </form> 74
type 속성 교재 p.384 실행결과 75
type 속성 교재 p.384 url 타입 입력필드에 http:// 없이주소를적으면정확한 url 을요구하는메시지나타남 [ 예제 input-url.html ] 7: <form> 8: 당신이방문하고싶은홈페이지주소는 : <input type="url" name="url"> 9: </form> 76
type 속성 교재 p.384 실행결과 77
type 속성 교재 p.385 week 타입 연도와주입력 [ 예제 input-week.html ] 7: <form> 8: 당신이휴식을취할주간은 : <input type="week" name="week"> 9: </form> 78
type 속성 교재 p.385 실행결과 79
autocomplete 속성 교재 p.385 자동완성기능으로사용자의입력도움 형식 : <form autocomplete = "on" "off"> <input autocomplete = "on" "off"> 80
autofocus 속성 교재 p.386 입력필드에자동으로포커스줌 형식 : <input autofocus> 또는 <input autofocus = "autofocus"> 81
autofocus 속성 교재 p.386 [ 예제 input-autocomplete.html ] 7: <form autocomplete="on"> 8: <fieldset> 9: <legend> 회원가입 </legend> 10: 이름 : <input type="text" name="name" autofocus> <br> <br> 11: 주소 : <input type="text" name="address"> <br> <br> 12: 성별 : <input type="radio" name="sex" value="male"> 남 13: <input type="radio" name="sex" value="female"> 여 14: </fieldset> 15: <input type="submit" value=" 보내기 "> 16: </form> 82
autofocus 속성 교재 p.387 실행결과 83
list 속성 교재 p.387 list 속성 정의된항목들을목록으로보여줌 <datalist> 태그와함께사용 <datalist> 태그의 id 속성의값과 list 속성의값이일치해야함 형식 : <input list = " 아이디 "> datalist 태그 항목들을목록으로묶는데사용 형식 : <datalist id = " 아이디 "> ~ </datalist> 84
list 속성 교재 p.388 [ 예제 input-list.html ] 7: <form> 8: 당신이좋아하는과일은 9: <input list="fruits" name="fruit"> 10: <datalist id="fruits"> 11: <option value=" 바나나 "> 12: <option value=" 딸기 "> 13: <option value=" 복숭아 "> 14: <option value=" 포도 "> 15: <option value=" 사과 "> 16: </datalist> 17: </form> 85
list 속성 교재 p.388 실행결과 86
기타속성 교재 p.389 기타속성 multiple 또는 multiple = "multiple" pattern placeholder required 또는 required = "required" step 87
기타속성 교재 p.389 pattern 속성 [ 사용예 ] pattern="[a-za-z]{3}" pattern="[a-za-z0-9]{3,8}" pattern="[0-9]+" pattern="[0-9]{4}" 88
기타속성 교재 p.389 [ 예제 input-etc.html ] 7: <form> 8: 이름 : <input type="text" name="name" placeholder=" 이름입력 " required> <br> <br> 9: 당신이 5 의배수중좋아하는수는 : <input type="number" name="number" step="5"> <br> <br> 10: 당신이좋아하는 4 자리수는 : <input type="text" name="code" pattern="[0-9]{4}" title="four digit code"> <br> <br> 11: 첨부파일 : <input type="file" name="file" multiple> <br> <br> 12: <input type="submit" value=" 보내기 "> 13: </form> 89
기타속성 교재 p.390 실행결과 90
기타속성 교재 p.390 실행결과 91
폼속성설정 교재 p.391 형식 : <input type="submit" formaction=" 프로그램의 url"> <input type="submit" formenctype="application/x-www-form-urlencoded( 기본 ) multipart/form-data text/plain"> <input type="submit" formmethod="get( 기본 ) post"> <input type="submit" formnovalidate 또는 formnovalidate="formnovalidate"> <input type="submit" formtarget="_self( 기본 ) _blank _parent _top 프레임명 "> 92
폼속성설정 교재 p.392 [ 예제 input-form.html] 7: <form action="a.jsp" method="post" id="form"> 8: <fieldset> 9: <legend> 회원가입 </legend> 10: 이름 : <input type="text" name="name"> <br> <br> 11: 성별 : <input type="radio" name="sex" value="male"> 남 12: <input type="radio" name="sex" value="female"> 여 13: </fieldset> 14: <input type="submit" value=" 보내기 "> 15: <input type="submit" value="b.jsp 에게보내기 " formaction="b.jsp"> 16: <input type="submit" value="text/plain 으로보내기 " formenctype="text/plain"> 93
폼속성설정 교재 p.392 17: <input type="submit" value="get 방식으로보내기 " formmethod="get"> 18: <input type="submit" value=" 유효성검사없이보내기 " formnovalidate> 19: <input type="submit" value=" 새창으로보내기 " formtarget="_blank"> 20: </form> 21: 주소 : <input type="text" name="address" form="form"> 94
폼속성설정 교재 p.393 실행결과 95
4.2.2.3 암호화키생성태그 <keygen> 태그 암호화를위한개인키와공개키쌍을생성하는필드 형식 : <keygen [ 속성 ] > 속성 autofocus 또는 autofocus="autofocus" challenge disabled 또는 disabled = "disabled" form keytype = "rsa( 기본 ) dsa ec" name 교재 p.393 96
4.2.2.3 암호화키생성태그 [ 예제 keygen.html ] 교재 p.394 8: <form> 9: 값 <input type="text" name="text"> 10: encryption: <keygen name="security" keytype="rsa"> 11: <input type="submit" value=" 보내기 "> 12: <form> 97
4.2.2.3 암호화키생성태그 실행결과 교재 p.394 98
4.2.2.4 계산결과태그 교재 p.394 <output> 태그 계산결과표현 형식 : <output [ 속성 ]> ~ </output> 속성 for = " 변수이름 " form = " 폼아이디 " name = " 이름 " : 계산에사용되는변수들의이름나열 : output 요소가속하는폼의아이디 : output 요소의이름 99
4.2.2.4 계산결과태그 교재 p.395 [ 예제 output.html ] 8: <form> 9: a : <input name="a" type="number"> 10: b : <input name="b" type="number"><br><br> 11: 덧셈 : <output for "a b" onforminput="value = parseint(a.value) + parseint(b.value)"> </output><br><br> 12: 뺄셈 : <output for "a b" onforminput= "value = parseint(a.value) - parseint(b.value)"> </output><br><br> 13: 곱셈 : <output for "a b" onforminput= "value = parseint(a.value) * parseint(b.value)"> </output><br><br> 14: 나눗셈 : <output for "a b" onforminput= "value = parseint(a.value) / parseint(b.value)"> </output><br> 15: <form> 100
4.2.2.4 계산결과태그 교재 p.396 실행결과 101
4.2.2.5 그룹태그 교재 p.396 <fieldset> 태그 폼입력요소들을하나의그룹으로묶음 형식 : <fieldset [ 속성 ]> ~ </fieldset> 속성 disabled 또는 disabled="disabled" form = " 폼아이디 " name = " 이름 " <legend> 태그 그룹에이름을붙임 형식 : <legend> ~ </legend> 102
4.2.2.5 그룹태그 교재 p.397 [ 예제 fieldset.html ] 7: <form> 8: <fieldset> 9: <legend> 개인정보입력 </legend> 10: 이름 : <input type="text" name="name"> <br> <br> 11: 주소 : <input type="text" name="address"> <br> <br> 12: 전화번호 : <input type="text" name="tel"> 13: </fieldset> 14: <input type="submit" value=" 입력 "> 15: </form> 103
4.2.2.5 그룹태그 교재 p.397 실행결과 104
4.2.3 미디어태그 교재 p.398 <source> 태그 미디어자원을정의 형식 : <source [ 속성 ]> 속성 media = " 미디어질의 (media query)" src = "url" type = "mime_type" 105
4.2.3 미디어태그 교재 p.398 <audio> 태그 형식 : <audio [ 속성 ]> ~ </audio> 속성 src = "url" autoplay 또는 autoplay = "autoplay" controls 또는 controls = "controls" loop 또는 loop = "loop" preload = "auto metadata none" 106
4.2.3 미디어태그 교재 p.399 [ 예제 audio.html ] 9: <audio loop="loop" controls autoplay> 10: <source src="hello.ogg" type="audio/ogg"> 11: <source src="hello.mp3" type="audio/mpeg"> 12: 당신의브라우저에서는 <audio> 태그를지원하지않습니다. 13: </audio> 107
4.2.3 미디어태그 교재 p.400 실행결과 108
4.2.3 미디어태그 교재 p.400 <video> 태그 형식 : <video [ 속성 ]> ~ </video> 속성 src = "url" height = " 픽셀수 " width = " 픽셀수 " autoplay 또는 autoplay = "autoplay" controls 또는 controls = "controls" loop 또는 loop = "loop" muted 또는 muted = "muted" poster = "url" preload = "auto metadata none" 109
4.2.3 미디어태그 교재 p.401 [ 예제 video.html ] 9: <video width="300" height="200" controls poster="rose.jpg"> 10: <source src="test.ogg" type="video/ogg"> 11: <source src="test.mp4" type="video/mp4"> 12: <source src="test.webm" type="video/webm"> 13: 당신의브라우저에서는 <video> 태그를지원하지않습니다. 14: </video> 110
4.2.3 미디어태그 교재 p.401 실행결과 111
4.2.3 미디어태그 교재 p.402 <embed> 태그 형식 : <embed [ 속성 ]> 속성 src = "url" height = " 픽셀수 " width = " 픽셀수 " type = "mime_type" 112
4.2.3 미디어태그 교재 p.402 [ 예제 embed.html ] 7: <embed src="test.wmv" width="300" height="300" style="border:1px solid blue;"> 실행결과 113
4.3 HTML5 그래픽 교재 p.403 캔버스태그 HTML5의그래픽표현태그 그래픽메소드 Javascrip에서제공 114
4.3.1 캔버스태그 교재 p.403 <canvas> 태그 그래픽이그려질영역 ( 컨테이너 ) 생성 형식 : <canvas> ~ </canvas> 속성 id = " 이름 " : 그림영역이름 height = " 픽셀수 " width = " 픽셀수 " 115
4.3.1 캔버스태그 교재 p.404 [ 예제 canvas.html ] 3: <head> 4: <title> canvas </title> 5: <style type="text/css"> 6: canvas {border:1px solid blue;} 7: </style> 8: </head> 9: <body> 10: <canvas id="cvs" width="300" height="300"> </canvas> 11: </body> 116
4.3.1 캔버스태그 교재 p.404 실행결과 117
4.3.2 그래픽메소드 교재 p.405 그림그리기준비 1: <canvas id="cvs" width="300" height="300"></canvas> 2: <script type="text/javascript"> 3: var wpcanvas = document.getelementbyid("cvs"); 4: var wpcontext = wpcanvas.getcontext("2d"); 5: </script> 118
도형그리기 교재 p.406 [ 표 4.1] 도형그리기관련메소드 lineto(x,y) fill() beginpath() stroke() closepath() arcto(x1,y1,x2,y2,r) moveto(x,y) arc(x,y,r,sangle,eangle,aclockwise) rect(x,y,w,h) quadraticcurveto(cpx,cpy,x,y) fillrect(x,y,w,h) beziercurveto(cpx1,cpy1,cpx2,cpy2,x,y) strokerect(x,y,w,h) ispointinpath(x,y) clearrect(x,y,w,h) clip() 119
사각형그리기예제 교재 p.407 [ 예제 canvas-rect.html ] 그림영역설정 3: <head> 4: <title> canvas </title> 5: <style type="text/css"> 6: canvas {border:1px solid blue;} 7: </style> 8: </head> 9: <body> 10: <canvas id="cvs" width="300" height="300"></canvas> 120
사각형그리기예제 교재 p.407 [ 예제 canvas-rect.html ] 그림그리기준비 12: <script type="text/javascript"> 13: var wpcanvas = document.getelementbyid("cvs"); 14: var wpcontext = wpcanvas.getcontext("2d"); 그림그리기 16: wpcontext.fillrect(20, 20, 100, 100); 17: wpcontext.strokerect(20, 160, 100, 100); 18: wpcontext.fillrect(160, 20, 100, 100); 19: wpcontext.clearrect(190, 50, 40, 40); 20: </script> 121
사각형그리기예제 교재 p.408 실행결과 122
선그리기예제 교재 p.408 [ 예제 canvas-line.html ] 16: wpcontext.beginpath(); 17: wpcontext.moveto(50, 20); 18: wpcontext.lineto(50, 100); 19: wpcontext.lineto(130, 100); 20: wpcontext.closepath(); 21: wpcontext.fill(); 22: 23: wpcontext.beginpath(); 24: wpcontext.moveto(250, 20); 25: wpcontext.lineto(170, 100); 26: wpcontext.lineto(250, 100); 27 wpcontext.closepath(); 28: wpcontext.stroke(); 29: 30: wpcontext.rect(50, 160, 200, 100); 31: wpcontext.stroke(); 123
선그리기예제 교재 p.409 실행결과 124
클립활용예제 교재 p.410 [ 예제 canvas-clip.html ] 13: var wpcanvas1 = document.getelementbyid("cvs1"); 14: var wpcontext1 = wpcanvas1.getcontext("2d"); 15: wpcontext1.fillrect(0, 0, 150, 150); 16: 17: var wpcanvas2 = document.getelementbyid("cvs2"); 18: var wpcontext2 = wpcanvas2.getcontext("2d"); 19: wpcontext2.rect(40, 40, 70, 70); 20: wpcontext2.clip(); 21: wpcontext2.fillrect(0, 0, 150, 150); 125
클립활용예제 교재 p.411 실행결과 126
곡선그리기예제 교재 p.411 [ 예제 canvas-curve.html ] 16: wpcontext.beginpath(); 17: wpcontext.moveto(20, 50); 18: wpcontext.quadraticcurveto(70, 150, 120, 50); 19: wpcontext.stroke(); 20: 21: wpcontext.moveto(150, 50); 22: wpcontext.beziercurveto(150, 100, 250, 100, 250, 50); 23: wpcontext.stroke(); 127
곡선그리기예제 교재 p.412 실행결과 [ 조절점사용예 ] 128
호그리기예제 교재 p.413 각도사용예 radian = (Math.PI / 180) degree 형식 : context.arc(x, y, 반경, 시작각도, 종료각도, 반시계방향지정 ) 129
호그리기예제 교재 p.413 [ 예제 canvas-arc.html ] 16: wpcontext.beginpath(); 17: wpcontext.arc(70, 70, 50, 0*Math.PI, 1*Math.PI, true); 18: wpcontext.stroke(); 19: 20: wpcontext.beginpath(); 21: wpcontext.arc(220, 70, 50, 0*Math.PI, 1*Math.PI, false); 22: wpcontext.stroke(); 23: 24: wpcontext.beginpath(); 25: wpcontext.moveto(100, 120); 26: wpcontext.arcto(150, 120, 150, 170, 50); 27: wpcontext.stroke(); 130
호그리기예제 교재 p.414 실행결과 [arcto 메소드사용예 ] 형식 : context.arcto(x1, y1, x2, y2, 반경 ) 131
스타일지정 교재 p.415 [ 표 4.2] 스타일관련속성 linewidth linecap linejoin miterlimit fillstyle strokestyle shadowcolor shadowblur shadowoffsetx shadowoffsety 132
스타일지정 교재 p.415 [ 표 4.3] 스타일관련메소드 createlineargradient(x1,y1,x2,y2) createradialgradient(x1,y1,r1,x2,y2,r2) addcolorstop(position,color) createpattern(image, type) 133
스타일지정예제 교재 p.416 [ 예제 canvas-fillstyle.html ] 16: wpcontext.fillstyle = "red"; 17: wpcontext.fillrect(20, 20, 100, 100); 18: 19: wpcontext.strokestyle = "blue"; 20: wpcontext.linewidth = 10; 21: wpcontext.strokerect(20, 160, 100, 100); 22: 23: wpcontext.fillstyle = "green"; 24: wpcontext.fillrect(160, 20, 100, 100); 25: wpcontext.clearrect(190, 50, 40, 40); 134
스타일지정예제 교재 p.417 실행결과 135
선스타일예제 교재 p.417 [ 예제 canvas-line-style.html ] 14: wpcontext.strokestyle = "red"; 15: wpcontext.linewidth = 10; 16: 17: wpcontext.beginpath(); 18: wpcontext.linecap = "butt"; 19: wpcontext.linejoin = "bevel"; 20: wpcontext.moveto(20, 150); 21: wpcontext.lineto(60, 70); 22: wpcontext.lineto(100, 150); 23: wpcontext.closepath(); 24: wpcontext.stroke(); 136
선스타일예제 교재 p.418 26: wpcontext.beginpath(); 27: wpcontext.linecap = "round"; 28: wpcontext.linejoin = "round"; 29: wpcontext.moveto(140, 150); 30: wpcontext.lineto(180, 70); 31: wpcontext.lineto(220, 150); 32: wpcontext.closepath(); 33: wpcontext.stroke(); 34: 35: wpcontext.beginpath(); 36: wpcontext.linecap = "square"; 37: wpcontext.linejoin = "miter"; 38: wpcontext.moveto(260, 150); 39: wpcontext.lineto(300, 70); 40: wpcontext.lineto(340, 150); 41: wpcontext.closepath(); 42: wpcontext.stroke(); 137
선스타일예제 교재 p.419 실행결과 138
그림자생성예제 교재 p.421 [ 예제 canvas-shadow.html ] 16: wpcontext.beginpath(); 17: wpcontext.rect(20, 20, 100, 100); 18: wpcontext.fillstyle = "red"; 19: wpcontext.shadowcolor = "orange"; 20: wpcontext.shadowblur = 10; 21: wpcontext.shadowoffsetx = 20; 22: wpcontext.shadowoffsety = 20; 23: wpcontext.closepath(); 24: wpcontext.fill(); 139
그림자생성예제 교재 p.421 26: wpcontext.beginpath(); 27: wpcontext.rect(150, 150, 100, 100); 28: wpcontext.fillstyle = "blue"; 29: wpcontext.shadowcolor = "skyblue"; 30: wpcontext.shadowblur = 10; 31: wpcontext.shadowoffsetx = -20; 32: wpcontext.shadowoffsety = 20; 33: wpcontext.closepath(); 34: wpcontext.fill(); 140
그림자생성예제 교재 p.422 실행결과 141
그라디언트생성예제 교재 p.422 [ 예제 canvas-gradient.html ] 16: var grad = wpcontext.createlineargradient(10, 10, 120, 0); 17: grad.addcolorstop(0.3, "red"); 18: grad.addcolorstop(0.7, "yellow"); 19: wpcontext.fillstyle = grad; 20: wpcontext.fillrect(10, 10, 120, 120); 142
그라디언트생성예제 교재 p.423 22: var grad1 = wpcontext.createradialgradient(200,200,5,200,200,60); 23: grad1.addcolorstop(0, "navy"); 24: grad1.addcolorstop(0.2, "blue"); 25: grad1.addcolorstop(0.4, "royalblue"); 26: grad1.addcolorstop(0.6, "deepskyblue"); 27: grad1.addcolorstop(0.8, "skyblue"); 28: grad1.addcolorstop(1, "powderblue"); 29: wpcontext.fillstyle = grad1; 30: wpcontext.fillrect(140, 140, 120, 120); 143
그라디언트생성예제 교재 p.423 실행결과 144
패턴생성예제 교재 p.424 [ 예제 canvas-pattern.html ] 10: <p> 사용된이미지 <br><br> <img src="small-heart.jpg" id="img"></p> 18: var wpimage = document.getelementbyid("img"); 19: var pat = wpcontext.createpattern(wpimage,"repeat"); 20: wpcontext.rect(0, 0, 140, 140); 21: wpcontext.fillstyle = pat; 22: wpcontext.fill(); 145
패턴생성예제 교재 p.425 실행결과 146
텍스트그리기 교재 p.425 [ 표 4.4] 텍스트관련속성 font textalign textbaseline [ 표 4.5] 텍스트관련메소드 filltext(text,x,y,maxwidth) stroketext(text,x,y[,maxwidth]) measuretext(text).width 147
텍스트그리기예제 교재 p.426 [ 예제 canvas-text.html ] 16: wpcontext.fillstyle = "red"; 17: wpcontext.font = "italic small-caps bold 50px 궁서체 "; 18: wpcontext.filltext(" 안녕하세요!!!", 10, 50); 19: 20: wpcontext.strokestyle = "blue"; 21: wpcontext.stroketext(" 반갑습니다!!!", 10, 150); 148
텍스트그리기예제 교재 p.427 실행결과 149
기준선그리기예제 교재 p.427 [ 예제 canvas-baseline.html ] 16: wpcontext.fillstyle = "red"; 17: wpcontext.font = "bold 25px 궁서체 "; 18: wpcontext.moveto(0, 100); 19: wpcontext.lineto(800, 100); 20: wpcontext.stroke(); 150
기준선그리기예제 교재 p.428 22: wpcontext.textbaseline = "bottom"; 23: wpcontext.filltext("bottom", 10, 100); 24: wpcontext.textbaseline = "middle"; 25: wpcontext.filltext("middle", 120, 100); 26: wpcontext.textbaseline = "top"; 27: wpcontext.filltext("top", 240, 100); 28: wpcontext.textbaseline = "alphabetic"; 29: wpcontext.filltext("alphabetic", 300, 100); 30: wpcontext.textbaseline = "hanging"; 31: wpcontext.filltext("hanging", 480, 100); 32: wpcontext.textbaseline = "ideographic"; 33: wpcontext.filltext("ideographic", 600, 100); 151
기준선그리기예제 교재 p.428 실행결과 152
이미지삽입 교재 p.429 [ 표 4.6] 이미지관련속성 width height Data [ 표 4.7] 이미지관련메소드 createimagedata() drawimage() getimagedata() putimagedata() 153
이미지삽입 교재 p.430 [ 예제 canvas-image.html ] 10: <p> 원본이미지 <br><br> <img src="dragonfly.jpg" id="img"> </p> 15: document.getelementbyid("img").onload = function() { 16: var wpcanvas = document.getelementbyid("cvs"); 17: var wpcontext = wpcanvas.getcontext("2d"); 18: 19: var wpimage = document.getelementbyid("img"); 20: wpcontext.drawimage(wpimage, 100, 50, 150, 150, 0, 0, 300, 300); 21: }; 154
이미지삽입 교재 p.431 실행결과 155
그림변형 교재 p.431 [ 표 4.8] 변형관련메소드 translate(x,y) scale(x,y) rotate(angle) transform(a,b,c,d,e,f) settransform(a,b,c,d,e,f) 156
그림변형예제 교재 p.432 [ 예제 canvas-transform-1.html ] 15: wpcontext.strokestyle = "blue"; 16: 17: wpcontext.strokerect(100, 20, 20, 20); 18: wpcontext.scale(2, 2); 19: wpcontext.translate(10, 10); 20: wpcontext.rotate(20*math.pi/180); 21: wpcontext.strokerect(100, 20, 20, 20); 157
그림변형예제 교재 p.433 실행결과 158
그림합성 교재 p.435 [ 표 4.9] 합성관련속성 globalalpha globalcompositeoperation 159
그림합성예제 1 교재 p.435 [ 예제 canvas-compositing-1.html ] 15: wpcontext.globalalpha = 0.7; 16: 17: wpcontext.fillstyle = "red"; 18: wpcontext.beginpath(); 19: wpcontext.arc(100, 100, 50, 0*Math.PI, 2*Math.PI); 20: wpcontext.fill(); 21: 22: wpcontext.fillstyle = "yellow"; 23: wpcontext.beginpath(); 24: wpcontext.arc(170, 100, 50, 0*Math.PI, 2*Math.PI); 25: wpcontext.fill(); 26: 27: wpcontext.fillstyle = "blue"; 28: wpcontext.beginpath(); 29: wpcontext.arc(140, 150, 50, 0*Math.PI, 2*Math.PI); 30: wpcontext.fill(); 160
그림합성예제 1 교재 p.436 실행결과 161