IT전문교육 의 리더!

HOME>IT전문가>핵심 웹표준퍼블리셔>HTML5 & CSS3 [실무]

HTML5 & CSS3 [실무]

20회차 속성과정|전체 : 9시간 34분|회차당 평균 : 28분41초
HTML5 & CSS3 [실무] / 2개월
HTML5 & CSS3 [입문 + 실무] / 4개월
270,000 165,000
  • 전문강사 : 채명수/양진영
Study Guides
웹표준에서 빠져서는 안 될 HTML5와 CSS3의 관계 및 기본을 담았습니다.
 
  • 웹페이지 구성 종류별 실습
  • 0126분 HTML5와 CSS3로 웹페이지를 제작합니다. Season 4-1의외로 간단한 페이지 제작

    책갈피 : [00:00] 쉽게 작업하는 방법/[01:15] 떠있는 메뉴 만들기/[03:20] body, font:normal/[04:11] 내용 확인/[04:29] nav/[04:45] padding/[05:13] position:relative/[05:23] min-height/[06:20] display:block/[06:57] width:200px/[08:14] 결과 확인/[08:54] text-align:center/[09:30] font-family, sans-serif/[10:31] text-transform/[11:24] 결과 확인/[11:40] 상속관계/[12:52] form/[13:35] 내용 확인/[14:05] nav form/[14:18] position:absolute/[15:33] font- size/[15:51] text-transform:uppercase/[16:38] line-height/[17:27] nav form label input/[17:32] padding:3px 5px 3px 5px;/[18:20] min-height/[19:19] font-family/[19:35] text-transform:none, lowercase, capitalize/[20:45] cursor:auto/[21:45] nav form input/[22:39] width:50px/[22:54] min-height/[23:25] font-family/[23:36] text-transform/[24:13] cursor:pointer/[25:32] nav form input:hover/[25:53] 상속관계

  • 0223분 HTML5와 CSS3로 웹페이지를 제작합니다. Season 4-2의외로 간단한 페이지 제작

    책갈피 : [00:18] header/[00:51] section, header, nav, footer/[00:56] 전체 넓이 정의/[01:08] header/[01:16] margin:0 auto/[02:05] header, padding/[02:54] margin-bottom/[03:10] html>body header h1/[04:09] position:absolute/[04:30] 결과 확인/[04:55] 상속관계/[05:32] section/[05:33] 내용 확인/[06:09] section > div > div/[07:00] display:table-cell/[07:28] width, float:left/[07:59] text-decoration/[08:05] 결과 확인/[08:36] margin-bottom/[09:01] font-family/[09:46] line-height:1em/[10:55] timea/[12:48] 상속관계/[13:55] strong/[14:08] QR코드/[15:13] css 코딩/[15:53] 상속관계/[16:26] 떠있는 메뉴 붙여넣기/[16:31] aside/[17:10] position:fixed/[17:31] a:hover/[17:42] text-decoration:underline/[18:15] list-style:none/[19:16] font-family:lmpact/[20:47] footer/[20:55] claer:both/[21:24] padding-top/[22:14] 상속관계

  • 0330분 HTML5와 CSS3로 웹페이지를 제작합니다. Season 5-1숨김메뉴 ~ 이미지까지 다양한 페이지 제작

    책갈피 : [00:36] header/[01:07] 기본선언/[01:27] margin, padding, border/[01:51] outline, font-size/[02:30] vertical-align/[02:38] background: transparent/[03:07] body, ul, ol, a:hover/[03:10] line-height/[03:32] ul, ol/[03:56] 링크 컬러값 정의/[04:13] a:hover/[04:46] strong/[05:00] body > header .jab_a/[05:07] body/[05:32] width/[05:53] margin:20px auto 20px auto/[06:50] position:relative/[07:13] border-left, border-right/[07:38] 결과 확인/[08:38] border 색 변경/[09:57] body > header/[10:46] body > header .jab_a strong/[11:04] position:absolute/[11:25] top, left 값/[11:46] font-size/[11:53] line-height/[12:19] font-weight:normal/[12:51] strong/[13:43] display:block, font-size/[14:33] font-weight:normal/[15:19] position:relative/[16:30] article, section/[17:03] nav/[17:09] body > nav > p.em a/[17:39] position:absolute/[18:58] text-decoration:none/[20:25] 왼쪽 메뉴 선언/[20:33] body > nav/[21:11] 메뉴 넓이값 정해야 하는 이유/[21:50] body > nav > ul/[22:03] font-weight:bold/[22:20] body > nav ul li, body > nav li > a/[23:11] background-color/[23:24] 결과 확인/[23:51] body > nav ul a/[24:37] padding/[25:10] display:block/[27:01] body > nav li.current_page_parent > a/[27:29] background-color/[29:20] body > nav ul a:hover

  • 0436분 HTML5와 CSS3로 웹페이지를 제작합니다. Season 5-2다양한 페이지 제작

    책갈피 : [00:29] body > nav > ul > li > u/[00:55] position:absolute/[01:23] opacity/[01:44] width/[01:50] 결과 확인/[02:46] body > nav > ul > li:hover > ul/[03:38] z-index/[04:12] opacity/[04:15] 결과 확인/[05:07] body > nav > ul > li > ul:hover/[06:22] aside#alzio-form/[07:21] float:left/[07:35] color/[09:07] padding/[09:10] dl 선언/[10:10] aside#alzio-form input/[11:34] aside#alzio-form label/[11:54] position:relative/[12:31] text-transform:uppercase/[13:19] aside#alzio-legend/[13:50] text-transform:lowercase/[15:21] font-style:normal/[15:23] font-weight:normal/[16:09] display:block/[16:30] white-space:normal/[17:45] font-weight:bold/[18:46] aside#alzio-form button:hover/[19:16] width, color/[19:52] cursor:pointer/[21:10] background-color/[21:15] aside#alzio-form form fieldset dl/[21:51] body > article/[22:13] position:relative/[22:35] 결과 확인/[23:55] body.home > article/[25:13] body.home section.jab_b/[25:33] background-image:url/[25:47] 결과 확인/[27:34] border-left:solid/[28:32] background-color/[28:33] border-top:solid 5px white/[28:38] 결과 확인/[29:20]body.home section.jab_b p a/[32:12] background-color/[33:11] font-size/[33:31] position:absolute/[34:26] position:relative/[34:48] body.home section.jab_b p.jab_c a/[34:53] text-shadow

  • 0529분 HTML5와 CSS3로 웹페이지를 제작합니다. Season 5-3다양한 페이지 제작

    책갈피 : [00:43] body.home section.jab_b p.jab_c a b.good/[02:39] body.home section.jab_b p.jab_c a b.morning/[02:58] font-weight:normal/[05:18] height, position:relative/[06:08] 동시에 두 가지 css 적용하기/[06:24] border 값/[06:54] height 값/[07:53] body.home section.jab_b span.olient-alq-comov a/[07:56] display:block,/[08:22] text-shadow/[09:21] a:hover, background-color/[10:13] 마우스 오버 속도/[10:34] duration 값/[10:54] 고정 값 삽입/[12:02] position:absolute/[13:14] font-weight:normal/[14:37] body.home section.jab_b p.alzio-gogo/[14:48] line-height, text-align:center/[16:16] background-color/[17:58] clear:both/[18:36] border-top:solid 5px white/[18:50] body > footer p.foot-menu/[19:08] text-transform:uppercase/[19:44] display:inline/[22:40] padding/[23:06] text-decoration:none/[23:07] body > footer > ul li a:hover/[23:14] text-decoration:underline/[23:39] body > footer .vcard .ccb/[24:15] font-size/[24:41] body > footer .credits/[26:09] text-transform:uppercase/[26:33] body > footer .vcard a/[26:58] position:absolute/[27:27] display:block

  • 0637분 HTML5와 CSS3로 웹페이지를 제작합니다. Season 6-1블로그 방식의 페이지를 쉽게 제작합니다.

    책갈피 : [00:17] 간단한 페이지 만들기/[00:41] header/[01:23] 기본 문서선언/[02:00] body a:link a:visited a:hover/[02:11] line-height: 1em/[02:35] a:link/[02:53] a:hover, background-color/[03:54] html body/[04:00] background-color/[04:45] margin-left:auto;margin-right:auto/[05:35] margin-bottom:30px/[06:01] font-family:Arial,sans-serif/[06:22] position:relative/[06:48] body > header img h2 a a:hover/[07:11] height/[07:35] 결과 확인/[08:08] border:0, position:absolute/[09:21] img/[09:56] font-size, font-weight:normal/[10:57] color/[11:09] position:relative/[11:27] 결과 확인/[12:42] text-decoration:none/[14:04] nav/[14:36] body > nav/[14:47] padding-top, padding-bottim 값 정의/[15:28] width/[15:44] position:absolute/[16:41] border-left:solid/[16:58] padding-left/[18:12] body > nav li.oss_widget_about > h3 > a/[18:37] margin-bottom:1em/[19:02] padding-left:20px/[19:41] list-style:none/[20:16] padding-left:20px/[20:35] body > nav > ul > li/[21:10] margin-top:2em/[22:00] margin-left:10px/[22:50] font-size/[23:00] 하부에 하부가 있는 경우/[23:29] list-style:decimal/[24:29] 본문 구성 및 만들기/[24:50] article/[25:34] body > article/[25:51] padding, background-color, font-size, min-height/[26:42] 결과 확인/[27:21] radius/[27:55] body > article header h2 a:hover/[28:11] text-decoration:none/[28:34] text-decoration:underline/[29:00] 두가지를 같이 적용하기/[29:29] body > article header + footer/[30:16] 두가지를 한번에 적용하기/[30:45] margin-bottom/[31:30] body > article > article/[31:47] 구분선 만들기/[32:01] border-top:dotted 1px black/[33:08] :first-child/[33:52] border-top:0 none/[34:18] body article > header + footer/[34:51] footer 이후 적용받는 모든 것 처리하기/[35:11] margin-left/[36:18] solid 2px/[36:35] padding-bottom 값 변경

  • 0733분 HTML5와 CSS3로 웹페이지를 제작합니다. Season 6-2블로그 방식의 페이지를 쉽게 제작합니다.

    책갈피 : [00:23] body > footer/[01:06] padding:20px/[01:25] 결과 확인/[01:47] 라인 주기/[03:24] header/[04:11] * body/[04:50] width/[06:24] #header header h6/[06:43] font-size, padding-top/[07:19] position:relative/[08:46] font-weight:normal/[09:18] font-family: Georgia, serif/[10:07] padding-top:20px/[10:34] a header, #header a:link/[11:44] letter-spacing:0.3em/[12:55] 둥글게 만들기/[13:17] #header, .article/[14:33] 글자 크기 변경/[15:58] color 변경/[16:39] h1 a h2/[16:59] font-size/[17:04] line-height/[17:53] letter-spacing/[18:12] border:none/[19:30] 오른쪽에 메뉴 만들기/[20:00] aside/[20:37] top/[22:03] background-color/[21:42] padding, color/[22:45] aside h4 aside ul, aside p/[24:07] list-style-type:none/[24:37] aside a, aside a:active, aside a:visited/[24:49] color/[25:20] h4 p, ul hr/[26:13] margin, padding/[27:15] border, solid/[28:00] clear:both/[28:21] .article/[29:47] footer/[30:15] background/[30:51] width/[31:15] padding:1em/[31:19] 결과 확인/[31:43] text-align:right/[32:39] top 값 변경

  • 0827분 HTML5와 CSS3로 웹페이지를 제작합니다. Season 7-1CSS3 장점 이용한 페이지 제작

    책갈피 : [00:18] 상단 메뉴바 만들기/[01:04] #topline, 문서기본/[01:09] height, background/[01:50] margin, padding/[02:20] body 값 선언/[02:26] background/[02:56] font/[03:04] body a, a:active/[03:18] div 선언/[03:48] nav/[03:52] header/[04:09] 결과 확인/[04:29] linear-gradient/[04:55] li a h1, h3, h1 a/[05:21] text-decoration:none/[06:32] line-height:2em/[06:43] font-family:Arial, sans-serif/[07:12] h1 h2 h3/[07:30] text-shadow/[08:42] 그림자 테두리/[09:18] font-size, color/[10:03] line-height/[10:27] text-shadow:#fff 1px 1px 1px/[11:18] text-align:center/[11:38] letter-spacing/[12:44] p, li/[13:01] nav a, nav li/[13:54] #wrapper/[14:18] margin: 10px auto 0 auto/[15:44] #jab/[15:50] margin: 20px auto 0 auto/[16:36] padding/[17:18] rotate/[18:14] text-align:center/[18:55] #jab:hover/[19:06] -webkit-transform: rotate(5deg)/[19:42] -webkit-transform: all 0.5s ease-out/[20:45] header h1 a:hover img/[21:59] position:fixed/[22:33] header h1 a/[22:57] a:hover/[23:03] text-shadow/[23:43] margin-top/[23:57] section/[24:04] width:390px;float:right/[25:00] margin:0 0 50px 0/[25:33] footer/[26:32] footer p

  • 0930분 HTML5와 CSS3로 웹페이지를 제작합니다. Season 7-2CSS3 장점 이용한 페이지 제작

    책갈피 : [01:29] margin:0;padding:0;border:0;/[01:37] font, text 정의/[02:20] 결과 확인/[03:40] nav/[04:05] sbackground:-webkit-linear-gradient/[05:24] 결과 확인/[06:17] 점층적인 gradient/[06:57] position: absolute/[08:23] box-shadow: rgba/[09:11] 내용 확인/[09:42] height, left,/[10:32] position: relative/[10:57] text-align: right/[12:46] display:inline-block/[13:24] padding/[13:45] height/[13:59] line-height/[14:04] margin-left/[14:47] display: inline/[15:51] background:-webkit-linear-gradient/[17:17] 결과 확인/[18:05] -webkit-repeating-linear-gradient/[18:50] 결과 확인/[19:06] 빗살무늬 반대로 바꾸는 방법/[19:44] 빗살무늬 전체 범위/[20:34] 빗살무늬 색깔 범위/[21:03] 로고 만들기/[21:50] a:hover/[22:09] margin: 0 auto;position:relative;width:700px/[22:33] 결과 확인/[22:57] header/[23:55] title/[24:04] margin, padding/[24:41] height/[25:07] margin-top, width/[25:59] box-shadow/[26:43] background, border, solid/[27:33] display-block/[28:10] text-decoration: none

  • 1027분 HTML5와 CSS3로 웹페이지를 제작합니다. Season 7-3CSS3 장점 이용한 페이지 제작

    책갈피 : [00:02] logofoot/[00:09] text-transform: uppercase/[00:28] font-size/[00:45] padding, text-shadow/[01:16] 결과 확인/[01:32] white-space:nowrap/[02:36] aside/[02:56] position: absolute/[03:59] display: block/[04:31] font-style: normal, opacity/[04:32] opacity/[08:00] padding-top/[08:31] float: left/[08:42] padding-bottom, width/[09:55] float: left, width/[11:00] white-space: nowrap/[11:13] p.intro/[11:39] line-height/[12:35] background: rgba/[13:23] border:1px solid rgba/[13:37] display: inline-block/[14:02] 결과 확인/[15:28] gradient(linear, 0 0, 0 150, from, to/[15:57] 결과 확인/[16:07] border: 2px solid/[17:03] float: right/[17:13] width/[18:20] text-decoration: none/[18:40] #rightbox aside/[18:45] float: left/[19:35] margin-top/[20:00] ul 태그/[20:42] float: right, width/[21:13] #rightbox .ulfoota li/[21:34] display, inline/[21:55] ulfoota-link/[22:26] margin/[22:41] baner/[23:04] display: inline-block/[23:49] padding/[24:01]text-align: center, text-decoration: none/[25:09] background-image/[26:34] ellipse farthest-corner

  • 1123분 HTML5와 CSS3로 웹페이지를 제작합니다. Season 7-4CSS3 장점 이용한 페이지 제작

    책갈피 : [00:01] transparent/[00:41] box-shadow/[01:01] inset/[02:11] 결과 확인/[02:38] letter-spacing/[03:02] .baner .cook/[05:36] display: block, font-size/[05:44] letter-spacing: 0/[06:22] text-transform: capitalize/[07:07] background-color/[07:09] 마우스 오버시 내용 바뀌도록 하는 방법/[08:38] float:left/[10:07] list-style: none/[10:40] background: rgba/[11:23] line-height/[13:22] -webkit-box-shadow: rgba/[14:33] 다른 알파값을 가진 세 가지 한번에 적용하기/[15:54] width값 변경/[16:29] 마우스 오버시 빨간색으로 변하게 처리/[17:07] margin: 0/[18:10] clear: both/[18:59] padding/[19:22] #transition on a:not(alzio)/[20:30] #transition on a img/[21:25] margin-left, padding-left/[21:49] padding-left 값 변경/[22:29] a:hover img

  • 1227분 CSS3 를 이용한 실용작품 만들기 part1에니메이션 효과를 낼수있는 메뉴 제작

    책갈피 : [01:36] body html/[02:59] mission_a h1 a/[03:43] a:hover::after content/[10:35] border-radius box-shadow inset/[13:00] mission_b/[14:23] transition opacity ease-out/[16:37] mission_c ul/[19:04] text-shadow rgba/[20:31] border-top-right-radius transition ease-out/[22:45] mission_c li a:hover/[24:16] box-shadow rgba transition ease-out/[26:38] a a:hover

  • 1329분 CSS3 를 이용한 실용작품 만들기 part2에니메이션 효과를 낼수있는 메뉴 제작

    책갈피 : [01:22] body/[01:37] main/[02:04] background, url/[02:22] a/[02:31] text-decoration/[03:17] a:hover/[03:37] header/[05:11] header nav/[05:58] background: rgba/[06:24] box-shadow/[07:13] header nav ul/[08:01] header nav ul li/[08:48] display: inline-block/[09:50] border-radius/[09:54] box-shadow rgba/[11:15] border-bottom rgba/[12:04] transition-property/[12:19] transition-duration/[14:07] header nav ul li a:hover/[14:40] border-radius/[14:54] box-shadow rgba/[16:31] main/[17:50] border-bottom-left-radius/[18:38] main_a p/[18:54] text-shadow rgba/[20:44] minaver/[23:07] border-radius/[23:22] box-shadow rgba/[24:13] color rgba/[24:29] background rgba/[25:13] minaver_b/[27:11] minaver_c

  • 1432분 CSS3 를 이용한 실용작품 만들기 part3에니메이션 효과를 낼수있는 메뉴 제작

    책갈피 : [00:04] Google Web Fonts API/[03:00] body/[04:07] border-top/[04:11] box-shadow:0 -1px 0/[05:23] main a/[05:43] main .button/[05:54] margin-top/[06:07] border:7px solid rgba/[06:17] border-radius/[07:09] font-family/[09:03] main .button a:hover/[09:47] transition-property color, text-shadow/[09:59] transition-duration/[12:48] header/[14:02] transform: rotate/[14:57] maintwo_ok/[15:57] header h1/[18:03] mainloa/[20:01] right-radius left-radius box-shadow transition/[21:55] transform:scale/[23:09] blockquote:hover/[25:01] nav.main/[25:28] right-radius/[26:14] nav.main ul/[27:40] border-radius/[27:53] property: color, background/[28:23] duration/[29:22] ease/[30:14] nav.main a.selec/[31:52] transform:scale

  • html5 api
  • 1525분 Chapter 1캔버스, 곡선의 기본 형태

    책갈피 : [00:42] ctx/[00:48] lineWidth/[00:54] 좌표/[01:12] strokeRect()/[01:30] drawshapes 추가/[02:38] onLoad/[02:54] 넓이 조정/[03:03] beginPath (추가)/[03:17] arc(원 생성)/[04:25] stroke/[06:07] fillRect/[07:32] 변수정의 (alzioAPI)/[10:08] 원을 벗어난 공간에 사각형 분리/[10:58] 실선, 원에 색 채우기/[11:26] stroke → fill/[12:45] 사선 그리기/[14:15] 수치,색,넓이 조정/[18:54] lineCap/[19:04] butt/[19:15] square/[19:25] round/[19:46] 곡선/[19:56] 좌표 정의/[20:05] bezierCurveTo()/[20:41] ctx.stroke()/[23:26] linejoin/[23:47] 곡선을 면으로 연결/[23:52] fill/[24:10] fillStyle

  • 1626분 Chapter 2bezier, quadratic, bezier, round

    책갈피 : [00:02] ctx.moveTo()/[00:21] bezier/[00:45] stroke/[01:02] quadraticCurveTo()/[02:52] arc/[03:41]fill/[03:47] lineWidth/[04:07] 결과 보기/[04:33] beginParh/[04:43] 하트 모양 그리기/[04:49] ctx.moveTo/[05:43] 결과 보기/[06:19] quadraticCurveTo/[08:15] 오른쪽 코딩/[10:48] 자유형태 사각형 필요/[12:35] closeParh/[12:43] 결과확인/[12:53] 테투리 만들기/[13:04] fill-stroke값으로 변경/[13:21] 결과확인/[13:36] lineCap 정의/[13:58] stroke → round 처리/[14:07] 결과보기/[14:29] Gradient/[14:37] 도형 생성/[14:54] fillRect();/[16:21] clearRect/[16:35] 혼합색만들기/[17:38] rgb (color)/[18:14] rgba/[18:14] 겹쳐지는 부분 색/[20:14] rotate/[21:19] translate/[22:23] rotate(20*Math.PI/180)/[23:50] var 복사, 붙여넣기/[24:00] 변수선언 (grd)/[24:22] grd=ctx.createLinearGradient()/[25:24] width,height,style 조정

  • 1727분 Chapter 3캔버스, 그레이디언트, 외곽선, 도형 그림자

    책갈피 : [00:42] grd.addColorStop()/[01:11] ctx.rect()/[01:22] ctx.fillSytle=grd/[01:42] ctx.fill()/[02:15] offset 0~1/[05:59] RadialGradient/[06:02] xStart,yStart/[06:14] radiusStart(반지름)/[06:18] xEnd,yEnd/[06:26] radiusEnd (반지름)/[06:33] grdr=ctx.createRadialGradient()/[06:49] grdr.addColorStop()/[07:16] ctx.fillStyle=grdr/[07:25] ctx.fill()/[07:16] ctx.strokeStyle=grd/[08:50] ctx.lineWidth/[09:01] ctx.stroke()/[11:06] Font/[11:21] ctx.font="bold px sans-serif"/[11:35] ctx.fillStyle/[12:05] ctx.fillText/[13:24] 선에대한 컬러가다른 텍스트/[13:53] ctx.strokeStyle/[14:49] ctx.textAlign="center"/[19:35] 그림자 역할/[19:57] ctx.shadowColor/[20:11] ctx.shadowOffsetX/[20:14] ctx.shadowOffsetY/[20:39] ctx.shadowBlur/[23:33] transparent/[27:02] Blur 효과

  • 1832분 Chapter 4그림판, 애니메이션, 그래프

    책갈피 : [00:04] Clip 기능/[01:45] ctx.rect(좌표)/[02:46] arc/[06:55] 좌표 수정/[08:37] fillStyle, rgb/[09:45] 도형 겹침/[10:50] 시작점 move To/[11:05] 끝점 변경 line To/[11:13] stroke 선언/[11:38] bezierCurveTo/[13:39] lineWidth/[13:57] strokeStyle/[14:22] restore/[15:04] save/[15:24] rectWidth,rectHeight/[16:23] fillRect/[22:13] scale/[24:15] 넓이,높이 먼저 변경/[24:44] rgba값으로 변경/[25:38] translate/[25:55] scale/[26:03] fillStyle="red"/[26:16] textAlign="center"/[26:19] font(사이즈,글꼴,삐침유무)/[26:26] fillText (출력사항)/[27:24] 가로값, 세로값 (x,y)/[28:07] 음수값일 경우/[29:51] mirror 기능

  • 1928분 Chapter 5clip, restore, save, mirror, scale, mousePos

    책갈피 : [00:02] radius/[00:16] save/[00:19] translate/[00:25] scale/[00:47] arc/[01:15] restore/[01:29] fillStyle/[02:10] 타원형 생성/[03:11] 달걀형 생성/[03:57] lineWidth/[04:12] strokeStyle/[05:03] 폰트 수정/[05:25] fillText/[05:59] ID명, 변수 변경/[06:22] getElementByld/[06:35] getContext/[06:57] addEventListener/[07:06] mousemove/[07:12] funtion(evt)/[07:33] getMousePos(canvas,evt)/[08:08] message 정의/[08:24] 'Mouse :' + mousePos.x + ','/[09:12] + mousePos.y;/[09:23] writeMessage(canvas,message)/[09:53] false/[10:03] function/[10:24] context=canvas.getContext("2d")/[11:08] clearRect/[11:44] fillText(message,좌표)/[12:42] function getMousePos(canvas,evt)/[13:08] canvas.getBoundingClientRect/[13:39] x: evt.clientX - rect.left/[13:53] y: evt.clientY - rect.top/[14:55] Mouse (마우스위치)/[16:52] flage = flase/[16:56] ready = function/[17:24] onmousedown/[17:43] drawStart/[17:47] onmousemove/[17:50] drawing/[18:11] window.onmouseup/[18:20] drawEnd/[18:35] drawStart=function(event)/[18:55] x,y 좌표 입력/[18:59] xpos=event.target.offsetLeft/[19:30] ypos=event.target.offsetTop/[20:40] flag = true/[21:47] lineCap = 'round' / stroke/[23:13] onLoad=ready/[23:47] input 태그 삽입/[24:07] red = function

  • 2027분 Chapter 6애니메이션

    책갈피 : [00:14] New 버튼 생성/[00:30] erase=function()/[00:44] context.clearRect/[02:04] canvas(=image) 저장하기/[04:24] dirX, dirY/[04:55] window.onload=init/[05:02] function init/[06:14] function drawBall(x,y)/[06:10] x,y 값/[07:40] function clearContext()/[07:53] function animate()/[08:07] xpos+=speed/[08:21] ypos+=speed/[08:46] drawBall(xpos,ypos)/[11:58] setInterval(animate, seconds)/[14:28] barswidth/[14:46] c.getContext('2d')/[15:22] c2.getContext('2d')/[17:47] position:absolute/[18:39] div id/[18:44] canvas id/[19:16] button id/[20:36] drawBars(ctx,a,b,c,d,color)/[18:18] globalAlpha/[22:14] P태그로 정의/[22:53] dro.preventDefault()/[23:21] dro.dataTransfer.setData/[23:36] "images", dro.target.id/[24:28] appendChild/[24:46] ondragover/[25:01] ondragstart,ondrag,ondragend/[26:41] ondragenter,onDragOver/[26:46] ondragleave,ondrop






본 강의 수강생들의 추가구매가 가장 많은 학과.