모바일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=" oｎeb" 상속관계/[40:13] span class=" oｎec" 상속관계/[40:38] span class=" oｎed“ 상속관계

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=' oｎ' 설정/[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] 배너 이미지 따로 잡기

샘플확인 : 알지오 검색후 -> 강의검색란 ->모바일UI 실무 [css3]