IT전문교육 의 리더!

로그인 회원가입
HOME>IT전문가>핵심 웹표준퍼블리셔>웹표준 [css3 Skill Up]

웹표준 [css3 Skill Up]

20회차 속성과정
전체 : 16시간 0분|회차당 평균 : 48분0초

이용기간 2개월

전문강사 : 채명수

320,000195,000





웹표준 [css3 Skill Up] 사용법 강좌
CSS3의 구성요소를 종류별로 모두 다루고 있습니다.
  • CSS3 들어가기
  • 01.35분 버튼 20가지, 폼문서

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

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

  • 02.1시간 8분 12가지 메뉴

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

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

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

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

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

  • CSS3 Absolute
  • 04.43분 사각에서 별모양까지, box-shadow 의 모든것

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

    책갈피 : [00:00] 모양, 글자, 그림자, 박스 그림자/[00:19] square/[00:25] 꿀팁/[00:36] circle/[00:39] 꿀팁/[00:58] oval/[01:04] 꿀팁/[01:36] up-triangle/[01:39] 꿀팁/[01:54] 꿀팁/[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/[04:53] 꿀팁/[05:22] 꿀팁/[05:28] 꿀팁/[05:47] 꿀팁/[06:28] parallelogram/[06:30] 꿀팁/[06:49] twelve-point-star/[07:18] 꿀팁/[07:24] 꿀팁/[07:41] twelve-point-star:before/[08:26] 꿀팁/[08:06] twelve-point-star:after/[08:49] six-point-star/[09:21] six-point-star:after/[10:25] 꿀팁/[10:31] 꿀팁/[11:29] octagon/[11:38] 꿀팁/[12:50] speech-bubble/[12:53] 꿀팁/[13:51] egg/[13:58] 꿀팁/[14:44] pacman/[15:21] 꿀팁/[16:07] biohazard/[16:17] 꿀팁/[16:30] box-shadow/[16:41] example/[16:45] 꿀팁/[17:01] example2/[17:03] 꿀팁/[17:30] example3/[18:11] text-shado/[18:43] emboss3/[19:03] 꿀팁/[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/[26:49] 꿀팁/[27:49] three/[30:07] letterpress/[30:34] 꿀팁/[31:06] cloud9/[32:30] embossed/[32:56] 꿀팁/[33:39] citylights/[34:28] 꿀팁/[34:35] burning/[35:42] retro/[36:27] three-d/[37:04] 글자, 요소 꾸미기/[37:20] h2/[37:31] 꿀팁/[37:35] 꿀팁/[37:40] 꿀팁/[37:54] container/[37:59] 꿀팁/[38:01] 꿀팁/[38:09] 꿀팁/[38:38] 테두리 점선/[38:38] h2/[38:55] container/[39:04] outline-offset/[39:05] 꿀팁/[39:27] shadow/[39:52] 아쿠아 버튼/[40:01] h2/[40:11] 꿀팁/[40:39] container/[41:17] 꿀팁/[41:34] 꿀팁

  • 05.59분 animation 기능의 모든것

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

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

  • 06.29분 animation 기능의 모든것 2

    rotateX Y Z, rotate, scale, preserve-3d, linear, transition opacity, alternate 등 상황별 애니메이션 연출

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

  • 07.60분 3D Animation 큐브, CSS3 뛰어난 메뉴반응

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

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

  • 08.50분 주기적으로 갱신되는 갤러리, 이미지마다 다른메뉴 출력

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

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

  • 09.56분 종류별 이미지 갤러리

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

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

  • 10.54분 풍선도움말, 그래픽같은 버튼메뉴

    마우스 오버시 숨김 내용이 키프레임 설정대로 출력되고 사라짐, 마우스 오버시 움푹 들어가고 나오는 버튼, 상황별 입체버튼 누르는 듯한 두가지 효과

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

  • 11.51분 종류별 애니메이션 적용된 버튼 만들기

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

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

  • CSS3 웹사이트 분석 (현직 실무자s 요청강의)
  • 12.38분 웹사이트 분석 실무 페이지 유형 1

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

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

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

    배경이미지 중첩된 페이지와 메뉴 오버시 서브출력 하단의 또다른 스타일, 일반적인 페이지이지만 배경을 기본으로 하고 메뉴배경 하단의 배경으로 색다른 연출, 배경이미지만 가지고 버튼으로 만들고 오버시 배경만으로 효과

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

  • 14.1시간 5분 웹사이트 분석 실무 페이지 유형 3

    한페이지에 여러 메뉴와 이미지 포지션으로 오버효과, 스크롤이 되어도, 고정된 상단메뉴와 페이지 본문배경 이미지 및 하단 배경이미지 마우스 오버시 숨겨진 목록 출력방식

    책갈피 : [00:00] 스크롤 되어도 고정된 메뉴/[00:39] class="cf"/[01:00] search bar/[01:09] * {}/[01:50] 꿀팁/[01:55] 꿀팁/[02:13] body/[02:46] a, a:visited, a:hover, a:active, a:focus/[03:00] 꿀팁/[03:13] access_banner_bg/[04:19] access_banner/[05:03] .cf:before, .cf:after/[05:14] .cf:after/[05:17] 꿀팁/[05:25] search_area/[05:45] 꿀팁/[06:08] 꿀팁/[06:25] search/[06:52] search label/[07:11] 꿀팁/[07:26] searchInput/[08:59] searchButton/[09:33] 꿀팁/[10:20] mylinks_tab/[10:50] 꿀팁/[11:55] 꿀팁/[13:27] 꿀팁/[14:04] 꿀팁/[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:17] 꿀팁/[18:31] 꿀팁/[18:52] header_content/[19:45] families_tab/[20:05] 꿀팁/[20:32] prospective_tab/[23:16] 꿀팁/[23:31] prospective_tab:hover/[23:49] 꿀팁/[24:54] prospective_tab a/[25:23] li.tab_name/[26:55] current_tab/[28:20] 꿀팁/[28:41] current_tab a/[29:05] current_tab:hover/[29:29] main_nav_bar/[30:03] 꿀팁/[30:32] header_content h1/[32:13] h1, h2, h3, h4, h5, h6/[32:34] ul.mainNav/[33:38] ul.mainNav a/[33:47] 꿀팁/[33:56] ul.mainNav li/[34:39] ul.mainNav li:first-child/[35:10] 꿀팁/[35:28] ul.mainNav li:last-child/[35:38] 꿀팁/[35:51] ul.mainNav li a/[36:05] ul.level2/[37:32] ul.level2 li/[37:58] ul.level2 li a/[38:17] ul.level2 li a:hover/[38:45] ul.mainNav/[39:24] gray_bg_divide/[40:26] inner_content_wrap/[40:47] 꿀팁/[41:48] inner_sidebar/[42:19] floatright/[42:36] 꿀팁/[42:54] a#inner_meet_our_students/[43:43] 꿀팁/[43:48] 꿀팁/[44:37] 꿀팁/[45:14] 꿀팁/[46:11] hover/[46:51] inner_subnav/[47:34] ul li a/[47:55] ul li a:hover/[48:04] ul.globalRootMenu/[48:36] ul.globalRootMenu li/[49:38] 꿀팁/[48:57] selectedPageRoot/[49:57] 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/[53:40] 꿀팁/[54:20] a#events_sidebar_link/[54:54] :hover/[55:19] a#newsworthy/[55:31] hover/[55:42] #athletics_sidebar_link/[57:14] sidebar_social_links a/[57:59] a#sidebar_twitter_button/[58:35] inner_content/[59:02] inner_content h1, h2, h3/[59:24] floatleft/[59:47] 꿀팁/[01:00:00] inner_top_pic/[01:00:14] 꿀팁/[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:23] 꿀팁/[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.44분 웹사이트 분석 실무 페이지 유형 4

    해상도마다 적용되는 고정적인 값을 유지

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

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

    배경이미지, 상단메뉴 고정, 투명한 이미지로 중복 겹침효과, 메뉴 마우스 오버시 애니메이션 효과, 이미지 중첩

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

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

    마우스 오버시 색다른 메뉴 출력 방법, 배경 중첩 이미지 효과

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

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

    내부 그림자 효과, 마우스 오버시 숨김 및 출력 종류, 마우스 오버시 배경 이미지 출력

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

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

    로고 본문 이미지 배경값으로 처리, 메뉴 라운드 효과

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

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

    풍선도움말 같은 배경 중첩, 메뉴의 효과적인 처리방식

    책갈피 : [00:00] body/[00:27] 기본적인 정의/[00:45] 꿀팁/[01:34] 꿀팁/[02:10] body/[02:33] 꿀팁/[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:38] 꿀팁/[05:50] logo/[05:57] 꿀팁/[06:12] 꿀팁/[06:34] logo a/[07:10] nav/[07:27] 꿀팁/[07:34] 꿀팁/[08:06] 꿀팁/[08:34] nav ul/[08:44] 꿀팁/[08:56] nav ul li/[09:27] nav ul li a/[09:41] 꿀팁/[11:18] a:hover/[11:38] a.selectedPageRoot/[12:58] a.active:hover/[13:23] social/[14:14] latest-tweet/[14:25] 꿀팁/[14:32] 꿀팁/[15:08] witter-name/[16:06] a.twitter-link/[17:01] a.facebook-link/[18:00] main-aside/[18:18] 꿀팁/[18:57] subnav/[19:21] subnav li/[19:26] 꿀팁/[19:29] subnav li a/[19:33] 꿀팁/[19:34] subnav li a:hover/[19:55] subnav>li>a/[20:36] 꿀팁/[22:02] subnav li ul/[22:21] 꿀팁/[22:34] li a/[23:25] li a.selectedPage/[24:12] li:last-child a/[24:41] 꿀팁/[25:00] li:first-child a/[25:10] 꿀팁/[25:24] main-aside .search/[26:43] search/[27:17] searchInput/[28:06] 꿀팁/[28:43] searchButton/[30:01] blockquote/[30:33] 꿀팁/[31:14] content/[31:38] 꿀팁/[32:01] breadcrumbing/[32:58] h1/[33:46] blockquote/[34:10] 꿀팁/[35:27] 꿀팁/[36:00] footer p.copy/ footer p.byline/[37:18] main-aside width





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