전체 : 18시간 0분| 강의당평균 : 1시간 12분 0초
<HTML5 특강>
01 Chapter 1
HTML5형식, DOCTYPE, 한글 깨짐, googlecode, section, ,article, header, footer, nav, figure, canvas, strokeText, svg, polygon points, video, object, hspace
43분
책갈피 : [00:04] 기본 HTML5 문서형식/[00:18] DOCTYPE 선언/[00:31] UTF-8/[00:59] 브라우저 한글 깨짐/[01:29] 저장 시 인코딩 설정/[02:14] euc-kr/[02:21] Elements/[03:47] googlecode/[03:50] 경로변경 후 사용/[04:11] Manual installation/[04:38] 대·소문자 구분X/[05:00] HTML 4.01/[05:31] XHTML, HTML5/[05:46] section/[06:18] article/[06:31] header(제목글,머리말)/[07:37] footer(바닥글)/[08:13] navigation/[08:56] figure(들여쓰기)/[09:19] figcaption/[09:30] canvas 기능/[10:49] 이미지 id값/[11:02] Javascript/[11:14] 위치,내용 id값/[11:19] Javascript 구현/[12:50] 작동여부확인(하위 브라우저)/[14:16] 변수 설정변경/[14:44] stroke/[15:56] 도형 면적/[16:24] 사각형 내 원의 위치/[17:23] 원주율 조절/[17:54] 윗변, 아랫변 조절/[19:39] 텍스트 입력X(fillText)/[20:56] strokeText/[21:15] LinearGradient/[22:05] grad.andColorStop/[23:36] 수치값/[25:29] 선형 Gradient/[26:00] svg/[28:15] opacity/[29:29] polygon points/[30:37] 별 모양 만들기/[31:22] video 코덱/[31:39] 애플/안드로이드/[31:50] H.264/AVC/[32:02] mp4/[32:42] API 사용(동영상)/[33:44] 옵션값/[33:58] autoplay, aloop/[34:14] poster(재생 전 이미지)/[34:24] preload/[34:44] controls preload/[34:59] auto, none,metadata/[35:32] 브라우저별 컨트롤 버튼/[36:00] src/[36:32] wav,mp4,mkv,mov,flv,mp3/[38:36] object/[39:44] border pixel/[40:02] align (정렬값)/[40:27] form 연동/[41:10] hspace,vspace/[41:44] 사용자 테그 활용/[42:22] css style 별도 적용
02 Chapter 2
Full down menu, summary, main, article, mark, time, charset, header, menu, footer, rtl, ltr, cite, action, type, validation, formnovalidate, datalist, fieldset, allow-popups, allow-same-origin, allow-scripts, maplink, noreferrer, WebVTT, captions, descriptions, wbr, abbr
43분
책갈피 : [00:05] Full down menu/[00:23] html5 자체 제공 태그/[00:40] P태그/[01:06] summary태그 (제목)/[01:26] main/[01:50] article 삽입/[02:19] mark/[02:33] time/[02:48] 고객 브라우저에서는 명시X/[03:28] meta charset/[03:45] 페이지 생성/[03:50] header/[03:53] menu/[04:09] article/[04:31] footer/[05:06] style/[05:22] font-family: sans-serif/[05:56] 기본 태그 선언/[06:07] border,margin,padding,bgc/[06:51] 다른 배경 적용(header,footer)/[07:42] 내·외부 여백 없앰/[08:01] li(리스트), 여백/[08:10] 이미지 클릭→다운로드/[09:23] 절대경로/[09:57] rtl, ltr/[10:44] cite/[10:56] action/[11:21] 버튼, 액션경로/[12:19] type/[13:21] post(전송방식 지정)/[13:33] validation기능 해제/[13:50] formnovalidate/[14:24] datalist/[14:35] text, input/[15:46] 대화상자 정의/[16:20] fieldset/[17:46] iframe/[17:56] sandbox/[19:03] allow-popups/[19:14] allow-same-origin/[19:16] allow-scripts/[19:27] allow-top-navigation/[19:48] srcdoc/[20:47] keygen (security)/[21:12] 보안등급/[21:27] disabled/[21:53] [안내]태그제한으로등록되지않습니다-autofocus/[22:20] al_secure/[22:51] label/[23:40] min, max값/[25:48] maplink/[26:29] index파일 다운로드/[28:10] 미디어속성/[30:08] (ex) favicon/[31:16] noreferrer/[31:26] pingback/[32:27] rp/[33:11] video 태그/[33:56] WebVTT/[34:04] TTML/[35:27] subtitles/[35:39] captions/[36:00] descriptions/[36:09] chapters/[36:18] metadata/[36:22] wbr 태그/[38:35] 아이디 속성/[39:24] abbr/[41:11] fontx,css코딩d/[42:06] del, s/[42:27] tt
<HTML5, CSS3 이론>
03 HTML5, CSS3 이론 part 1
기본문서선언/그림자효과 및 라운드 기능/svg, input, video, audio/레이아웃 메뉴
1시간 32분
책갈피 : [00:02] HTML5/[00:27] CSS3/[00:38] 웹표준코딩/[01:21] 웹킷엔진/[02:06] 시뮬레이터/[02:49] 문서의 재 정의/[02:59] Java API/[03:52] Gecko 엔진/[05:05] 크롬 자동번역 현상/[05:15] Google 크롬 옵션/[05:55] DTD 선언/[05:59] XHRML/[06:04] !doctype html/[07:46] XHRML 선언/[08:51] XHRML 2.0 개발 관련/[09:31] 문서 타입 선언이 없는 브라우져 인식/[09:45] Quirks mode/[10:00] W3C/[10:35] html lang=" "/[11:21] euc-kr, 문자코드/[11:39] ANSI/[12:11] link/[13:43] article, section, header/[14:50] 시멘틱 요소/[15:51] div/[17:18] IETester 다운로드/[18:10] IE 8/[19:52] Script/[20:42] font-family/[21:20] 세리프(Serif)와 산세리프(Sans-Serif)/[21:57] margin/[22:56] footer/[24:07] margin없애기/[25:26] text-align, font-size/[25:28] margin/[27:48] nav/[28:34] ul/ li/[28:53] nav/[30:19] nav ul/[30:45] list style/ padding/ background/[31:24] nav ul li/[31:34] display/ padding/[32:14] a{color:#fff; text-decoration:none}/ a:hover{color:#000}/[32:56] border-color / border/[33:04] border-radius/[37:45] article/[39:35] text-shadow/[44:46] 자바스크립트 선언/[47:39] 기능별 input/[47:45] input, input 태그의 추가된 유형들/[48:30] placeholder/[50:21] [안내]태그제한으로등록되지않습니다-autofocus/[51:05] required/[54:01] SVG/[55:09] circle/[58:54] rect/[59:28] line/[01:00:57] stroke/[01:01:27] ellipse/[01:03:55] polygon/[01:07:08] video/[01:09:14] video 태그/[01:10:04] 브라우저별 video 지원형식/[01:11:17] source/[01:11:36] controls, autoplay/[01:13:26] audio/[01:19:19] webkit-text-size-adjust:none;/[01:21:01] wrapper/[01:22:02] header/[01:24:19] 상속관계/[01:25:39] nav/[01:29:36] 상속관계/[01:30:00] az_5/[01:30:48] border-radius/[01:32:03] 상속관계
04 HTML5, CSS3 이론 part 2
컬럼별 페이지 작업 및 label을 이용한 텍스트 크기 및 분할조절
60분
책갈피 : [00:00] section, article/[00:49] section/[01:55] css/[02:11] clear/[02:26] 결과 확인/[02:32] clear:both 제거, 결과 확인/[02:51] padding/[03:04] article/[04:18] div/[04:42] article > div > p/[05:03] margin/[05:08] text-align/[05:38] text-justify/[05:52] newspaper/[06:07] 결과 확인/[06:47] article > div > p/[06:59] text-indent/[07:11] 결과 확인/[07:55] 상속관계/[08:28] font-family/[08:47] 결과 확인/[09:13] alzio_t2 추가/[09:20] 예제를 통한 상속관계 확인/[10:08] css 선언/[10:18] p:first-of-type:first-letter/[10:37] p:first-of-type/[10:59] first-letter/[11:14] 결과 확인/[11:31] font-size/[11:36] font-weight/[11:42] 결과 확인/[11:54] background/[12:11] 상속관계/[12:47] padding/[13:24] margin/[14:13] 결과 확인/[14:42] background:#eee/[15:34] column-count, gap, rule/[16:03] column-count/[16:56] column-gap/[17:38] -moz-column-rule:1px solid #555/[18:25] 실선을 555 컬러로 나타내는 세가지 형태 /[19:43] 권장하는 방식/[20:38] alzio_t3 추가/[20:43] 결과 확인/[21:10] margin-left:auto, margin-right-auto/[21:25] 결과 확인/[21:50] 상속관계/[23:33] footer/[24:25] time/[25:03] pubdate/[25:30] datetime/[26:06] before/[27:36] 가상 엘리먼트 속성/[28:09] before를 이용한 content 출력/[28:47] text-align, padding, border/[29:18] 문서의 마무리/[29:30] footer에 대한 내용 css 지정 /[29:45] 결과 확인/[30:35] 상속관계/[31:06] range, min, max , step, value/[32:19] label/[33:19] range/[34:46] xxonchange="changeprop(this)"/[35:15] input/[35:18] alzio_oo article > div !important/[35:48] 결과 확인/[36:29] !important/[38:54] header{color:#FFFF00 !important}/[39:20] 결과 확인/[40:35] 웹접근성/[42:56] type=range, href =http/[43:43] 김철수 강사님 자바스크립트/[45:20] 상속관계/[45:53] changeprop/[46:27] xxonchange/[47:44] min, max, value/[48:05] input 태그에 새로 추가된 속성들/[48:51] column-count, column-gap/[50:04] checkbox/[52:17] column-count/[53:18] justify, inherit/[53:55] article/[54:10] column-count/[55:05] replace/[55:54] toUpperCase()/[56:52] toLowerCase()/[58:00] addEventListener/[01:00:15] 상속관계
05 HTML5, CSS3 이론 part 3
서버 폰트 적용/ellipsis/clip/텍스트 그래픽/여러 애니메이션 기능/RGBA/|box 스타일/child 및 flex box/마우스 오버시 메뉴사이즈 변경
1시간 24분
책갈피 : [00:00] 웹서버에 폰트 올리고 적용하는 방법/[01:15] p태그에 글꼴 넣기/[02:08] font-family/[02:35] NanumBrush/[03:35] font/[03:50] Sans-Serif/[04:05] 결과 확인/[04:40] NanumBrush/[04:53] 폰트명 변경 예제/[05:28] 결과 확인/[05:42] 변경된 파일명 font-family, local 적용/[06:04] 넘치치 않게 하는 방법/[06:14] overflow:hidden/[06:56] p태그 간격/[07:26] 상속관계/[08:18] 주석처리/[08:33] 새로운 css style/[08:53] 박스 만들기/[09:09] solid 값 주기/[09:24] width 값/[09:28] 결과 확인/[10:05] overflow:hidden/[10:24] white-space:nowrap/[10:43] 결과 확인/[11:08] overflow:hidden/[11:31] white-space:nowrap/[12:20] 상속관계/[13:01] 텍스트 면과 선/[13:05] webkit/[13:44] transition/[14:12] display:inline/[14:46] background/[15:28] margin-left:0, margin-left:500px/[16:04] animation/[16:47] display/[17:09] Transition/[17:18] display: inline/[17:43] Transition/[18:30] margin-left 5s/[19:44] div i값/[20:46] 테스트/[21:03] margin-left 값 변경, 확인/[22:41] transform/[23:12] 회전/[23:32] 상속관계/[24:17] body 값 지정/[24:42] Rotate 값 어떻게 할지?/[25:01] transform, Rotate/[25:47] 이미지 넣기/[25:55] 적용된 값 확인/[26:16] 기본적인 이미지/[26:37] p 태그로 구분/[27:07] transform, Rotate/[27:26] 결과 확인/[27:49] 스케일값/[28:31] scale/[29:07] 적용된 값 확인/[30:23] scaleX(3)/[31:17] skew 값/[31:51] skewX(30deg)/[32:16] 결과 확인/[32:39] skewY(20deg)/[33:02] 결과 확인/[33:50] 상속관계/[34:36] font-family/[36:04] keyframes/[36:42] opacity: 0,3/[36:58] font-size/[37:48] webkit-animation-name/[38:02] webkit-animation-duration/[38:34] webkit-animation-iteration-count: infinite/[39:14] webkit-animation-timing-function/[39:23] webkit-animation-direction/[40:51] gradient/[41:02] 상속관계/[42:38] font-size, background/[42:56] gradient(linear)/[44:27] 결과 확인/[44:40] color-stop/[46:31] css 적용/[47:16] background, gradient/[48:18] 상속관계/[49:00] horizontal, vertical/[49:37] box-orient/[49:44] box-align: stretch/[50:19] background-color/[51:54] vertical/[52:06] display/[52:31] border: 3px solid #FF0000/[52:37] div 적용/[52:54] 결과 확인/[53:43] border: 1px solid #ccc/[54:59] 결과 확인/[55:56] width 값 변경/[56:24] solid 컬러 변경/[56:54] width 값 나누기/[57:15] 결과 확인/[58:01] vertical 나누기/[58:32] flex_child/[59:03] 문제점/[59:25] css명 변경/[59:41] box-flex/[01:00:05] 결과 확인/[01:01:45] text-align: center/[01:02:02] 상속관계/[01:02:57] 응용/[01:03:34] center_box/[01:03:39] 두가지 css를 동시에 적용하는 방법/[01:04:07] pack/[01:04:49] font 37px/[01:06:00] 수평 정렬/[01:06:06] center_box/[01:07:12] 결과 확인/[01:08:14] justify/[01:08:49] 결과 확인/[01:09:14] box-direction: reverse/[01:09:41] 결과 확인/[01:10:20] ordinal-group/[01:11:47] 결과 확인/[01:12:10] 10이 첫번째 순서에 있는 이유/[01:13:15] 상속관계/[01:14:46] padding, font-size/[01:14:45] rgba/[01:16:43] 내용 확인/[01:17:28] 그림자를 두군데에 주는 방법/[01:18:04] 결과 확인/[01:18:43] 상속관계/[01:19:19] 실습 응용/[01:19:44] menu/[01:20:18] transition, box-flex/[01:20:39] transition/[01:21:29] background/[01:22:21] div 설정/[01:23:01] width 값 변경/[01:23:39] 상속관계
<웹페이지 구성 종류별 실습>
06 HTML5와 CSS3로 웹페이지를 제작합니다. Season 1
웹표준 코딩을 기본으로 알고있어야 강의에 따라서 제작이 가능합니다. HTML5로고를 자신있게 사용할 수 있도록 강의합니다.
1시간 11분
책갈피 : [00:00] 기본선언 CSS/[01:23] 기본적인 문서 선언/[01:49] alzio_s_1.css 실습/[02:01] margin, padding, border/[02:29] a/[03:15] 세리프(Serif), background/[04:00] strong/[04:23] line-height:normal/[05:06] text-transform:uppercase/[05:35] margin-bottom:0px/[06:55] padding-bottom:10px, line-height/[07:34] float:right/[07:55] 결과 확인/[08:27] line-height:normal 제거/[08:48] zoom/[09:27] text-transform:uppercase/[09:38] 상속관계/[10:17] 레이아웃 생성/[10:30] header, #middle, footer/[11:11] position:relative/[11:15] middle/[12:21] header 선언/[13:21] 결과 확인/[14:12] top - div - content/[14:57] css 파일 적용/[14:57] content 적용/[15:47] hr, a:link, a:hover/[16:05] border-bottom:1px dashed #/[16:14] 결과 확인/[16:52] margin/[17:20] 실무/[17:43] margin:0; padding:0/[18:04] background:#컬러값/[18:58] margin:0 만 반영된 상태/[19:12] padding:0 반영되지 않은 상태/[20:12] 상속관계/[20:54] article, aside, footer, header, nav, section/[21:07] display:block/[22:06] article/[22:48] padding-bottom:70px/[23:51] text-transform:uppercase/[24:31] margin:0 auto/[26:17] 테스트/[26:51] sans-serif/[27:34] text-shadow/[27:37] letter-spacing/[29:35] 상속관계/[29:53] section/[30:11] 상속관계/[31:37] 웹문서 목록 만들기/[33:45] margin-left:10px/[33:54] border:solid/[34:09] list-style:none/[34:15] 결과 확인/[34:57] 메뉴 생성/[35:01] figure 값으로 내용 생성/[35:28] 떠있는 메뉴 만들기/[35:52] css 내용 삽입/[36:36] figure width 값 확인/[37:11] border-top:5px/[37:28] margin:30px 0 0 0/[38:00] float:left/[38:39] 상속관계/[38:49] position:relative/[40:09] z-index/[41:00] display:block/[42:53] 결과 확인/[43:36] padding:10px/[44:23] display:block 유,무 설명/[45:09] text-shadow/[45:25] 결과 확인/[46:33] dashed/[46:47] a:hover/[46:55] 결과 확인/[47:47] 상속관계/[48:45] hr 선언/[49:17] 하부 내용 추가/[50:09] section. our 추가/[50:22] font-family, font-size/[50:58] padding:10px 0 10px 10px/[51:16] 결과 확인/[51:39] text-align:right/[52:38] font-family, text-align:center/[53:28] 결과 확인/[53:51] 상속관계/[54:16] 4가지 내용 삽입/[55:07] css 삽입/[55:54] float:left/[56:08] 결과 확인/[56:46] float:left 없는 경우/[57:09] min-height/[57:41] padding-top/[58:11] 결과 확인/[59:28] alzio_qra, alzio_qra:hover/[01:00:18] 결과 확인/[01:00:34] border-bottom:7px solid #FF0000/[01:01:05] 상속관계/[01:01:36] footer로 문서 마무리/[01:02:20] font-family, background/[01:02:32] 결과 확인/[01:02:41] text-align:center/[01:03:15] 결과 확인/[01:03:35] 중첩된 div 제거/[01:04:01] HTML5 로고/[01:05:07] 로고 만드는 방법/[01:06:00] 빠진 내용 설명/[01:06:10] 문제 해결/[01:07:02] 내용 정리/[01:07:44] 강의 목적/[01:08:26] article/[01:09:18] section/[01:09:41] figure/[01:09:59] figcaption/[01:10:27] 상속관계
07 HTML5와 CSS3로 웹페이지를 제작합니다. Season 2
웹표준 코딩을 기본으로 알고있어야 강의에 따라서 제작이 가능합니다. HTML5로고를 자신있게 사용할 수 있도록 강의합니다.
49분
책갈피 : [00:00] 쉬운페이지를 위한작업/[00:38] 브라우져 적용 사항/[01:47] 공통적으로 적용할 css 정의/[02:25] margin, padding, border/[02:33] outline/[02:59] outline:1px solid red/[03:55] vertical-align:baseline/[05:15] a/[05:22] text-decoration/[05:39] a:hover/[05:51] text-decoration:underline/[06:08] body 설정/[07:15] div 설정/[07:45] css에서 container 값 코딩/[08:01] padding-top/[08:15] 상속관계/[09:00] heder/[09:24] 내용 확인/[10:03] margin-bottom, border-bottom/[10:44] margin-bottom 값 변경/[11:03] 로고 정하기/[11:44] background:transparent/[12:27] css background 사이즈/[12:50] 결과 확인/[13:23] padding-bottom/[14:38] height:260px;padding-bottom:30px/[15:47] 전반적으로 마우스오버 되는 방법/[17:17] 로고 출력/[17:41] 원하는 위치에 로고 출력/[18:32] position:relative/[18:51] left, top 값 지정/[19:23] font-size, font-family/[19:33] 결과 확인/[19:49] 구분선 삽입/[20:05] border-color/[20:51] clear:both/[21:00] width/[21:26] 상속관계/[21:58] nav/[22:55] font-family:Arial, sans-serif/[23:47] ul 목록, li 목록/[24:12] float:left, font-size/[24:44] list-style-type:none/[25:52] 상속관계/[26:28] 여러가지 적용받는 작업/[28:38] 결과 확인/[28:52] color 값 변경/[29:28] 방문한 곳과 방문하지 않은 곳 적용하기/[31:14] section/[32:57] font-family, font-size, width/[33:16] margin-bottom/[34:09] vertical-align:baseline/[34:36] vertical-align:text-bottom/[35:35] line-height/[36:24] main/[36:32] float:left/[36:54] margin: 30px 0 20px 20px/[37:55] float:rightt;/[38:15] margin: 0px 0 20px 30px/[38:28] border/[38:45] box-shadow/[39:41] background/[40:09] 상속관계/[40:48] hr/[41:06] footer/[42:06] width값/[43:05] border-top/[44:00] margin:0 auto, padding:20px 0 0 0/[46:08] list-style-type/[46:17] 결과 확인/[46:49] id/[48:12] 상속관계
08 HTML5와 CSS3로 웹페이지를 제작합니다. Season 3
해상도에따른 퍼센트(%)로 페이지제작을 합니다. 스크립트 없이 떠있는메뉴 및 오버시 출력되는 메뉴까지 완벽하게 제작합니다.
1시간 5분
책갈피 : [00:00] html, body, a, a:hover, img/[00:22] 레이아웃 없이 만들기/[01:08] 기본적인 웹문서 세팅/[02:07] font:medium sans-serif/[02:51] margin-left, margin-right/[03:47] a, a:hover/[04:14] font-weight:bold/[04:22] text-decoration/[04:34] text-decoration: underline/[05:07] header 선언/[05:31] 머리말 삽입/[06:39] css스타일 상단 타이틀 작업/[07:14] body > header h1/[07:26] a:visited/[08:42] h1/[08:54] float: left, padding/[09:51] font-family/[10:20] font-style:italic/[10:39] line-height/[11:32] 폰트 사이즈 변경/[11:54] body > header/[13:01] font-weight: bold/[13:37] 결과 확인/[13:57] header p/[14:12] padding-left,/[14:19] margin-bottom:30px/[14:33] 내용 확인/[15:00] 배경에 내용이 들어가도록 만들기/[15:09] clear:both/[16:07] 결과 확인/[16:52] 상속관계/[17:18] 게시판, 블로그 목록 처럼 내용 만들기/[18:09] time 태그, datetime/[18:50] strong/[19:53] 내용 확인/[20:09] article, body > article/[20:34] padding: 0 25px 0 50px/[21:02] border-width, border-style: outset/[22:05] body > article/[22:26] border-radius/[23:14] 상속관계/[23:20] body > article header, h3/[23:44] font-size, margin-bottom/[24:28] font-family:Georgia, serif/[24:56] font-size:14pt/[25:44] font-size:18pt, xx-large/[26:52] text-indent:-30px/[27:20] 결과 확인/[28:42] header time/[29:10] display:block/[29:55] 상속관계/[30:41] text-align: right/[30:56] clear/[31:37] 상속관계/[31:56] hr/[32:19] display: none/[33:03] line-height:1.5/[33:36] 결과 확인/[34:20] float:right/[35:26] 상속관계/[35:44] 퍼센트 값/[36:02] 떠있는 메뉴 만들기/[36:42] css 우배너 작업/[36:58] aside/[37:21] h2에 배경 주기/[37:51] font-weight:bold/[38:07] padding: 1em 1em .38em 1em/[38:35] border-radius/[39:18] font-family: Georgia, serif/[39:47] font-style:italic/[40:45] nav h2, body > aside/[40:50] 그림자 효과/[41:42] positioｎ:fixed/[42:25] top, right 값 설정/[43:00] text-align:center/[43:16] z-index/[43:55] border-style:outset/[44:46] nav, nav ul, nav li, nav li:hover/[45:54] padding:0/[46:11] list-style-type:none/[46:50] transition/[47:47] font-size:xxlarge/[48:10] 상단에 메뉴 만들기/[48:16] positioｎ:fixed/[48:37] 상속관계/[49:02] 마우스 오버 했을 때 작업/[49:49] svg/[50:18] float:right/[50:44] 마우스 오버 했을 때 하위 메뉴 출력/[51:20] 내용 확인/[51:57] footer/[52:28] body > footer/[52:43] color/[52:55] font-size/[53:24] position:absolute/[54:00] 볼릭기호 제거/[54:53] footer > ul > li/[55:32] 결과 확인/[55:55] footer ul ul/[56:14] float:left/[57:33] footer ul li:hover ul/[57:57] display:block/[58:17] position:absolute/[59:37] border-bottom-left-radius/[01:00:19] z-index/[01:00:53] footer ul li:hover ul ul/[01:01:35] margin-left/[01:02:52] border-radius/[01:04:04] 상속관계
09 HTML5와 CSS3로 웹페이지를 제작합니다. Season 4
rss 링크정보와 sns마케팅을 잘해야 합니다. 의외로 간단한 페이지 제작이며 친구에게 알리기 등의 내용을 포함하고 있습니다.
49분
책갈피 : [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] 상속관계/[26:34] header/[27:06] section, header, nav, footer/[27:09] 전체 넓이 정의/[28:17] header/[27:33] margin:0 auto/[28:18] header, padding/[29:02] margin-bottom/[29:26] html>body header h1/[30:17] position:absolute/[30:43] 결과 확인/[31:09] 상속관계/[31:47] section/[32:08] 내용 확인/[33:00] section > div > div/[33:13] display:table-cell/[33:39] width, float:left/[34:12] text-decoration/[34:22] 결과 확인/[34:54] margin-bottom/[35:11] font-family/[35:59] line-height:1em/[37:48] timea/[39:03] 상속관계/[40:11] strong/[40:26] QR코드/[41:26] css 코딩/[42:10] 상속관계/[42:40] 떠있는 메뉴 붙여넣기/[43:09] aside/[43:19] positioｎ:fixed/[43:38] a:hover/[43:54] text-decoration:underline/[44:28] list-style:none/[45:25] font-family:lmpact/[46:27] footer/[47:07] claer:both/[47:39] padding-top/[48:27] 상속관계
10 HTML5와 CSS3로 웹페이지를 제작합니다. Season 5
페이지내의 정보가 좀 복잡하지만 숨김메뉴부터, BG 이미지까지 다양한 시도를 하게되는 페이지입니다.
1시간 34분
책갈피 : [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/[30:13] body > nav > ul > li > u/[30:30] position:absolute/[31:04] opacity/[31:26] width/[31:42] 결과 확인/[32:33] body > nav > ul > li:hover > ul/[33:20] z-index/[33:35] opacity/[34:02] 결과 확인/[34:53] body > nav > ul > li > ul:hover/[36:40] aside#alzio-form/[36:44] float:left/[37:20] color/[38:31] padding/[38:54] dl 선언/[39:59] aside#alzio-form input/[41:09] aside#alzio-form label/[41:23] position:relative/[42:08] text-transform:uppercase/[42:48] aside#alzio-legend/[43:33] text-transform:lowercase/[44:38] font-style:normal/[45:05] font-weight:normal/[45:51] display:block/[46:17] white-space:normal/[47:23] font-weight:bold/[48:26] aside#alzio-form button:hover/[48:57] width, color/[49:24] cursor:pointer/[50:09] background-color/[50:40] aside#alzio-form form fieldset dl/[51:35] body > article/[51:59] position:relative/[52:22] 결과 확인/[53:38] body.home > article/[55:01] body.home section.jab_b/[55:07] background-image:url/[56:03] 결과 확인/[57:18] border-left:solid/[57:59] background-color/[58:21] border-top:solid 5px white/[58:25] 결과 확인/[59:06] body.home section.jab_b p a/[01:01:30] background-color/[01:02:47] font-size/[01:03:19] position:absolute/[01:04:11] position:relative/[01:04:32] body.home section.jab_b p.jab_c a/[01:05:05] text-shadow/[01:06:49] body.home section.jab_b p.jab_c a b.good/[01:08:00] body.home section.jab_b p.jab_c a b.morning/[01:08:15] font-weight:normal/[01:10:38] height, position:relative/[01:11:37] 동시에 두가지 css 적용하기/[01:11:50] border 값/[01:12:22] height 값/[01:13:19] body.home section.jab_b span.olient-alq-comov a/[01:13:22] display:block,/[01:13:49] text-shadow/[01:14:47] a:hover, background-color/[01:15:37] 마우스 오버 속도/[01:16:00] duration 값/[01:16:21] 고정 값 삽입/[01:17:26] position:absolute/[01:18:42] font-weight:normal/[01:20:08] body.home section.jab_b p.alzio-gogo/[01:20:10] line-height, text-align:center/[01:21:34] background-color/[01:23:22] clear:both/[01:23:58] border-top:solid 5px white/[01:24:19] body > footer p.foot-menu/[01:24:34] text-transform:uppercase/[01:26:45] display:inline/[01:27:34] padding/[01:28:26] text-decoration:none/[01:28:37] body > footer > ul li a:hover/[01:28:40] text-decoration:underline/[01:29:02] body > footer .vcard .ccb/[01:29:41] font-size/[01:30:03] body > footer .credits/[01:31:33] text-transform:uppercase/[01:31:51] body > footer .vcard a/[01:32:21] position:absolute/[01:32:52] display:block
11 HTML5와 CSS3로 웹페이지를 제작합니다. Season 6
너무 복잡해야만 페이지가 완성되는 것은 아니기때문에 블로그 방식의 페이지를 쉽게 제작합니다. 우측에 여러메뉴들 배치와 본문글의 내용 그리고 아래에 한쪽만 왜곡시킨 모양으로 제작합니다.
1시간 10분
책갈피 : [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 값 변경/[37:36] body > footer/[38:05] padding:20px/[38:37] 결과 확인/[38:57] 라인 주기/[40:34] header/[41:20] * body/[42:00] width/[43:32] #header header h6/[43:47] font-size, padding-top/[44:21] position:relative/[45:49] font-weight:normal/[46:33] font-family: Georgia, serif/[47:18] padding-top:20px/[48:20] a header, #header a:link/[48:48] letter-spacing:0.3em/[50:14] 둥글게 만들기/[50:31] #header, .article/[51:44] 글자 크기 변경/[53:13] color 변경/[53:47] h1 a h2/[53:53] font-size/[54:14] line-height/[54:50] letter-spacing/[55:21] border:none/[56:43] 오른쪽에 메뉴 만들기/[57:13] aside/[57:44] top/[58:49] background-color/[59:15] padding, color/[59:57] aside h4 aside ul, aside p/[01:00:53] list-style-type:none/[01:01:43] aside a, aside a:active, aside a:visited/[01:02:00] color/[01:02:24] h4 p, ul hr/[01:03:10] margin, padding/[01:04:23] border, solid/[01:05:14] clear:both/[01:05:45] .article/[01:06:57] footer/[01:07:23] background/[01:07:56] width/[01:08:22] padding:1em/[01:08:32] 결과 확인/[01:08:53] text-align:right/[01:09:48] top 값 변경/[01:10:03] padding-top
12 HTML5와 CSS3로 웹페이지를 제작합니다. Season 7
CSS3의 장점중에서 그림자효과 및 이미지 왜곡효과를 이용한 페이지 제작/배경무늬 CSS3를 이용한 효과 및 아쿠아버튼 생성/마우스 반응으로 만들어 보는 박스배너 움직임 효과
1시간 47분
책갈피 : [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] positioｎ: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/[28:53] margin:0;padding:0;border:0;/[29:03] font, text 정의/[29:49] 결과 확인/[30:50] nav/[31:28] background:-webkit-linear-gradient/[32:50] 결과 확인/[33:18] 점층적인 gradient/[34:27] position: absolute/[35:52] box-shadow: rgba/[36:39] 내용 확인/[37:10] height, left,/[37:58] position: relative/[38:27] text-align: right/[40:05] display:inline-block/[40:35] padding/[41:11] height/[41:22] line-height/[41:34] margin-left/[42:18] display: inline/[43:09] background:-webkit-linear-gradient/[44:44] 결과 확인/[45:19] -webkit-repeating-linear-gradient/[46:21] 결과 확인/[46:28] 빗살무늬 반대로 바꾸는 방법/[47:05] 빗살무늬 전체 범위/[47:51] 빗살무늬 색깔 범위/[48:32] 로고 만들기/[49:18] a:hover/[49:48] margin: 0 auto;position:relative;width:700px/[50:03] 결과 확인/[50:27] header/[51:08] title/[51:26] margin, padding/[52:05] height/[52:36] margin-top, width/[53:29] box-shadow/[54:03] background, border, solid/[55:02] display-block/[55:36] text-decoration: none/[57:08] logofoot/[57:16] text-transform: uppercase/[57:36] font-size/[57:46] padding, text-shadow/[58:23] 결과 확인/[58:34] white-space:nowrap/[59:37] aside/[01:00:01] position: absolute/[01:00:56] display: block/[01:01:30] font-style: normal, opacity/[01:03:01] opacity/[01:04:38] padding-top/[01:05:32] float: left/[01:05:47] padding-bottom, width/[01:06:57] float: left, width/[01:07:59] white-space: nowrap/[01:08:22] p.intro/[01:08:42] line-height/[01:09:35] background: rgba/[01:10:25] border:1px solid rgba/[01:10:43] display: inline-block/[01:11:09] 결과 확인/[01:12:29] gradient(linear, 0 0, 0 150, from, to/[01:13:01] 결과 확인/[01:13:09] border: 2px solid/[01:14:02] float: right/[01:14:15] width/[01:15:14] text-decoration: none/[01:15:37] #rightbox aside/[01:15:49] float: left/[01:16:40] margin-top/[01:17:05] ul 태그/[01:17:45] float: right, width/[01:18:17] #rightbox .ulfoota li/[01:18:37] display, inline/[01:18:56] ulfoota-link/[01:19:29] margin/[01:19:47] baner/[01:20:06] display: inline-block/[01:20:52] padding/[01:21:03] text-align: center, text-decoration: none/[01:21:19] width 값/[01:22:11] background-image/[01:23:41] ellipse farthest-corner/[01:24:03] transparent/[01:25:08] box-shadow/[01:25:17] inset/[01:26:32] 결과 확인/[01:26:57] letter-spacing/[01:27:22] .baner .cook/[01:29:47] display: block, font-size/[01:30:02] letter-spacing: 0/[01:30:40] text-transform: capitalize/[01:31:25] background-color/[01:32:31] 마우스 오버시 내용 바뀌도록 하는 방법/[01:33:02] float:left/[01:34:25] list-style: none/[01:34:56] background: rgba/[01:35:55] line-height/[01:37:38] -webkit-box-shadow: rgba/[01:38:47] 다른 알파값을 가진 세가지 한번에 적용하기/[01:40:09] width값 변경/[01:40:45] 마우스 오버시 빨간색으로 변하게 처리/[01:41:27] margin: 0/[01:42:32] clear: both/[01:43:10] padding/[01:43:43] #transition on a:not(alzio)/[01:44:48] #transition on a img/[01:45:43] margin-left, padding-left/[01:46:09] padding-left 값 변경/[01:46:41] a:hover img
13 CSS3 를 이용한 실용작품 만들기
content 이용 box-shadow border-radius inset 출력/transition opacity 이미지 변경/box-shadow rgba radius transition ease-out 메뉴 오버시 변형되는 버튼/opacity 겹칩효과의 배경 및 메뉴 rgba shadow radius transition-property duration 알파값의 메뉴 오버시 transition 이용한 변화/Google Web Fonts API 를이용한 무료폰트, shadow rgba transition radius 등의 여러내용을 사용하여 자바스크립트 없이도 에니효과를 낼수있는 메뉴 제작
1시간 29분
책갈피 : [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/[30:44] header/[32:10] header nav/[33:03] background: rgba/[33:30] box-shadow/[34:22] header nav ul/[35:06] header nav ul li/[35:55] display: inline-block/[36:28] border-radius/[37:02] box-shadow rgba/[38:16] border-bottom rgba/[39:05] transition-property/[39:19] transition-duration/[41:12] header nav ul li a:hover/[41:42] border-radius/[41:57] box-shadow rgba/[43:44] main/[45:00] border-bottom-left-radius/[45:49] main_a p/[45:59] text-shadow rgba/[48:11] minaver/[50:13] border-radius/[50:28] box-shadow rgba/[51:17] color rgba/[51:27] background rgba/[52:15] minaver_b/[54:19] minaver_c/[56:58] Google Web Fonts API/[59:11] body/[01:00:05] main/[01:00:20] box-shadow:0 -1px 0/[01:01:58] main .button/[01:02:17] border:7px solid rgba/[01:02:36] border-radius/[01:03:29] font-family/[01:05:10] main .button a:hover/[01:06:19] transition-property color, text-shadow/[01:06:27] transition-duration/[01:08:20] header/[01:10:25] transform: rotate/[01:11:06] maintwo_ok/[01:12:10] header h1/[01:14:17] mainloa/[01:16:14] right-radius left-radius box-shadow transition/[01:18:02] transform:scale/[01:19:22] transition: all/[01:19:40] blockquote:hover/[01:21:10] nav.main/[01:22:24] right-radius/[01:22:26] nav.main ul/[01:23:51] border-radius/[01:24:09] property: color, background/[01:25:12] duration/[01:26:26] nav.main a.selec/[01:28:04] transform:scale
<html5 api>
14 Chapter 1
캔버스를 생성/기본적인 원과 사각형의 여러 형태 제작/직선을 생성하고 굵기와 색 지정/bezier를 이용한 곡선의 기본 형태 제작/quadratic, bezier, round 메서드/선형 그레이디언트/방사형 그레이디언트/텍스트를 입력/텍스트 크기, 폰트, 색깔, 외곽선/낱말이 아닌 줄바꿈의 긴 문장 입력/도형 그림자 생성
1시간 17분
책갈피 : [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/[25:41] quadraticCurveTo()/[27:34] arc/[30:49] 하트 모양 그리기/[31:16] 종료된 지점이 새로운 시작점/[33:01] 하트 오른쪽 부분/[34:27] stroke→ fill 했을 때 현상/[35:28] 자유형태 사각형 필요/[38:21] lineCap 정의/[38:48] stroke → round 처리/[39:10] Gradient/[39:21] 도형 생성/[39:51] fillRect();/[42:05] rgb (color)/[42:57] rgba/[43:39] 겹쳐지는 부분 색/[44:51] rotate/[45:57] translate/[47:20] rotate(20*Math.PI/180)/[48:35] var 복사, 붙여넣기/[48:46] 변수선언 (grd)/[48:56] grd=ctx.createLinearGradient()/[50:10] width,height,style 조정/[50:32] grd.addColorStop()/[51:24] ctx.rect()/[51:35] ctx.fillSytle=grd/[51:57] ctx.fill()/[52:18] offset 0~1/[56:09] RadialGradient/[56:20] xStart,yStart/[56:34] radiusStart(반지름)/[56:43] xEnd,yEnd/[56:40] radiusEnd (반지름)/[56:44] grdr=ctx.createRadialGradient()/[57:11] grdr.addColorStop()/[57:29] ctx.fillStyle=grdr/[57:52] ctx.fill()/[58:51] ctx.strokeStyle=grd/[59:04] ctx.lineWidth/[59:20] ctx.stroke()/[01:01:17] Font/[01:01:37] ctx.font="bold px sans-serif"/[01:02:03] ctx.fillStyle/[01:02:21] ctx.fillText/[01:03:53] 글꼴/[01:04:17] ctx.strokeStyle/[01:04:53] ctx.textAlign="center"/[01:09:45] 그림자 역할/[01:10:11] ctx.shadowColor/[01:10:26] ctx.shadowOffsetX/[01:10:35] ctx.shadowOffsetY/[01:10:51] ctx.shadowBlur/[01:13:47] transparent/[01:16:55] Blur 효과
15 Chapter 2
clip/restore/save/mirror/scale/mousePos/canvas 그림판/input 요소/애니메이션/그래프
※ 다음 강의는 순차적으로 업데이트 진행중입니다.
'학과 샘플강의' 카테고리의 다른 글
| 실무도면제작 - 총 14시간 15분| 강의당평균 : 42분45초 (0) | 2016.08.18 |
|---|---|
| 엑셀 2016 VBA [실무] - 총 16시간 57분| 강의당평균 : 59분 49초 (0) | 2016.08.18 |
| 마스터캠x9 - 총 4시간 15분| 강의당평균 : 51분0초 (0) | 2016.08.17 |
| Revit 2016 -총 7시간 0분 | 강의당평균 : 52분 30초 (0) | 2016.08.17 |
| 오토캐드 2015 - 총 16시간 32분| 강의당평균 : 49분36초 (0) | 2016.08.17 |