모바일UI 실무 [css3] 전체 15시간 57분 강의당평균 47분51초

모바일UI 실무 [css3]

전체 : 15시간 57분 / 강의당평균 : 47분51초

01 모바일 웹제작의 기본, body, header 코딩

강의진행방식설명/!doctype html 문서선언/html lang=

35분

책갈피 : [00:00] 강의진행방식 / [02:26] 작업시 유의사항 / [03:51] 기본 숙지 사항 / [05:46] 제공 소스 / [11:25] ANSI를 UTF-8로 변경 / [11:38] utf-8 / [12:37] !doctype html 문서 버전 선언 / [13:18] html lang="ko" 언어 선언과 속성 / [14:16] meta charset="utf-8" 선언 / [14:22] charset / [14:33] 모바일 제작시 기본사항 선언 / [16:33] css @charset="utf-8" 선언 / [16:58] css body~select 까지 margin, padding 선언 / [17:40] -webkit-text-size-adjust:none / [20:02] body 선언 / [20:24] position / [22:53] display:block 과 display:inline의 차이 / [23:19] inherit 정의 / [25:09] Helvetica / [26:59] fieldset 정의 / [27:35] ul, ol, dl / [27:50] em, address / [29:28] hr / [29:32] !important 정의 / [32:39] visibility:hidden / [35:11] overflow:hidden

02 로고 & 검색바 & 메뉴 셋팅

로고와 검색바, 검색버튼, 메뉴버튼들의 위치를 설정하고, 세부적인 색상과 그림자를 셋팅하는 실습을 진행합니다.

39분

책갈피 : [00:38] logoimg / [00:51] float / [01:46] .logoimgbx / [03;17] .logoimgbxigm / [03:57] 검색바 만들기 search_a / [05:51] webkit-box-shadow / [07:30] .search_a .search_b / [10:20] .search_a .search_c / [11:56] webkit-border-radius / [12:22] webkit-appearance:none / [14:02] .search_button / [15:44] repeat, background:url / [16:27] white-space:nowrap / [19:03] .top_navtab / [19:14] display:table / [19:55] clear:both / [20:41] background:-webkit-gradient(linear / [23:04] ul,li 태그 / [23:25] .top_navtab_a / [23:45] display:table-cell / [25:39] vertical-align:top; / [26:19] .top_navtab_on.top_navtab_c / [28:46] .top_navtab_on / [30:46] .top_navtab / [32:20] .top_navtab_c / [35:43] .top_navtab_on .top_navtab_c / [36:14] margin

03 상속관계 & select button 세팅

select button을 만들고 border-radius태그를 사용한 세부적인 세팅 방법과 개체의 정렬에 대해 학습합니다.

50분

책갈피 : [01:48] 셀렉트 만들기 / [01:53] hr / [03:18] #lec_in / [03:40] clear:both / [06:13] .lec_intitle / [08:17] .lec_intitle select / [09:40] margin-right:3px / [10:23] .lec_intitle select.ab / [15:18] #yes_lec_in / [15:41] .yes_lec_intitle / [16:23] .yes_lec_intitle select / [17:39] border-radius / [22:39] gradient(linear) / [25:47] 상속관계 / [25:54] body의 직접적용 / [27:18] header의 직접적용 / [28:10] body.fon 상속 / [28:35] .header 직접적용 / [29:15] body.fon 상속 / [30:23] .logoimg 직접적용 / [31:14] body.fon 상속 / [31:51] .logoimgbx / [35:58] .search_a / [38:52] .search_b / [39:54] .search_c / [42:01] .search_button / [45:28] ul, ol, dl / [46:02] .top_navtab_a / [46:51] hr / [47:35] .yes_lec_in / [48:27] .yes_lec_intitle / [48:53] select

04 div에 tong 코딩

tong안에 menuline & newslist 을 만들어서 아웃라인을 잡아주고, 메뉴틀을 만들어서 요소들을 세팅하고 div로 마무리하는 내용을 학습합니다.

49분

책갈피 : [03:15] div 코딩 / [04:19] div에 tong / [05:13] tong 묶음 / [08:25] border-bottom / [11:38] .min_menuline / [16:17] .min_menuline_a / [16:31] float:left / [18:00] .min_menuline_abc / [22:51] .min_menuline_abc_on / [23:50] .min_menuline_b / [24:44] .min_menuline_bw / [25:19] padding:right / [27:28] section / [28:57] .newslist / [29:41].listone .listone_a / [30:53] last-child / [32:48] .listone_a / [30:54] last-child / [33:34] overflow:hidden / [35:23] white-space:nowrap / [36:53] text-overflow:ellipsis / [37:50] div id=“tong” / [38:59] div class=“min_menuline” / [39:48] div class=“min_menuline_a” / [40:43] a href=“#” class=“menuline_abc” / [42:09] div class=“min_menuline_b” / [43:00] a href=“#” class=“menuline_bw” / [44:45] section 설정값 / [45:56] div class=“newslist” / [46:22] ul / [47:28] li / [47:52] li class=“listone” / [48:31] a class=“listone_a”

05 twitter baner & htitle 코딩

twitter baner & htitle를 세팅하면서 a링크 적용과, 객체의 정렬 및 텍스트의 세부적인 스타일을 설정하며 학습합니다.

35분

책갈피 : [00:26] .listone_a (font-size:.9em) / [01:13] last-child / [02:31] twitter baner넣기 / [03:58] .twitter_baner / [04:09] clear:botm; / [04:58] newslist 수정 / [05:23] .twitter_baner span / [09:48] .twitter_baner img / [10:30] .htitle / [11:30] .htitle_ul 코딩 / [13:05] .htitle_ul li 코딩 / [15:43] .htitle_ul li a 코딩 / [16:13] .htitle_ul li img 코딩 / [17:35] .htitle_ul li span 코딩 / [17:39] display:block / [19:45] div class=twitter_baner / [20:52] a href / [21:36] span , img / [23:35] section / [24:25] div class=“bestinfo” , “bestinfo_a” / [25:54] h1 class=“htitle” / [26:49] ul class=“htitle_ul” / [27:59] .htitle_ul li / [28:52] .htitle_ul li a / [30:21] .htitle_ul li img / [32:48] .htitle_ul li span

06 ul과 li태그로 테이블화 작업 & 이미지 한장으로 여러개 표현하기.

ul과 li 태그만으로 table & sell처럼 보이게 출력하는 방법과 이미지 한장으로 좌표를 이용해 여러가지의 메뉴를 표현하는 방법에 대해서 심층적으로 파고들며 학습합니다.

39분

책갈피 : [01:57] div로 notable세팅 / [01:43] nav,div / [01:47] table & sell 출력 / [02:15] ul, li / [02:36] .notable / [02:50] overflow:hidden / [05:52] notable 정의 / [06:30] .notable h1 / [07:39] font-weight:normal / [09:42] .notable ul / [10:18] ul 정의 / [11:23] display:table / [14:01] .notable ul li / [14:46] display:table-cell 셀처리 / [18:09] vertical-align:top 적용 / [20:17] .notable ul li a / [20:37] display:block 적용 / [21:55] line-height 적용 / [24:47] .notable ul li a span / [25:48] background images 조절 / [33:50] nav 상속관계 / [34:27] div class=“notable” / [36:27] ul 상속관계 / [36:57] li 상속관계 / [37:40] a 상속관계 / [38:20] span 상속관계

07 로그인창 세팅 & 코딩 (1)

로그인바 내부 테두리를 둥글게 만들어 주면서 이미지를 사용하지 않고 오직 html5 css3만을 적극 활용해 코딩하는 학습을 합니다.

40분

책갈피 : [00:39] section 로그인폼 / [03:35] #login_com / [02:00] div / [05:15] #login_com form / [06:07] width와 padding의 상관관계 / [08:38] #login_com form fieldset 테두리 라운드 코딩 / [12:27] box-shadow 적용 / [13:52] rgba / [17:20] #login_coma 로그인 바 / [20:44] .aone / [22:44] .aone input / [25:25] #id, #pw 동시 적용 / [29:56] #id.bgon / [31:53] #pw.bgon / [32:13] no-repeat / [33:09] div id=“login_com” 상속 관계 / [33:27] form method=“post” name=“” action=“”상속 관계 / [34:38] fieldset 상속 관계 / [35:41] div id=“login_coma” 상속 관계 / [36:15] p class=“aone” 상속 관계 / [36:47] input type=“text” tabindex=“1” id=“id” class=“bgon” 상속 관계 / [39:13] p class=“aone” 상속 관계 / [39:32] input type=“password” tabindex=“2” id=“pw” class=“bgon” 상속 관계

08 로그인창 세팅 & 코딩 (2)

로그인바 내부 테두리를 둥글게 만들어 주면서 이미지를 사용하지 않고 오직 html5 css3만을 적극 활용해 코딩하는 학습을 합니다.

34분

책갈피 : [00:30] .atwo 로그인버튼 / [00:52] line-height / [01:51] .atwo input / [02:53] #logbutton / [05:30] css3를 이용한 버튼 코딩 / [06:35] 이미지 같은 버튼 디자인 / [09:23] #logbutton span 텍스트 디자인 / [10:25] line-height / [12:15] .atwo .login_on / [13:13] #login_comb / [16:12] .buttonup / [16:29] margin / [17:52] .buttonup a / [18:13] float / [20:14] .buttonup a span / [21:04] css3를 이용한 버튼 코딩 / [21:07] border-radius / [21:38] 이미지 같은 버튼 디자인 / [23:42] line-height 코딩 / [24:00] #login_comb .foota / [26:10] P class=“atwo” 상속관계 / [26:59] button type=“submit” id=“logbutton” tabindex=“5” 상속관계 / [28:27] Login 상속관계 / [28:54] input type=“checkbox” name=“” tabindex=“3” 상속관계 / [30:16] loginon 상속관계 / [30:46] 로그인유지 상속관계 / [31:09] input type=“checkbox” name=“” tabindex=“4” 상속관계 / [31:20] loginon 상속관계 / [31:54] login_comb 상속관계 / [32:07] p class=“buttonup” 상속관계 / [32:48] a href 회원가입 상속관계 / [34:00] span class=“foota”상속관계

09 로그인버튼 코딩과 여러 목록을 유형별로 만들기 (1)

로그인 버튼을 이미지같이 디자인하는 코딩방법과 여러 목록을 유형별로 만들어 디테일 하게 디자인하는 방법에 대해 학습합니다. (휴대기기 가로로 눕혀 볼 수 있도록 코딩하기)

42분

책갈피 : [02:32] .login_comc / [04:52] .buttonup_a / [06:06] .buttonup_a a / [07:44] display:table-cell / [09:33] .buttonup_a .gradi (border적용) / [11:01] .buttonup_a .gradi (버튼 디자인) / [12:48] .buttonup_a .imoo (이미지 적용) / [16:35] div class="login_comc" 상속관계 / [16:59] p class="buttonup_a" 상속관계 / [17:52] a href="#" class="gradi" 상속관계 / [19:23] span class="imoo" 상속관계 / [20:35] em 상속관계 / [21:24] 유형별 목록 만들기 / [24:14] .mum_list / [25:15] .mum_list li / [27:58] margin-top / [29:40] .mum_list .category / [31:15] .mum_list .category .tic / [32:23] .mum_list .imageaa / [37:04] .mum_list .momtxt / [38:37] .mum_list .momtxt strong / [39:12] .mum_list .momtxt .price

10 여러 목록을 유형별로 만들기 (2)

유형별로 만들어진 목록의 카테고리와 텍스트를 디테일하게 디자인하는 방법에 대해 학습합니다.

41분

책갈피 : [00:27] .mum_list .momtxt .price .num / [00:47] text-decoration:lone-through; / [01:55] font:bold / [03:55] .mum_list .momtxt .price .won / [05:27] .mum_list .momtxt .price .prodc / [06:37] .mum_list .momtxt .priceb / [07:25] .mum_list .momtxt .priceb .num / [07:55] .mum_list .momtxt .priceb .won / [09:32] .mum_list .momtxt .period, .mum_list .momtxt .buy / [10:54] .mum_list .momtxt .period / [12:22] ul class="mum_list“ 상속관계 / [12:59] li 상속관계 / [13:57] a 상속관계 / [14:40] span class="category" 상속관계 / [15:22] span class="tic“ 상속관계 / [16:16] span class="imageaa" 이미지 상속관계 / [17:31] span class="momtxt“ / [17:54] .mum_list .momtxt strong 상속관계 / [18:34] span class="price“ 상속관계 / [19:04] span class="num" 14,000 상속관계 / [19:55] span class="won" 원 상속관계 / [20:43] span class="priceb“ 상속관계 / [21:04] span class="num" 상속관계 / [21:29] span class="won" 상속관계 / [21:50] span class="buy" , span class="period" , span class="txt" 상속관계 / [25:16] .mum_list / [26:19] .mum_list .alist .title_one / [28:34] .mum_list .alist .title_one .onea / [30:32] .mum_list .alist .title_one .oneb / [32:42] .mum_list .alist .onec / [34:19] letter-spacing / [34:45] .mum_list .alist .oned / [36:57] ul class="mum_list" 상속관계 / [37:33] li class="alist" 상속관계 / [38:14] a 상속관계 / [38:40] span class="title_one" 상속관계 / [39:25] span class="oneb" 상속관계 / [40:13] span class="onec" 상속관계 / [40:38] span class="oned“ 상속관계

11 여러 목록을 유형별로 만들기 (3)

유형별 목록의 카테고리에 이미지를 넣지 않고 css3만을 사용해서 볼록하게 디자인하는 방법과 디테일한 텍스트 디자인에 대해 학습합니다.

26분

책갈피 : [00:56] section, 목록유형 NO3 / [02:22] bestinfo_b 구분 / [02:37] margin-bottom / [04:12] mum_listsam / [05:28] mum_listsam li / [07:53] gradient / [10:12] mum_listsam li a / [10:19] display:block / [13:45] mum_listsam li a .hint / [14:19] Helvetica / [14:57] 배경에 이미지 적용 / [16:27] mum_listsam li .right_ic / [17:42] mum_listsam li a.right_ic / [19:26] mum_listsam 상속관계 / [20:24] li 상속관계 / [21:33] a, class ‘alzio 모바일웹개발자’ 상속관계 / [23:43] strong ‘선수과목_CSS3’ 상속관계

12 페이지목록숫자 블록처리

div를 하나로 만들어서 a가 있다면과 span 있다면 span/span이 있다면 으로 이루어지는 css상속관계에 대해 학습합니다.

34분

책갈피 : [01:21] span / [03:21] pagess / [05:06] pagess a, .pagess em / [05:20] display:inline-block / [09:30] a, em 여백주기 / [10:05] / 의 이해 / [11:33] border-radius / [13:35] pagess a span, .pagess em span / [15:50] pagess a / [17:05] pagess a span / [18:53] pagess em / [19:34] pagess em span / [21:27] pagess a.lr_ic span span / [22:36] no-repeat, background:url / [23:12] text-indent / [24:47] pagess a.prev span span / [25:54] pagess a.next span span / [27:06] pagess 상속관계 / [27:40] “#” , “lr_icprev” a 상속관계 / [29:18] span 상속관계 / [30:26] span 이전 상속관계 / [32:24] em 상속관계

13 페이지기본제작 및 SNS블록, 웹툰출력방법

CSS3의 gradient와 radius 장점을 백번 활용해서 완벽한 버튼을 제작하는 방법에 대해 학습합니다.

53분

책갈피 : [04:01] mainwrap / [04:36] wrap_title / [06:50] wrap_title .subjec / [08:28] wrap_title .subjec h1 / [09:54] subjec / [12:00] subjec .cp / [12:11] padding-top / [14:04] subjec .cp em / [15:01] font-style / [16:16] subjec .cp span / [18:19] contentone / [19:59] sns 블록 제작 / [20:48] sharesns / [22:19] sharesns ul .basic li / [23:13] text-align:center / [24:01] sharesns ul .basic li a / [26:09] gradient (linear) / [27:03] sharesns ul .basic li a span / [29:00] snsbgic / [30:15] twitter 버튼 / [30:51] float:left / [33:27] sharesns ul .basic li .twitter a / [34:48] sharesns ul .basic li .twitter a span / [36:33] facebook 버튼 / [38:22] metwo 버튼 / [39:22] yozm 버튼 / [40:40] imgww / [41:53] imgww img / [43:16] mainwrap 상속관계 / [43:46] wrap_title 상속관계 / [44:22] subjec 상속관계 / [45:16] h1 상속관계 / [45:52] cp 상속관계 / [46:34] b ALZIO 상속관계 / [47:19] em 상속관계 / [47:56] span 개발자버전 상속관계 / [48:24] sharesns 상속관계 / [49:03] basic 상속관계 / [49:56] twitter 상속관계 / [50:53] a 상속관계 / [51:48] span class=snsbgic 상속관계

14 실용적인 페이지하단

최종적인 페이지 마무리와 기존의 간단한 모바일하단 보다는 실용성있고, 디자인적인 하단 부분을 제작하고. 가로 세로 여백을 동일하게 주는 방법에 대해 학습합니다.

32분

책갈피 : [01:21] footer / [03:03] footer / [05:13] footer top / [05:49] overflow:hidden / [07:47] footer top a / [08:35] white-space:nowrap / [10:54] footer top pertwo / [13:14] footer min / [13:28] border-top / [14:16] footer min a / [17:08] footer min a span / [18:16] footer min a pasoone / [18:49] footer min a pasotwo / [21:45] footer address / [23:37] footer address t / [24:37] footer address t a / [25:37] footer address m / [27:19] footer 상속관계 / [27:57] top 상속관계 / [28:44] a 상속관계 / [30:07] min 상속관계 / [30:28] a 상속관계 / [31:16] span 상속관계

[실무자 초빙 강의] 실무역량 강화를 위한 모바일웹제작 실전편

15 실무능력 향상을 위한 특별강의 ! 모바일에 따른 viewport정의, css3 @media

모바일에 따른 viewport선언을 보여드리며, html5, css3 속성을 이용한 상단 디자인을 정의합니다. 더 나아가 css3의 @media속성을 이용해 가변적인 스크린 크기에 대응하는 방법에 대해 알아봅니다.

1시간 17분

책갈피 : [00:02] 실전웹페이지 제작 / [01:09] html문서 생성 / [02:35] body class="main" / [02:55] div id="wrap" / [03:29] header / [04:31] 출력값확인 / [06:39] 기본css리셋 / [07:58] #wrap / [09:41] header section.top / [11:16] header section.top a.ci / [14:45] 우측로고삽입 / [16:10] 출력값확인 / [16:30] .searchFormArea / [17:46] a.mylotte / [19:29] a.mylotte span / [22:19] 우측로고위치 / [23:53] 검색창삽입 / [26:52] 출력값확인 / [27:25] span.keyword_box / [29:08] border-radius / [31:21] 돋보기이미지정의 / [32:45] .text_wrap / [33:34] keyword_box input / [36:10] -webkit-appearance / [37:56] 출력값확인 / [40:18] div id="container" / [41:17] nav id="t_nav" / [42:21] 출력값확인 / [43:19] 상단메인메뉴 / [44:56] #t_nav a / [46:51] 메뉴가로정렬 / [49:13] 메뉴구분선 / [51:54] 창너비 축소 / [53:25] @media / [55:49] 메뉴갯수수정 / [57:04] a:nth-of-type(5) / [58:43] 모바일특가 section / [59:43] 오늘의 모바일특가 탭 / [01:01:12] div id="mainRecomV2" / [01:03:47] 출력값확인 / [01:04:14] #mainRecomV2 / [01:06:32] .mainRecom-container / [01:08:28] 메뉴가로정렬 / [01:10:21] 상품이미지정의 / [01:12:10] 상품명정의 / [01:13:17] margin:5px auto / [01:15:17] 상품명 하단 컷 / [01:16:47] 상품가격정의

16 실무능력 향상을 위한 특별강의 ! 실무적으로 접근하는 레이아웃 구성 & 제이쿼리의 사용

html5, css3를 이용해 실제 사용되는 홈페이지의 레이아웃을 구성하며 실무적으로 접근하고 있습니다. 또한 모바일에서 필수적인 제이쿼리 사용에 대해 간략히 설명합니다.

1시간 24분

책갈피 : [00:13] @media / [02:10] width:33.3% / [03:11] 하단 메뉴 / [04:17] 출력값확인 / [05:14] 메뉴구분선 / [05:49] #carouselSet_block / [06:26] table 구조로 설정 / [07:37] display:table / [08:37] display:table-row / [09:22] display:table-cell / [11:38] vertical-align:middle / [12:45] "tline" 정의 / [13:27] 출력값확인 / [14:45] class='on' 설정 / [15:33] li.tabCell.on / [17:12] li.tabCell.on .tline / [18:54] 고객센터 베너 / [20:20] BEST 인기특가전 / [21:27] #bestPrice / [22:41] #bestPrice h3.title / [25:32] 인기특가전 구조 / [27:37] 출력값확인 / [28:28] #bestPriceFlick / [30:12] .bestPrice-ct / [33:04] .bestPrice-box / [35:14] .bestPrice_banner / [36:53] .bestPrice_banner img / [38:08] .bestPrice_goods / [40:40] .bestPrice_goods a / [42:56] 상품이미지축소 / [44:08] p.text / [45:32] p.text span / [47:25] 텍스트 두줄만출력 / [49:22] p.text span.nm / [51:33] p.text span.dc / [52:32] 좌우버튼생성 / [55:26] :after 가상요소 / [56:48] 출력값확인 / [57:24] background-position / [01:00:35] 너비변경 / [01:01:50] @media / [01:02:54] 좌우버튼삭제 / [01:04:20] 박스 하나만 출력 / [01:06:10] 타이틀 여백 변경 / [01:07:27] 전체 여백 변경 / [01:08:44] 박스 여백 변경 / [01:09:58] white-space:nowrap; / [01:11:56] overflow:hidden 삭제 / [01:13:35] white-space:normal / [01:14:40] 하단 메뉴 작업 / [01:16:29] .carouselSet2 ul / [01:17:58] .carouselSet2 ul li:after / [01:18:58] 출력값확인 / [01:20:28] ul li.on:after / [01:23:07] @media 이동 / [01:23:28] 출력값확인

17 실무능력 향상을 위한 특별강의 ! 표준화 작업을 위한 디버깅 작업

html5로 구성된 섹션들을 정의하고 실습하면서, 실제 실무에서 발생하는 여러 버그들을 해결하는 능력을 키울 수 있도록 강의를 진행합니다.

1시간 21분

책갈피 : [00:31] 모바일 특별혜택 / [01:27] section id="mainBanner" / [02:29] 출력값확인 / [03:07] #mainBanner / [04:24] #mainBanner h3.title / [05:16] #mainBannerFlick / [06:50] .mainBanner-container / [08:00] .mainBanner-ct a / [10:52] .carouselSet a / [12:30] .carouselSet a:after / [14:43] 출력값확인 / [15:26] @media all and / [17:12] white-space:nowrap / [20:32] 좌우버튼만들기 / [22:38] 금주의 하이라이트 / [23:03] section id="BContainerHigh" / [24:18] 출력값확인 / [26:45] #BContainerHigh .slide / [28:33] .slide ul li / [30:49] inline-block 버그처리 / [32:40] 버그처리 font-size:0 / [33:46] .slide ul li a / [35:39] .slide ul li img / [37:04] span.today / [38:30] 출력값확인 / [41:49] section class="mainIcon2012" / [44:20] 출력값확인 / [45:44] 스페셜 쇼핑 CSS / [47:04] section.mainIcon2012 ul / [49:01] 이미지가로정렬 / [50:58] clear:both 처리 / [51:45] 높이 버그처리 / [54:41] section.mainIcon2012 ul li a / [56:25] li:last-child a / [59:25] 이미지구현 / [01:00:18] 출력값확인 / [01:00:41] 이미지원본확인 / [01:01:37] background-position 적용 / [01:03:12] 특정이미지변경 / [01:04:40] ul.event li a / [01:05:50] 출력값확인 / [01:07:07] ul li:nth-of-type(1) a / [01:09:01] @media / [01:10:02] #BContainerHigh / [01:12:34] 출력 li갯수 수정 / [01:13:47] 출력값확인 / [01:14:27] 좌우버튼 생성 / [01:16:12] 버튼참조해서 생성 / [01:18:17] 출력값확인 / [01:20:13] li:nth-of-type(4)

18 실무능력 향상을 위한 특별강의 ! 실무에 적용하는 HTML5, CSS3 완벽파악

css3속성을 사용하여 실무에서 사용되는 버튼을 제작&홈페이지에 삽입하고, 모바일에서 출력되는 위치별 구성을 상황에 맞도록 배치하기위한 표준화작업을 강의합니다.

1시간 13분

책갈피 : [01:09] footer 정의 / [02:31] div class="foot_nav" / [03:29] footer css정의 / [05:57] .foot_nav ul / [06:55] 출력값확인 / [08:52] 너비변경에 따른 li출력 / [11:30] 첫번째 로그인 숨김 / [13:31] 각 li 너비설정 / [15:01] .foot_nav li.last / [17:06] li:nth-of-type(7) a / [19:09] 로그인메뉴 변경 / [20:31] @media 처리 / [21:42] .ontablet 값 숨김 / [22:55] 출력값확인 / [23:43] section class="address" / [24:41] footer .address / [27:14] .address p .c1 / [27:47] section class="link" / [29:30] footer .link nav a / [30:58] 메뉴 구분선 위치 / [32:19] 하단여백추가생성 / [33:44] 카피라이트 / [35:31] 서브페이지제작 / [36:00] 새로운문서 / [36:53] 공통된 header, footer / [39:13] header, footer 복사 / [42:00] common 새파일 생성 / [43:14] common파일 참조 / [44:25] common파일 정의 / [45:35] 출력값확인 / [46:46] section class="subTitle" / [48:24] section.subTitle / [52:13] section.subTitle h2 / [53:47] section.subTitle a.thisWdyt / [55:56] div id="container" / [57:01] section id="productPhoto" / [58:43] 상단 상품이미지와 버튼 / [01:00:56] li.product-ct / [01:01:30] li.product-ct div.imgWrap / [01:03:30] img 가운데정렬 / [01:03:44] 돋보기이미지구현 / [01:07:09] div class="list_btn" / [01:07:59] .list_btn / [01:09:53] .list_btn a / [01:11:43] 버튼 디자인 / [01:12:06] -webkit-gradient

19 실무능력 향상을 위한 특별강의 ! 웹표준 기반의 모바일 레이아웃 만들기

모바일 웹사이트 제작에 웹표준과 HTML5를 활용하려는 웹 퍼블리셔들을 위한 실무강의입니다. HTML5및 CSS3를 적용시킨 모바일웹 제작 기법에 대해 자세히 알려드립니다.

1시간 7분

책갈피 : [00:27] section id="productSaleTitle" / [01:54] 상품명&세일마크 / [04:25] span.subject / [05:59] display:table-cell / [07:11] section class="point_title" / [08:47] .point_title .point / [09:37] section id="productPriceInfo" / [12:58] 세일가 섹션정의 / [14:34] display:table 설정 / [16:49] display:table-cell 설정 / [19:52] 출력값확인 / [20:06] 미리계산기 디자인 / [20:30] .miribox / [22:31] border-radius / [22:38] box-shadow / [23:21] .miri a / [24:53] 동일한 섹션구조 / [26:06] 동일 출력값확인 / [26:58] 텍스트 컬러변경 / [28:00] form 추가 / [30:51] 출력구조확인 / [31:21] section#productOption / [34:28] select / [37:19] section id="productButton" / [38:40] 버튼영역 정의 / [40:06] 버튼 가로정렬 / [41:56] 베너삽입 / [43:20] 네비게이션 탭구현 / [44:45] section id="productBottom" / [45:42] 탭메뉴 디자인 / [47:03] nav a / [48:29] 메뉴간 구분선 / [51:08] nav a span / [51:23] 선택된 탭메뉴 정의 / [52:29] nav a.on / [55:10] 선택된 탭의 테두리 정의 / [56:41] 탭 본문 div삽입 / [57:39] href과 id값의 관계 / [59:20] div#photoGallery / [59:50] div#photoGallery img / [01:01:24] 위로 버튼 / [01:02:43] 동일한 배경이미지 / [01:05:09] a.goTop span / [01:06:46] 출력값확인

20  실무능력 향상을 위한 특별강의 ! 웹표준 기반의 모바일 레이아웃 만들기

모바일 웹사이트 제작에 웹표준과 HTML5를 활용하려는 웹 퍼블리셔들을 위한 실무강의입니다. HTML5및 CSS3를 적용시킨 모바일웹 제작 기법에 대해 자세히 알려드립니다.[2014년 2월 녹화]

26분

책갈피 : [00:05] 알지오 모바일 내용 / [01:15] 내용 소스로 살펴보기 / [01:26] 목록 태그 / [01:52] maincate / [02:07] 정의 돼 있는 부분 확인 / [02:38] 상대위치로 외부여백 늘리기 / [03:30] h1으로 타이틀 정의 / [05:12] ab_list 정의 / [06:15] display: block / [08:56] 좌측 하단 제작하는 두가지 방법 / [09:35] 좌측 하단 소스 보기 / [10:48] 링크에 그림자 적용 / [11:35] link와 link a 로 정의 / [14:24] address 부분을 따로 잡은 이유 / [15:11] 중간메뉴 보기 / [16:06] li와 li 사이에 패딩값 주는 방법 / [16:25] 각 선택자의 css와 end css 준 이유 알아보기 / [17:07] 결과물 보기 / [17:40] 오른쪽 마다 선 주기 / [18:45] 하단 버튼처럼 상단에 버튼 만들기 / [19:52] CSS로 제작한 세개의 버튼 살펴보기 / [20:45] 버튼 소스 보기 / [22:02] 벡그라운드 이미지 경로와 정의된 내용 보기 / [22:59] 항상 떠있는 배너 / [24:30] 배너 이미지 따로 잡기

샘플확인 : 알지오 검색후 -> 강의검색란 -> 모바일 웹페이지 제작 [css3]