웹표준 [css3 Skill Up] - 총 16시간 0분 / 강의당평균 : 48분0초

웹표준 [css3 Skill Up]

전체 : 16시간 0분 / 강의당평균 : 48분0초

01 버튼 20가지, 폼문서 기본작성

같은 링크소스를 css3 효과로 다양하게 표현하는 방법/ legend label input select 꾸미기/ li를 다이얼처럼 제작하기

35분

책갈피 : [00:00] 버튼 제작 / [00:44] 기본적인 정의 / [01:42] display: inline-block / [03:02] moz/ webkit / [03:20] box-shadow / [04:12] 결과 확인 / [04:20] border-bottom / [04:43] font-family / [05:13] position:relative; / [05:28] font-size/ margin / [05:50] button:hover/ button:active / [06:08] 결과 확인 / [06:19] shadow button / [07:13] engraved button / [07:50] glow button / [08:17] white button / [09:21] red button / [09:59] lightblue button / [11:07] olive button / [12:02] orange button / [12:19] pink button / [12:37] sea button / [12:51] rose button / [13:11] black button / [13:52] sand button / [14:06] violet button / [14:21] green button / [15:14] darkblue button / [15:32] sunset button / [15:51] choco button / [16:04] cadet button / [16:18] aqua button / [16:27] form 속성 / [17:03] registration / [17:45] registration fieldset / [19:13] registration legend / [20:05] registration label / [22:12] registration input / [24:47] registration select / [26:09] button / [28:07] sortable / [31:14] captcha_wrap / [34:11] captcha

02 이중 숨김 메뉴, 폼문서 정의, 떠있는 div, 3단배치, 12가지 메뉴

마우스 오버시 숨김메뉴출력/ input select 수정작업/ fixed를 이용한 떠있는 div/ 12개의 같은메뉴 소스에 전혀다른 효과주기

1시간 8분

책갈피 : [00:00] 간단한 메뉴 네비게이션 / [00:43] 기본적인 정의 / [01:24] ul.dropdown / [01:53] ul.dropdown li / [02:44] ul.dropdown a:hover / [03:01] ul.dropdown a:active / [03:35] ul.dropdown li a / [03:56] ul.dropdown li:last-child a / [04:20] ul.dropdown li:hover / [04:54] ul.dropdown ul / [05:57] ul.dropdown ul li a / [06:25] ul.dropdown ul ul / [06:53] ul.dropdown li:hover > ul / [07:51] form 속성 / [09:42] 기본적인 정의 확인 / [09:57] h1 / [10:30] h4 / [11:03] form.register / [11:36] form p / [12:16] fieldset.row1 / [12:57] form.register fieldset.row1 label / [13:24] form.register fieldset.row2 / [14:22] form.register fieldset.row3 / [15:06] form.register fieldset.row4 / [16:26] form.register .infobox / [17:24] form.register legend / [17:48] form.register label / [18:20] form.register label.optional/ .obinfo / [18:57] form.register input / [19:12] form.register input.long / [19:21] form.register input.short / [19:33] form.register input[type=radio] / [19:48] form.register label.gender / [20:30] form.register input[type=text] / [20:54] form.register input[type=password] / [21:05] button / [22:05] form.register input[type=text].year / [22:43] form.register input[type=checkbox] / [23:11] form.register select / [23:49] form.register select.date / [24:01] input:focus, select:focus / [24:16] p.info/ p.agreement/ p.agreement label / [24:32] clear:both / [25:28] form 속성 / [25:53] form.registration / [26:26] form.registration fieldset / [27:07] form.registration legend / [27:23] form.registration label / [28:27] form.registration input / [29:15] form.registration input:focus, form.registration select:focus / [29:31] form.registration select / [30:11] button / [31:06] 떠있는 레이어 / [31:43] header / [32:23] header h1 / [32:36] header h4 / [32:52] content / [34:14] h1, h2, h3 / [34:52] blockquote / [35:16] info / [36:59] 3단 레이어 / [37:18] body/ content / [38:06] demo / [39:35] 12가지 메뉴 / [40:44] menu1 / [44:58] menu2 / [46:59] menu3 / [48:46] menu4 / [51:07] menu5 / [53:33] menu6 / [56:06] menu7 / [58:13] menu8 / [01:00:30] menu9 / [01:02:24] menu10 / [01:04:02] menu11 / [01:05:49] menu12

03 색다른 테이블코딩, 투명 메뉴 걸치기, 떠있는 div 2가지

테이블 느낌이 아닌 그래픽효과로 코딩/ 떠있는 메뉴 및 마우스오버시 다른느낌의 작품 예제 실습하기

43분

책갈피 : [00:00] 기본 문서에 CSS3 코딩 / [01:04] content / [02:10] head / [03:57] content h1 / [04:38] content h2 / [05:44] Table / [06:08] table.table1 / [07:04] table1 thead th / [10:15] table1 thead th:empty / [12:31] tbody / [14:07] table1 tfoot td / [15:19] table1 tbody td / [16:04] table1 tbody span.check::before / [17:20] table.table2 / [18:24] table2 thead th, .table2 tfoot td / [20:00] table2 tfoot th / [20:11] table2 tfoot td / [21:01] table2 thead th:empty / [21:20] table2 thead :first-child / [22:05] table2 tbody th / [22:30] table2 tbody td / [22:55] table2 tbody span.check::before / [23:08] table.table3 / [23:32] table3 thead th / [24:04] table3 thead th:empty / [24:26] table3 thead :nth-child(2), .table3 tfoot :nth-child(2) / [25:08] table3 tfoot :nth-child(2) / [25:41] table3 thead :nth-child(2) / [26:02] table3 thead :nth-child(3), .table3 tfoot :nth-child(3) / [26:15] table3 thead :nth-child(4), .table3 tfoot :nth-child(4) / [26:34] table3 thead :nth-child(5), .table3 tfoot :nth-child(5) / [26:30] table3 thead :nth-child(5) / [27:19] table3 tfoot td / [27:35] table3 tbody td / [27:46] table3 tbody tr:nth-child(4) td / [28:22] table3 tbody td:nth-child(even) / [29:19] table3 tbody td:nth-child(odd) / [29:48] table3 tbody th / [30:20] 배너 모양, 겁쳐있는 모양 / [31:04] reference / [31:40] reference p a / [32:14] reference p a:hover / [32:22] ul.accordion / [33:02] ul.accordion li / [34:07] ul.accordion li .heading / [35:26] 떠있는 레이어 / [35:42] content / [36:08] head / [36:33] content h1 / [36:47] subline / [37:07] meta / [37:15] article p / [37:43] slidebox / [38:24] 떠 있는 내용 / [38:53] span.reference / [39:33] span.reference a / [39:46] span.reference a:hover / [40:02] content / [40:32] content h2 / [41:01] ul.friendsList / [41:22] ul.friendsList li a / [41:58] ul.friendsList li a:hover / [42:31] ul.friendsList li a > span / [42:50] ul.friendsList li a:hover > span

CSS3 Absolute

04 사각에서 별모양까지, text, box-shadow 의 모든것

기본사항을 학습한 후 네온에서 아쿠아버튼까지 CSS3로 완벽하게 그래픽 구현합니다.

43분

책갈피 : [00:00] 모양, 글자, 그림자, 박스 그림자 / [00:19] square / [00:36] circle / [00:58] oval / [01:36] up-triangle / [02:25] down-triangle / [02:48] left-triangle / [03:11] right-triangle / [03:24] triangle-topleft / [03:45] triangle-topright / [04:00] triangle-bottomleft / [04:16] triangle-bottomright / [04:25] trapezium / [04:50] diamond / [06:28] parallelogram / [06:49] twelve-point-star / [07:41] twelve-point-star:before / [08:06] twelve-point-star:after / [08:49] six-point-star / [09:21] six-point-star:after / [11:29] octagon / [12:50] speech-bubble / [13:51] egg / [14:44] pacman / [16:07] biohazard / [16:30] box-shadow / [16:41] example / [17:01] example2 / [17:30] example3 / [18:11] text-shado / [18:43] emboss3 / [20:06] emboss1 / [20:37] emboss2 / [20:58] raised / [21:36] letterpress / [22:04] offset / [22:40] neon / [24:21] subtleglow / [24:59] stroke / [26:23] stroke2 / [26:45] webkit-stroke / [27:49] three / [30:07] letterpress / [31:06] cloud9 / [32:30] embossed / [33:39] citylights / [34:35] burning / [35:42] retro / [36:27] three-d / [37:04] 글자, 요소 꾸미기 / [37:20] h2 / [37:54] container / [38:38] 테두리 점선 / [38:38] h2 / [38:55] container / [39:04] outline-offset / [39:27] shadow / [39:52] 아쿠아 버튼 / [40:01] h2 / [40:39] container

05 animation 기능의 모든것

transform/ iteration-count/ timing-function 등의 모든함수 및 벨류값을 사용하여 CSS3 의 완벽한 에니메이션을 연출합니다.

59분

책갈피 : [00:00] animation 기능 / [00:51] 소스코드 / [01:41] flip-container / [02:07] perspective / [03:04] border / [03:41] flip-container:hover / [05:13] flip-container, .front, .back / [06:16] flipper / [08:02] position: relative / [08:39] front, back / [10:02] front / [10:59] back / [12:48] front name / [15:32] back-title / [17:03] back p / [17:25] transform / [17:55] webkit-keyframes / [19:23] webkit-transform / [19:39] translate / [20:47] rotate / [22:04] shake / [22:42] name / [23:17] duration / [24:00] transform-origin / [24:34] animation-iteration-count / [25:06] animation-timing-function / [25:52] translate2 / [26:22] timings_demo / [27:30] test_box / [28:40] test_box p / [29:23] ease.test_box / [31:03] ease-in.test_box / [32:01] ease-out.test_box/ ease-in-out.test_box/ linear.test_box / [33:09] custom.test_box / [35:33] negative.test_box / [36:35] timings_demo:hover .test_box / [39:45] translate3 / [39:57] delay_demo / [40:31] dd_main / [42:02] delay_demo .center / [42:36] #dd1, #dd2, #dd3, #dd4, #dd5, #dd6, #dd7, #dd8 / [45:18] dd1 / [45:35] dd2~dd8 / [45:55] delay_demo:hover #dd_main / [46:53] delay_demo:hover #dd1~#dd8 / [48:54] translate4 / [49:05] delay_demo2 / [49:37] delay_demo2 div / [50:03] border-radius / [50:55] delay_demo2 div p / [51:23] dd_main2 / [52:21] dd_main2a / [54:09] dd_main2b / [55:21] delay_demo2:hover #dd_main2 / [56:52] property/ duration/ delay / [57:28] delay_demo2:hover #dd_main2/ main2a/ main2b

06 animation 기능의 모든것 2

rotateX Y Z/ rotate/ scale/ preserve-3d/ linear/ transition opacity/ alternate 등을 이용한 상황별 에니메이션을 연출합니다.

29분

책갈피 : [00:00] animation 기능 / [00:16] translate5 / [00:34] transDemo2 div / [02:05] transDemo2 div:hover / [04:54] translate6 / [05:30] transDemo4 / [06:15] transDemo4 div / [08:10] transDemo4:hover #rotateX / [09:08] transDemo4:hover #rotateY / [09:26] transDemo4:hover #rotateZ / [09:47] translate7 / [10:28] webkit-keyframes resize / [13:07] animationDemo #box / [14:19] animationDemo:hover #box / [16:32] translate8 / [16:37] webkit-keyframes glow / [18:38] animationDemo2 / [19:11] animationDemo2 button / [20:46] animationDemo2 button:hover / [22:40] translate9 / [22:52] cf / [23:27] cf img / [24:22] cf img.top:hover / [24:56] translate10 / [25:25] f2_container / [26:05] f2_card / [27:28] f2_container:hover #f2_card / [28:29] f3_container / [28:41] f3_card / [28:45] f3_container:hover #f3_card

07 3D animation 원근법, 6면 큐브 움직임, 버튼 위아래숨김, CSS3 뛰어난 메뉴반응

perspective/ rotateY/ translateZ/ infinite/ ease-in-out/ spinCubeWebkit/ background:hsl/ hsla/ gradient/ transition: margin ease/ last first-child/ opacity ease-in

60분

책갈피 : [00:00] 원근법 / [00:06] container / [00:51] box / [01:23] #red .box / [01:50] webkit-transform:perspective / [03:51] figure / [04:37] container figure / [05:43] #red figure / [06:53] webkit-perspective / [08:47] container / [10:00] cube / [10:35] preserve-3d / [10:47] translateZ / [12:44] cube.spinning / [15:11] cube figure / [16:24] cube .front / [17:46] cube .back~.bottom / [19:17] cube .back / [20:55] cube .right / [21:15] cube .left / [21:45] cube .top / [22:05] cube .bottom / [22:31] translate12 / [23:00] button / [23:48] button a / [25:07] background / [26:26] button a,p / [27:18] p / [30:14] button:hover .bottom / [31:20] button:hover .top / [32:35] button a:active / [34:11] button:active .bottom / [34:41] button:active .top / [35:05] 이미지 화 / [35:23] section#panel / [37:08] a / [38:40] a hover / [39:04] grad1 / [40:00] grad2~grad4 / [40:39] 버튼 오버 효과 / [40:58] btn:link / [42:31] one / [43:32] one:hover / [44:01] webkit-background-size / [44:29] two / [45:04] two:hover / [45:30] three / [45:53] three:hover / [46:26] four / [47:03] four:hover / [48:03] 마우스 오버/ 그라디언트 / [48:43] css3tutorial.menu / [50:09] css3tutorial.menu li / [51:22] css3tutorial.menu li:first-child / [51:51] css3tutorial.menu li a / [53:05] My Number/ Your Number/ Our Number / [53:53] css3tutorial.menu li a span / [57:41] css3tutorial.menu li a span.pink / [58:33] css3tutorial.menu li a span.yellow/ .blue / [59:19] css3tutorial.menu li:hover a span

08 숨김메뉴, 폼속성, 주기적으로 갱신되는 갤러리 이미지마다 다른메뉴 출력

마우스오버시 숨김 출력이 에니메이션으로 됩니다/ 폼속성 인풋클릭시 에니메이션 퍼짐컬러/ 5개의 이미지가 순환되며 해당이미지 마우스 오버시 지정배너가 출력됩니다.

50분

책갈피 : [00:00] 숨김메뉴 / [00:43] navMain / [01:30] navMain > li / [02:54] float:left / [03:11] navMain > li > a / [03:50] border-right / [04:11] float:left / [04:28] navMain > li > a:hover / [04:50] navMain .currentPage a / [05:37] navMain ul / [06:29] navMain li:hover ul / [07:21] navMain ul li a / [07:59] 에니메이션 / [08:57] h2 / [10:16] h3 / [10:42] container / [12:25] hongkiat-form .txtinput / [14:18] box-shadow / [15:40] hongkiat-form .txtinput:focus / [18:06] txtblock / [19:16] hongkiat-form textarea / [20:04] hongkiat-form textarea:focus / [21:06] hongkiat-form #aligned / [22:13] hongkiat-form #aside / [22:54] span.radiobadge / [23:13] span.radiobadge label / [23:32] select.selmenu / [24:12] buttons / [24:24] buttons #resetbtn / [26:28] background-image / [27:40] buttons #resetbtn:hover / [29:33] buttons #submitbtn / [31:52] buttons #submitbtn:hover / [32:57] clearfix / [33:53] 이미지 / [34:48] container / [35:19] slider / [36:30] mask / [37:08] slider ul / [38:00] slider li / [38:40] relative / [38:59] slider li.firstanimation / [40:43] 10초 간격으로 무한반복 / [41:06] slider .tooltip / [42:32] slider .tooltip h1 / [43:03] 다섯개의 tooltip / [44:21] progress-bar / [46:06] webkit-keyframes cycle / [48:52] webkit-keyframes fullexpand

09 본문 에니메이션, 메뉴클릭시 본문출력, 종류별 이미지 갤러리

로딩시 본문이 내려와 한번 튕기고 멈춤/ 라디오클릭시 다른내용이 서서히 보이게 하거나 튀어나오게 작업/ 작은이미지 메뉴 클릭시 실제 이미지 상황별 에니메이션 반응.

56분

책갈피 : [00:00] 에니메이션 / [00:19] html, body / [00:31] font-family / [00:36] background / [01:50] gradient / [02:30] container / [04:27] bounceInDown / [05:06] h1 / [05:32] p / [06:12] p a / [06:49] p a:hover / [07:43] input / [08:23] input[type=email] / [10:00] input[type=email]:hover / [10:19] input[type=email]:focus / [11:22] input[type=submit] / [12:32] background / [13:50] bounceInDown / [15:42] 4개의 메뉴 / [16:05] body / [16:30] tabs / [17:05] tabs input / [18:34] tabs label / [20:39] display: block / [21:40] tabs label:after / [22:37] tabs input:checked + label / [24:16] clear: both / [24:41] content / [25:36] content div / [27:06] .input.tab-selector-1~selector-4 / [27:52] z-index/ opacity / [29:01] content div p / [29:59] content-1, .content-3 / [30:54] content-2, .content-4 / [32:25] 이미지에 에니메이션 삽입 / [33:05] slider-wrapper ul/ li/ div/ img/ a / [34:04] webkit-keyframes 'load' / [35:19] slider-wrapper / [36:21] ul.s-thumbs li / [36:54] ul.s-thumbs li:last-child / [37:17] ul.s-thumbs a / [39:35] ul.s-thumbs img / [40:25] ul.s-thumbs a:hover / [41:42] ul.s-slides/ li/ a/ img / [42:20] ul.s-slides / [43:04] ul.s-slides li / [43:53] ul.s-thumbs li a:hover span / [45:13] radius/ shadow/ transition / [47:00] ul.s-thumbs li a:hover span:before / [47:57] ul.s-thumbs li:first-child a:hover span / [48:48] ul.s-thumbs li:last-child a:hover span / [49:19] slideLeft / [51:12] slideRight / [52:24] slideTop / [53:16] slideBottom / [53:49] zoomIn / [54:42] zoomOut / [55:17] rotate

10 풍선도움말 출력, 그래픽같은 버튼메뉴, 돌출버튼, 원형버튼제작 후 오버와 클릭효과주기

마우스 오버시 숨김내용이 키프레임설정대로 출력~ 사라짐/ 마우스오버시 움푹 들어가고 나오는 버튼/ 상황별 입체버튼 누르는 듯한 효과를 두가지 유형으로 강의합니다.

54분

책갈피 : [00:00] 버튼 / [00:28] wrap / [00:54] wrap button / [02:56] wrap button:hover / [03:41] wrap button:active / [04:13] wrap button span / [07:45] wrap button span .nub / [10:15] rap button span.left / [11:03] wrap button span.left .nub / [12:16] wrap button:hover span / [13:29] wrap button:hover span.left / [14:07] 돌출 버튼 / [14:39] body / [14:50] webkit-box-sizing:border-box / [15:13] h2,ul,li / [15:36] navigation / [16:13] navigation .nav_outer / [17:09] navigation ul / [18:07] navigation li / [19:09] navigation a / [20:39] navigation span / [21:38] navigation li{margin-bottom:0;} / [21:54] navigation ul{padding-right:8px;} / [22:03] navigation li{display:inline-block;vertical-align:top;width:19%;margin-right:1.25%;} / [22:23] navigation li:last-child{margin-right:0;} / [23:11] navigation li:not(.active) a / [24:25] navigation li:not(.active):hover / [24:50] navigation li:not(.active) / [25:27] 마우스 오버시 효과 / [25:54] button, .button, input[type=submit] / [27:23] button:hover, button:focus / [27:47] translate / [28:18] box-shadow / [28:41] button:active / [29:28] col / [29:47] 마우스 오버시 에니메이션 효과 / [30:23] page-wrap / [30:42] contain-lynch / [32:22] contain-lynch-bkground / [33:21] info-lynch / [35:19] info-lynch h3 / [36:44] info-lynch p / [37:40] info-lynch a.click / [38:45] border / [40:06] button / [40:59] contain-lynch:hover / [42:11] contain-lynch:hover .info-lynch / [43:16] contain-lynch:hover .info-lynch p / [43:48] contain-lynch:hover .button / [44:14] 원형 버튼 / [44:58] html / [45:17] nav / [45:32] nav li / [46:03] nav li:before / [47:42] nav a / [49:58] nav li / [50:22] nav li:before / [51:29] border-radius / [51:39] z-index: -1 / [51:58] box-shadow / [52:30] nav a:hover / [52:58] nav a:active

11 인풋 버튼 원형제작, 종류별 에니메이션 적용된 버튼 만들기

인풋버튼을 체크하면 눌린상태에서 다시 체크하면 원상태 되돌림/ 실제 클릭과 오버시 상황별로 에니메이션을 준 버튼들을 확인할 수 있습니다.

51분

책갈피 : [00:00] 인풋 버튼 / [00:26] body / [02:03] html / [02:21] wrapper / [02:58] label / [04:35] box-shadow / [05:49] label:after / [06:28] border-radius: inherit; / [06:57] box-shadow / [07:59] label:before / [08:33] border-radius: inherit; / [08:40] box-shadow / [08:58] input:checked ~ label / [10:15] icon-off:after / [10:48] border-radius / [12:10] input / [13:26] 입체 버튼 / [13:37] body / [14:07] button / [15:52] webkit-border-radius / [16:10] border-color / [16:37] background-image: -webkit-gradient / [17:17] webkit-box-shadow / [19:36] webkit-transition / [20:09] button:hover / [21:26] button:active / [22:25] border-color / [22:40] background-image: -webkit-gradient / [23:38] webkit-box-shadow / [25:23] webkit-transition / [25:48] 링크 효과 / [26:05] btn-instagram / [27:01] position: relative / [27:20] border-right / [27:55] .btn-instagram:before, .btn-instagram:after / [28:49] btn-instagram:before / [30:48] btn-instagram:after / [33:45] btn-instagram:hover / [34:15] btn-instagram:hover:before / [35:04] btn-instagram:hover:after / [35:41] btn-instagram:active / [36:05] 마우스 오버시 로딩바 / [37:09] pb / [39:51] progress / [42:57] done:active / [43:41] done / [44:44] pb:hover #progress / [46:11] 버튼 / [46:27] body / [46:40] button / [47:03] button a / [48:37] button a:active / [49:31] button:after

CSS3 웹사이트 분석 (현직 실무자s 요청강의)

12 웹사이트 분석 실무페이지 유형1

상단메뉴 및 메인메뉴 등의 오버시출력반응. 마우스오버시 메뉴가 위아래 이동되며, 숨겨있던 서브트리 출력, 서브트리 에 또 서브트리또한 제어 합니다.

38분

책갈피 : [00:00] 고객요청사이트 분석 / [01:00] * {} / [02:50] body / [03:25] font-weight: lighter / [04:14] container / [05:27] left / [06:38] right / [06:59] clearfloat / [07:41] last / [08:12] header img:hover / [08:47] tab_nav ul li / [09:46] tab_nav ul a / [10:39] background / [14:06] filter / [15:49] padding/ margin / [16:25] color/ text-shadow / [16:39] transition / [17:43] tab_nav ul a:hover / [18:17] mainNav, .mainNav ul / [19:53] mainNav a / [20:34] mainNav a:hover / [20:48] mainNav li / [21:36] mainNav li.last / [21:59] mainNav li:hover / [22:26] mainNav li ul / [23:46] ul class="level2" / [24:47] mainNav li ul.level2 li / [25:20] mainNav li ul.level2 li a / [25:35] mainNav li ul.level2 li a:hover / [26:23] mainNav li:hover ul / [27:38] mainNav li ul ul / [28:18] mainNav li ul ul li / [29:04] ul class="level3" / [29:17] mainNav li ul.level2 ul.level3 li a:hover / [30:20] mainNav li:hover ul ul / [30:44] mainNav li li:hover ul / [31:30] sub_feature_ad / [32:17] middle_sub_feature_ad / [33:05] footer / [33:26] footer a / [33:42] naked_list / [34:00] ul.footer_nav / [35:06] ul.footer_nav a / [35:37] ul.footer_nav a:hover / [35:47] ul.footer_nav li / [36:08] p#copyright / [36:39] .cf:before, .cf:after / [37:26] cf:after

13 웹사이트 분석 실무페이지 유형2

배경이미지 중첩된 페이지 와 메뉴 오버시 서브출력 하단의 또다른 스타일 의 느낌, 일반적인 페이지 이지만 배경을 기본으로 하고 메뉴배경 하단의 배경으로 색다른 연출을 하게 됩니다. 배경이미지 만 가지고도 버튼으로 만들고 오버시 배경만으로 도 효과를 느낄수 있습니다.

45분

책갈피 : [00:00] 고객요청사이트 분석 / [01:08] * {} / [01:37] body / [02:28] ul / [02:43] a, a:visited/ a:hover / [03:07] header_bg / [04:00] container / [04:43] header nav / [05:40] ul.globalMenu.mainNav / [06:38] navigationTopFlyout .mainNav / [07:19] navigationTopFlyout #navigation / [08:38] navigation a:hover / [09:05] navigationTopFlyout / [09:33] navigationTopFlyout .mainNav li a / [10:56] li:hover ul.level2/ li:focus ul.level2/ li.sfhover ul.level2 / [11:30] box-shadow / [12:13] navigationTopFlyout .mainNav li ul.level2 li / [12:36] navigationTopFlyout .mainNav li ul.level2 li a / [13:21] navigationTopFlyout .mainNav li ul.level2 li a:hover / [13:51] header img / [14:17] navigation ul.globalMenu.mainNav li / [14:58] navigationTopFlyout .mainNav li / [15:25] navigationTopFlyout .mainNav li ul.level2 / [17:22] navigationTopFlyout .mainNav li / [18:06] cf 정의 / [18:48] .cf:before, .cf:after / [19:55] navigation ul.globalMenu.mainNav li.hasChildren:last-child / [20:49] h1 / [21:26] content_wrapper / [22:33] content / [23:37] content h2 / [23:58] content p / [24:16] content p img / [24:38] content h3 / [25:04] sidebar / [26:05] blog_ad / [27:23] blog_ad h3 / [28:04] sidebar_content / [28:55] sidebar_content h2 / [30:07] facebook_sidebar_button / [31:35] facebook_sidebar_button:hover / [32:03] twitter_sidebar_button / [32:10] twitter_sidebar_button:hover / [32:17] youtube_sidebar_button / [32:24] youtube_sidebar_button:hover / [32:45] pre_footer_bg / [34:42] pre_footer h2 / [35:09] pre_footer_links / [35:49] pre_footer_links li / [36:24] pre_footer_links li a / [37:03] pf_support_button / [38:02] pf_support_button:hover / [38:19] pf_help_button / [38:27] pf_help_button:hover / [38:44] footer / [38:56] footer a / [39:05] footer_site_map / [40:09] footer_site_map ul.globalMenu / [40:45] footer_site_map ul.globalMenu li.hasChildren / [42:16] footer_site_map ul.globalMenu li.hasChildren ul.level2 / [42:50] footer_site_map ul.globalMenu li.hasChildren ul.level2 li / [43:39] footer_contact_info / [44:00] footer_contact_info a /

14 웹사이트 분석 실무페이지 유형3

한페이지 에 여러메뉴 와 이미지 포지션으로 오버효과 를 학습할수 있습니다. 스크롤이 되어도, 고정된 상단메뉴 와 페이지 본문배경이미지 및 하단 배경이미지 마우스 오버시 숨겨진 목록들의 출력방식 을 학습하실수 있습니다.

1시간 5분

책갈피 : [00:00] 스크롤 되어도 고정된 메뉴 / [00:39] class="cf" / [01:00] search bar / [01:09] * {} / [02:13] body / [02:46] a, a:visited/ a:hover/ a:active, a:focus / [03:13] access_banner_bg / [04:19] access_banner / [05:03] .cf:before, .cf:after / [05:14] .cf:after / [05:25] search_area / [06:25] search / [06:52] search label / [07:26] search input.searchInput / [08:59] search input.searchButton / [10:20] mylinks_tab / [14:52] mylinks_tab li a / [15:26] mylinks_tab:hover / [16:05] p, ul, ol, dl, blockquote / [16:37] top: -8.1em / [17:05] top 변경 / [17:47] header_bg / [18:52] header_content / [19:45] families_tab / [20:32] prospective_tab / [23:31] prospective_tab:hover / [24:54] prospective_tab a / [25:23] li.tab_name / [26:55] current_tab / [28:41] current_tab a / [29:05] current_tab:hover / [29:29] main_nav_bar / [30:32] header_content h1 / [32:13] h1, h2, h3, h4, h5, h6 / [32:34] ul.mainNav / [33:38] ul.mainNav a / [33:56] ul.mainNav li / [34:39] ul.mainNav li:first-child / [35:28] ul.mainNav li:last-child / [35:51] ul.mainNav li a / [36:05] ul.mainNav li ul.level2 / [37:32] ul.mainNav li ul.level2 li / [37:58] ul.mainNav li ul.level2 li a / [38:17] ul.mainNav li ul.level2 li a:hover / [38:45] ul.mainNav li:hover ul.level2 / [39:24] gray_bg_divide / [40:26] inner_content_wrap / [41:48] inner_sidebar / [42:19] floatright / [42:54] a#inner_meet_our_students / [46:11] a#inner_meet_our_students:hover / [46:51] inner_subnav / [47:34] inner_subnav ul li a / [47:55] inner_subnav ul li a:hover / [48:04] inner_subnav ul.globalRootMenu / [48:36] inner_subnav ul.globalRootMenu li / [48:57] inner_subnav ul.globalRootMenu li.selectedPageRoot / [49:57] inner_subnav ul.globalRootMenu li.selectedPageRoot a:hover / [50:32] link_box / [51:25] link_box ul / [51:46] link_box a / [52:08] giving_links a / [53:08] sidebar_news_links a / [54:20] a#events_sidebar_link / [54:54] a#events_sidebar_link:hover / [55:19] a#newsworthy_sidebar_link / [55:31] a#newsworthy_sidebar_link:hover / [55:42] a#athletics_sidebar_link/ a#athletics_sidebar_link:hover / [57:14] sidebar_social_links a / [57:59] a#sidebar_facebook_button/ a#sidebar_twitter_button / [58:35] inner_content / [59:02] inner_content h1/ h2/ h3 / [59:24] floatleft / [01:00:00] inner_top_pic / [01:00:46] h1/ h2/ h3/ h4 / [01:01:27] inner_content p/ ul li / [01:01:38] footer / [01:02:10] footer_bg / [01:02:45] footer_content / [01:03:09] footer_nav / [01:03:12] footer_nav ul / [01:03:32] footer_contact / [01:03:47] footer_contact ul li / [01:04:06] footer_contact ul li a / [01:04:21] 완성 모습 확인

15 웹사이트 분석 실무페이지 유형4

해상도마다 적용되는 넓이값이지만 본문의 내용은 고정적인 값을 유지합니다. 기본적인 서브페이지 이지만 서브의 기본메뉴는 외국이다보니 우측에 고정되며 메뉴하나를 제작해도 CSS3를 적극 반영한 그라디언트 효과를 정의합니다.

44분

책갈피 : [00:00] two-column / [00:34] * {} / [00:52] body / [02:05] a img/ ol, ul / [02:42] a/ a:hover / [03:12] utility / [04:05] width / [04:48] utility ul / [06:06] utility ul li / [06:23] utility ul a / [07:08] search / [08:24] search label / [08:43] search .searchInput / [09:46] search .searchButton / [11:07] header / [11:38] main-nav / [14:22] main-nav li / [16:24] main-nav li:last-child / [16:52] main-nav a / [18:20] main-nav li.selectedPage a / [19:17] main-nav .apply / [20:01] main-nav .apply a / [21:45] main-nav .apply a:hover / [22:30] logo / [23:33] featured-container / [24:07] featured-image / [25:06] featured-image img / [25:35] clear / [27:04] max-width / [28:21] content-container / [29:24] main-content / [30:00] sub-content / [30:28] .main-content,.sub-content,.extra-conten / [31:11] contents / [31:35] contents p / [31:55] contents img / [32:09] contents a / [32:24] h1, h2, h3, h4, h5, h6 / [32:55] h1 / [33:13] h1.green-title / [35:37] h2, h3, h4, h5, h6 / [36:01] contents ul / [37:33] contents ul li / [37:49] sec-nav a / [38:20] sec-nav a:hover / [38:33] copyright / [39:20] copyright a.suggestion-box / [40:25] copyright a.suggestion-box:hover / [40:38] social-media / [41:20] social-media li / [41:49] social-media a / [42:38] social-media li.facebook a / [43:10] social-media li.twitter a / [43:22] social-media a:hover

16 웹사이트 분석 실무페이지 유형5

배경이미지, 상단메뉴 고정, 투명한 이미지로 중복 겹침효과. 상단의 배경은 고정되며, 해당메뉴들 오버시에도 에니메이션 효과를 줄수있습니다. 이미지 위에 또다른 이미지 배경들을 중첩으로 고정시켜서 웹사이트 를 감각있게 제작할수있는 방법.

47분

책갈피 : [00:00] * {} / [01:04] body / [04:31] fixedHeader #bodyWrapper / [05:10] cursor:pointer/ a,a:active,a:link / [06:21] a:focus, a:hover / [07:05] ol,ul / [07:18] bodyWrapper / [07:37] mainHeaderWrapper / [09:36] min-width / [10:03] mainHeader / [10:47] footer,header,hgroup,menu,nav,section / [11:33] mainHeader .siteContainer / [12:03] siteContainer / [13:11] box-sizing:border-box / [15:24] padding / [15:35] logo / [16:28] floatLeft / [18:16] h1,h2,h3,h4,h5,h6 / [18:45] logo a / [19:51] logo a:hover / [20:09] mainNavigationWrapper / [21:07] mainNavigation / [22:00] mainNavigation li / [22:39] .mainNavigation li a, .mainNavigation li a:link, .mainNavigation li a:visited / [24:14] .mainNavigation li a:hover, .mainNavigation li a:focus / [24:49] homeFeatures section / [27:27] homeFeatures section.threeCol .element / [27:55] homeFeatures h2 / [29:03] homeFeatures p / [29:22] homeFeatures p.more / [29:53] featureWrapper / [31:03] fatFooter .footerBox / [33:38] fatFooter .footerBox h2.postTitle / [35:05] fatFooter .footerBox h3 / [35:38] mainFooterWrapper / [37:30] h3 / [38:16] blogList li / [39:36] footerContact.footerBox / [40:35] footerContact li / [40:49] floatRight / [41:32] .clearFix:before, .clearFix:after, .clearFix:after / [42:54] footerNavigation / [44:33] footerNavigation li / [45:41] .footerNavigation li a, .footerNavigation li a:link, .footerNavigation li a:visited, .footerNavigation li a:active / [46:03] .footerNavigation li a:focus, .footerNavigation li a:hover

17 웹사이트 분석 실무페이지 유형6

마우스 오버시 좀더 색다른 메뉴출력을 간단한방법으로 다양하게 합니다. 배경이 한번만 들어가는게 아니라 3번 4번 까지의 중첩이미지 효과 를 확인할 수있습니다.

56분

책갈피 : [00:00] link / [00:53] html, body / [02:27] a, img / [02:37] a / [02:45] a:hover / [02:54] p / [03:21] h1 / [04:04] thick / [05:38] ul li / [06:20] bodyInside / [07:37] background / [10:01] wrapper / [11:23] wrapMain / [12:00] #header #logo / [12:35] #header #contactTop / [13:35] phonenumber / [13:55] phonenumberbold / [14:34] buttonText a / [16:14] buttonText a:hover / [16:51] #header #navBox / [18:21] navigation / [18:43] navigation .mainNav / [18:57] navigation .mainNav li / [20:07] navigation .mainNav li a / [20:47] navigation .mainNav li:hover a / [21:13] navigation .mainNav li.selectedPage a / [22:42] navigation .mainNav .level2 / [23:42] navigation .mainNav .level2 li / [24:12] navigation .mainNav .level2 li a / [25:21] navigation .mainNav .level2 li a:hover / [25:31] navigation .mainNav li:hover ul.level2 / [26:12] feature / [28:01] featureText / [29:16] imageLinks / [30:45] buttonA / [31:30] buttonB/ buttonC/ buttonD / [32:43] a_rollover_img / [33:35] a_rollover_img:hover / [34:44] a_rollover_img a / [35:35] a_rollover_img a:hover / [35:56] a_rollover_img a:on-click / [36:20] a_rollover_img a span / [36:37] a_rollover_img a:hover span / [36:57] d_rollover_img / [37:28] c_rollover_img / [38:11] featureVariableHome / [39:24] twitter_div / [39:53] twitter_div ul, #twitter_div li / [40:33] contentLeft / [41:32] intro / [42:46] contentRight / [43:12] pushFooter / [43:50] footer / [45:11] footerTop / [46:20] footerLeft / [47:27] opiraFooterLogo / [47:42] footerLinkBox / [48:44] footerLinkBox a / [49:19] footerLinkBox a:hover / [49:31] footerLinksA / [50:10] footerLinksB / [50:59] footerRight / [52:06] search / [52:30] search label / [52:53] search input.searchInput / [54:00] search input.searchButton / [55:58] search input.searchButton:hover

18 웹사이트 분석 실무페이지 유형7

페이지 상, 하단 내부그림자 효과 상단메뉴 오버시 숨김 ul출력후 해당li마다 마우스 오버시 배경이미지 출력

51분

책갈피 : [00:00] html / [01:12] body / [01:35] a / [01:40] blockquote, q / [01:55] ol, ul / [02:10] input / [02:27] h2/ h3 / [02:53] p / [03:10] strong / [03:25] top-header input.searchButton / [03:59] top-header / [06:21] wrapper / [07:06] .wrapper .center / [07:29] logo / [08:47] logo h1 / [09:21] h1 / [10:47] logo a / [11:21] top-nav / [12:19] top-nav li / [13:03] top-nav li > a / [13:25] top-nav > li:hover > a / [13:40] top-nav li a / [14:11] top-nav li:hover ul / [14:29] top-nav li a / [15:36] top-nav ul / [17:13] top-nav ul li:hover a / [18:00] top-nav ul li / [19:03] top-nav ul li a / [19:42] top-nav li.selectedPage a.selectedPage / [20:31] top-header .search-wrapper / [21:57] top-header .search label / [22:44] top-header input / [23:33] body-canvas / [24:33] .home .container / [25:26] container / [26:03] new-home-slides / [27:07] slide-content / [28:35] .slide-content .text-holde / [29:02] .slide-content .text-holder h2 / [29:28] slide-content p / [29:56] container a / [30:17] column-wrapper / [31:04] home-column / [31:26] .home .left-widget / [32:18] widget-header / [34:05] widget-header h3 / [36:00] .home .widget-content / [36:52] widget-content / [38:04] widget-content img / [38:35] .home .widget-bottom / [38:49] widget-bottom / [39:47] home-column.end / [40:29] clear-me / [41:04] footer / [42:12] footer .content / [42:56] footer .column / [44:06] footer p / [44:15] footer-column / [45:09] footer h3 / [45:53] social li / [46:12] social li img / [46:38] social li a / [47:09] footer-column a / [47:28] footer-column.end / [47:53] footer .column.right / [48:21] important-links li / [48:53] important-links a / [49:23] made-by / [50:09] widget-content.blog-feed

19 웹사이트 분석 실무페이지 유형8

로고가 본문과 걸쳐지고 상단 메뉴는 이미지 배경값으로 처리됩니다, 특히 우메뉴는 처음과 마지막 li처리시 라운드 효과를 오버시까지 동일하게 반영되도록 child 로 정의합니다.

28분

책갈피 : [00:00] html / [00:50] body / [01:31] headerWrapper / [02:21] header / [03:06] logo / [04:04] a/ a:hover/ a img/ a:active / [04:19] h1, h2, h3, h4, h5, h6, p, ul, li / [04:43] h1 / [04:56] nav ul / [05:12] navWrapper / [05:46] header nav ul / [06:32] header nav ul li / [07:17] header nav ul li a / [08:34] header nav ul li a em / [10:21] header nav ul li a:hover / [10:49] headerWrapper / [11:09] bodyWrapper / [11:55] body / [12:48] subColumn / [13:26] subColumn ul.subNav / [14:28] subColumn ul.subNav li / [15:22] subColumn ul.subNav li:last-child / [16:19] subColumn ul.subNav li a / [16:56] subColumn ul.subNav li a:hover / [18:21] subColumn ul.subNav li:first-child a / [18:47] subColumn ul.subNav li:last-child a / [19:28] mainColumn / [19:54] #mainColumn p, #subColumn p / [20:41] mainColumn a / [20:52] mainColumn ul / [20:57] #mainColumn h2, #mainColumn h3, #mainColumn h4 / [21:11] mainColumn .element / [22:04] footerWrapper / [23:11] footer / [24:14] footer #footerRight / [24:33] footer #footerLeft / [24:57] footer #footerLeft ul / [25:51] footer #footerLeft ul li / [26:21] footer #footerLeft ul li:first-child / [26:46] footer #footerLeft ul.footerNav li / [27:10] footer #footerLeft ul.footerNav li a / [27:26] footer #footerLeft ul.footerNav li a:hover / [27:50] ul.outbox li a/ ul.outbox li a:hover

20 웹사이트 분석 실무페이지 유형9

배경은 고정값의 이미지 가 있고 그 위에 메뉴배경 및 풍선도움말 같은 배경을 중첩합니다. 또한 메뉴도 좀더 효과 적인 처리방식을 선택하여 고급스런 느낌을 주며 실수할수있는 내용을 점검합니다.

38분

책갈피 : [00:00] body / [00:27] 기본적인 정의 / [02:10] body / [03:35] h3,h4,h5,h6 / [03:51] h1,h2 / [03:58] a / [04:06] a:hover / [04:15] fieldset,img / [04:20] ol,ul / [04:29] p,fieldset,table / [04:55] container / [05:19] header / [05:50] logo / [06:34] logo a / [07:10] nav / [08:34] nav ul / [08:56] nav ul li / [09:27] nav ul li a / [11:18] nav ul li a:hover / [11:38] nav ul li a.selectedPageRoot / [12:58] nav ul li a.active:hover / [13:23] social / [14:14] latest-tweet / [15:08] witter-name / [16:06] a.twitter-link / [16:35] a.twitter-link, a.facebook-link / [17:01] a.facebook-link / [18:00] main-aside / [18:57] subnav / [19:21] subnav li / [19:29] subnav li a / [19:34] subnav li a:hover / [19:55] subnav>li>a / [22:02] subnav li ul / [22:34] subnav li ul li a / [23:25] subnav li ul li a.selectedPage / [24:12] subnav li ul li:last-child a / [25:00] subnav li ul li:first-child a / [25:24] main-aside .search / [26:43] search / [27:17] .search .searchInput / [28:43] .search .searchButton / [30:01] blockquote / [31:14] content / [32:01] content .breadcrumbing / [32:58] content h1 / [33:46] content blockquote / [35:20] footer / [36:00] footer p.copy/ footer p.byline / [37:18] main-aside width

샘플확인 : 알지오 검색후 -> 강의검색란 -> 웹표준 [css3 Skill Up]