모바일 [입문+실무]

41회차 속성과정
전체 : 22시간 58분|회차당 평균 : 33분36초

이용기간 2개월

전문강사 : 채명수/박찬수

모바일 [실무] 사용법 강좌
코드를 수정하고 모든기기(태블릿pc/스마트폰)에서 적용되는 결과값을 실시간으로 보여드립니다. 모바일 페이지는 CSS3를 기반으로 운영되고 있기 때문에 반드시 CSS3의 내용을 알아야만 완벽하게 코딩할 수 있습니다. 또한 실무자 초빙 강의를 통해 현재 운영되는 다른 모바일 제작기법을 배워봅니다.

01.35분 모바일 웹제작의 기본, body, header 코딩
강의진행방식설명, !doctype html 문서선언, 언어선언 및 속성

책갈피 : [00:00] 강의진행방식/[02:26] 작업시 유의사항/[03:51] 기본 숙지 사항/[05:46] 제공 소스/[11:25] ANSI를 UTF-8로 변경/[11:37] 꿀팁/[11:38] utf-8/[12:37] !doctype html/[13:17] 꿀팁/[13:18] html lang="ko"/[13:22] 꿀팁/[14:16] charset="utf-8"/[14:20] 꿀팁/[14:22] charset/[14:33] 모바일 기본사항/[14:46] 꿀팁/[16:33] @charset="utf-8"/[16:38] 꿀팁/[16:58] margin, padding/[17:21] 꿀팁/[17:40] -webkit-text-size-adjust/[17:41] 꿀팁/[20:02] body 선언/[20:24] position/[20:25] 꿀팁/[20:44] 꿀팁/[22:45] 꿀팁/[22:53] display:block 과 inline/[23:19] inherit 정의/[23:49] 꿀팁/[23:53] 꿀팁/[25:09] Helvetica/[25:33] 꿀팁/[26:59] fieldset 정의/[27:07] 꿀팁/[27:19] 꿀팁/[27:34] 꿀팁/[27:35] ul, ol, dl/[27:42] 꿀팁/[27:50] em, address /[27:51] 꿀팁/[28:13] 꿀팁/[28:20] 꿀팁/[28:31] 꿀팁/[29:02] 꿀팁/[29:25] 꿀팁/[29:28] hr/[29:32] !important 정의 /[29:33] 꿀팁/[29:40] 꿀팁/[32:39] visibility:hidden/[32:44] 꿀팁/[33:03] 꿀팁/[33:40] 꿀팁/[33:53] 꿀팁/[35:11] overflow:hidden/[35:13] 꿀팁
02.39분 로고 & 검색바 & 메뉴 셋팅
로고와 검색바, 검색버튼, 메뉴버튼들의 위치를 설정하고, 세부적인 색상과 그림자를 셋팅하는 실습을 진행합니다.

책갈피 : [00:38] logoimg/[00:50] 꿀팁/[00:51] float/[01:46] .logoimgbx/[02:02] 꿀팁/[02:43] 꿀팁/[03;17] .logoimgbxigm/[03:25] 꿀팁/[03:57] 검색바 만들기/[04:57] 꿀팁/[05:51] webkit-box-shadow/[06:06] 꿀팁/[07:30] .search_a .search_b/[08:15] 꿀팁/[08:34] 꿀팁/[08:44] 꿀팁/[08:56] 꿀팁/[10:20] .search_a .search_c/[11:35] 꿀팁/[11:39] 꿀팁/[11:48] 꿀팁/[11:56] webkit-border-radius/[11:57] 꿀팁/[12:22] webkit-appearance/[12:23] 꿀팁/[14:02] .search_button/[14:22] 꿀팁/[15:18] 꿀팁/[15:44] repeat, background/[15:45] 꿀팁/[16:07] 꿀팁/[16:27] white-space:nowrap/[16:29] 꿀팁/[19:03] .top_navtab/[17:04] 꿀팁/[17:34] 꿀팁/[19:14] display:table/[19:17] 꿀팁/[19:55] clear:both/[19:57] 꿀팁/[20:24] 꿀팁/[20:41] -webkit-gradient(linear)/[21:12] 꿀팁/[22:38] 꿀팁/[23:04] ul,li 태그/[23:05] 꿀팁/[23:25] .top_navtab_a/[23:45] display:table-cell/[23:46] 꿀팁/[24:53] 꿀팁/[25:09] 꿀팁/[25:38] 꿀팁/[25:39] vertical-align:top;/[25:52] 꿀팁/[26:19] top_navtab_c/[27:25] 꿀팁/[27:35] 꿀팁/[28:46] .top_navtab_on/[28:54] 꿀팁/[29:43] 꿀팁/[29:52] 꿀팁/[30:46] .top_navtab/[30:47] 꿀팁/[32:20] .top_navtab_c/[32:35] 꿀팁/[32:47] 꿀팁/[33:45] 꿀팁/[33:59] 꿀팁/[34:40] 꿀팁/[35:59] 꿀팁/[36:05] 꿀팁/[36:13] 꿀팁/[36:14] margin/[37:32] 꿀팁/[38:12] 꿀팁
03.50분 상속관계 & select button 세팅
select button을 만들고 border-radius태그를 사용한 세부적인 세팅 방법과 개체의 정렬에 대해 학습합니다.

책갈피 : [01:48] 셀렉트 만들기/[01:50] 꿀팁/[01:53] hr/[03:18] #lec_in/[03:40] clear:both /[03:41] 꿀팁/[03:56] 꿀팁/[06:13] .lec_intitle/[06:24] 꿀팁/[07:12] 꿀팁/[07:54] 꿀팁/[08:17] .lec_intitle select/[09:03] 꿀팁/[09:39] 꿀팁/[09:40] margin-right:3px/[10:23] .lec_intitle select.ab/[10:36] 꿀팁/[15:18] #yes_lec_in /[15:41] .yes_lec_intitle/[16:23] .yes_lec_intitle select /[16:29] 꿀팁/[16:48] 꿀팁/[16:58] 꿀팁/[17:37] 꿀팁/[17:39] border-radius/[19:06] 꿀팁/[19:24] 꿀팁/[20:36] 꿀팁/[22:38] 꿀팁/[22:39] gradient(linear)/[23:35] 꿀팁/[23:40] 꿀팁/[23:56] 꿀팁/[25:47] 상속관계 /[25:54] body의 직접적용/[26:19] 꿀팁/[27:18] header의 직접적용 /[27:53] 꿀팁/[28:10] body.fon 상속/[28:35] .header 직접적용/[28:50] 꿀팁/[29:15] body.fon 상속/[30:23] .logoimg 직접적용 /[30:25] 꿀팁/[31:14] body.fon 상속/[31:51] .logoimgbx /[32:06] 꿀팁/[32:46] 꿀팁/[35:00] 꿀팁/[35:58] .search_a/[36:05] 꿀팁/[36:42] 꿀팁/[37:25] 꿀팁/[38:01] 꿀팁/[38:52] .search_b /[39:23] 꿀팁/[39:54] .search_c /[40:24] 꿀팁/[42:01] .search_button/[42:44] 꿀팁/[45:27] 꿀팁/[45:28] ul, ol, dl/[46:02] .top_navtab_a/[46:06] 꿀팁/[46:51] hr/[47:06] 꿀팁/[47:35] .yes_lec_in/[47:51] 꿀팁/[48:27] .yes_lec_intitle/[48:53] select/[49:06] 꿀팁
04.49분 div에 tong 코딩
tong안에 menuline & newslist 을 만들어서 아웃라인을 잡아주고, 메뉴틀을 만들어서 요소들을 세팅하고 div로 마무리하는 내용을 학습합니다.

책갈피 : [03:15] div/[04:19] div에 tong/[05:13] tong 묶음/[05:33] 꿀팁/[05:47] 꿀팁/[08:23] 꿀팁/[08:25] border-bottom/[11:38] .min_menuline/[13:58] 꿀팁/[14:29] 꿀팁/[14:38] 꿀팁/[15:01] 꿀팁/[15:25] 꿀팁/[16:17] .min_menuline_a/[16:31] float:left/[16:32] 꿀팁/[17:15] 꿀팁/[18:00] .min_menuline_abc/[18:34] 꿀팁/[18:40] 꿀팁/[19:37] 꿀팁/[20:07] 꿀팁/[20:14] 꿀팁/[20:22] 꿀팁/[22:24] 꿀팁/[22:51] .min_menuline_abc_on/[23:50] .min_menuline_b/[24:14] 꿀팁/[24:44] .min_menuline_bw/[24:53] 꿀팁/[25:05] 꿀팁/[25:15] 꿀팁/[25:19] padding:right/[27:28] section/[28:57] .newslist/[29:17] 꿀팁/[29:41].listone .listone_a/[30:18] 꿀팁/[30:53] last-child/[30:53] 꿀팁/[32:48] .listone_a/[32:49] 꿀팁/[30:54] last-child/[33:33] 꿀팁/[33:34] overflow:hidden/[34:35] 꿀팁/[34:49] 꿀팁/[35:14] 꿀팁/[35:22] 꿀팁/[35:23] white-space:nowrap/[35:27] 꿀팁/[36:36] 꿀팁/[36:52] 꿀팁/[36:53] text-overflow:ellipsis/[37:50] div id=“tong”/[38:05] 꿀팁/[38:59] min_menuline/[39:16] 꿀팁/[39:48] div class/[40:05] 꿀팁/[40:43] class=“menuline_abc”/[40:48] 꿀팁/[42:04] 꿀팁/[42:09] div class/[42:56] 꿀팁/[43:00] class=“menuline_bw”/[44:12] 꿀팁/[44:45] section 설정값/[45:56] div class=“newslist”/[46:14] 꿀팁/[46:22] ul/[47:05] 꿀팁/[47:28] li/[47:52] li class=“listone”/[48:00] 꿀팁/[48:29] 꿀팁/[48:31] a class=“listone_a”
05.35분 twitter baner & htitle 코딩
twitter baner & htitle를 세팅하면서 a링크 적용과, 객체의 정렬 및 텍스트의 세부적인 스타일을 설정하며 학습합니다.

책갈피 : [00:26] font-size/[00:37] 꿀팁/[01:07] 꿀팁/[01:13] last-child/[02:31] twitter baner/[03:58] .twitter_baner/[04:09] clear:botm;/[04:10] 꿀팁/[04:16] 꿀팁/[04:58] newslist/[05:23] .twitter_baner span/[05:50] 꿀팁/[06:53] 꿀팁/[08:15] 꿀팁/[09:48] .twitter_baner img/[09:53] 꿀팁/[10:04] 꿀팁/[10:30] .htitle/[10:39] 꿀팁/[10:47] 꿀팁/[11:30] .htitle_ul/[11:42] 꿀팁/[12:21] 꿀팁/[12:27] 꿀팁/[12:35] 꿀팁/[13:05] .htitle_ul li/[13:22] 꿀팁/[13:36] 꿀팁/[13:43] 꿀팁/[15:43] .htitle_ul li a/[15:44] 꿀팁/[15:57] 꿀팁/[16:13] .htitle_ul li img/[16:19] 꿀팁/[16:27] 꿀팁/[16:38] 꿀팁/[17:35] .htitle_ul li span/[17:38] 꿀팁/[17:39] display:block/[17:59] 꿀팁/[18:36] 꿀팁/[19:45] twitter_baner/[19:57] 꿀팁/[20:52] a href/[21:04] 꿀팁/[21:36] span , img/[22:06] 꿀팁/[23:09] 꿀팁/[23:35] section/[24:00] 꿀팁/[24:25] “bestinfo” , “bestinfo_a”/[24:27] 꿀팁/[25:26] 꿀팁/[25:54] h1 class=“htitle”/[25:55] 꿀팁/[26:19] 꿀팁/[26:49] ul class=“htitle_ul”/[27:08] 꿀팁/[27:51] 꿀팁/[27:59] .htitle_ul li/[28:41] 꿀팁/[28:52] .htitle_ul li a/[29:09] 꿀팁/[30:07] 꿀팁/[30:21] .htitle_ul li img/[31:06] 꿀팁/[31:54] 꿀팁/[32:48] .htitle_ul li span/[33:10] 꿀팁/[33:50] 꿀팁
06.39분 ul과 li태그로 테이블화 작업 & 이미지 한장으로 여러개 표현하기.
ul과 li 태그만으로 table & sell처럼 보이게 출력하는 방법과 이미지 한장으로 좌표를 이용해 여러가지의 메뉴를 표현하는 방법에 대해서 심층적으로 파고들며 학습합니다.

책갈피 : [01:43] 꿀팁/[01:55] 꿀팁/[01:57] div로 notable세팅/[01:43] nav,div/[01:47] table & sell 출력/[02:14] 꿀팁/[02:15] ul, li/[02:36] .notable/[02:48] 꿀팁/[02:50] overflow:hidden/[03:00] 꿀팁/[04:59] 꿀팁/[05:52] notable 정의/[06:30] .notable h1/[06:40] 꿀팁/[07:20] 꿀팁/[07:39] font-weight:normal/[07:40] 꿀팁/[08:35] 꿀팁/[09:42] .notable ul/[10:18] ul 정의/[11:22] 꿀팁/[11:23] display:table/[11:38] 꿀팁/[12:12] 꿀팁/[12:23] 꿀팁/[14:01] .notable ul li/[14:46] display:table-cell/[14:47] 꿀팁/[15:26] 꿀팁/[16:54] 꿀팁/[18:09] vertical-align:top/[18:45] 꿀팁/[20:16] 꿀팁/[20:17] .notable ul li a/[20:34] 꿀팁/[20:37] display:block/[21:17] 꿀팁/[21:54] 꿀팁/[21:55] line-height/[23:03] 꿀팁/[23:26] 꿀팁/[24:47] .notable ul li a span/[25:04] 꿀팁/[25:24] 꿀팁/[25:48] background images/[26:30] 꿀팁/[30:45] 꿀팁/[33:50] nav 상속관계/[33:57] 꿀팁/[34:27] div class=“notable”/[34:40] 꿀팁/[34:50] 꿀팁/[36:10] 꿀팁/[36:27] ul 상속관계/[36:41] 꿀팁/[36:57] li 상속관계/[36:58] 꿀팁/[37:34] 꿀팁/[37:40] a 상속관계/[38:02] 꿀팁/[38:20] span 상속관계/[38:30] 꿀팁
07.40분 로그인창 세팅 & 코딩 (1)
로그인바 내부 테두리를 둥글게 만들어 주면서 이미지를 사용하지 않고 오직 html5 css3만을 적극 활용해 코딩하는 학습을 합니다.

책갈피 : [00:37] 꿀팁/[00:39] section 로그인폼/[01:59] 꿀팁/[03:35] #login_com/[02:00] div/[04:31] 꿀팁/[05:15] #login_com form/[05:33] 꿀팁/[05:41] 꿀팁/[06:07] width와 padding/[08:38] form fieldset/[09:38] 꿀팁/[10:00] 꿀팁/[10:53] 꿀팁/[12:27] box-shadow/[12:54] 꿀팁/[13:51] 꿀팁/[13:52] rgba/[17:20] 로그인 바/[17:34] 꿀팁/[17:45] 꿀팁/[19:15] 꿀팁/[20:44] .aone/[20:58] 꿀팁/[21:33] 꿀팁/[22:44] .aone input/[24:06] 꿀팁/[25:25] #id, #pw 동시/[27:01] 꿀팁/[27:08] 꿀팁/[27:38] 꿀팁/[28:00] 꿀팁/[29:56] #id.bgon/[30:25] 꿀팁/[30:33] 꿀팁/[31:53] #pw.bgon/[32:08] 꿀팁/[32:13] no-repeat/[32:14] 꿀팁/[33:09] 상속 관계/[33:10] 꿀팁/[33:27] form method/[34:38] fieldset 상속 관계/[34:51] 꿀팁/[35:32] 꿀팁/[35:41] login_coma 상속 관계/[35:54] 꿀팁/[36:15] class=“aone” 상속 관계/[36:23] 꿀팁/[36:47] input type=“text”/[37:39] 꿀팁/[38:29] 꿀팁/[39:12] 꿀팁/[39:13] p class=“aone”/[39:32] input type=“password”
08.34분 로그인창 세팅 & 코딩 (2)
로그인바 내부 테두리를 둥글게 만들어 주면서 이미지를 사용하지 않고 오직 html5 css3만을 적극 활용해 코딩하는 학습을 합니다.

책갈피 : [00:30] .atwo 로그인버튼/[00:51] 꿀팁/[00:52] line-height/[01:51] .atwo input/[01:57] 꿀팁/[02:53] #logbutton/[02:59] 꿀팁/[05:30] css3 버튼/[05:31] 꿀팁/[05:52] 꿀팁/[06:20] 꿀팁/[06:35] 이미지 같은 버튼/[06:44] 꿀팁/[07:54] 꿀팁/[09:23] 텍스트 디자인/[09:32] 꿀팁/[10:02] 꿀팁/[10:24] 꿀팁/[10:25] line-height/[12:15] .atwo .login_on/[12:22] 꿀팁/[12:26] 꿀팁/[13:13] #login_comb/[13:55] 꿀팁/[14:06] 꿀팁/[14:24] 꿀팁/[15:43] 꿀팁/[16:12] .buttonup/[16:29] margin/[16:30] 꿀팁/[17:52] .buttonup a/[18:04] 꿀팁/[18:13] float/[18:14] 꿀팁/[18:33] 꿀팁/[19:20] 꿀팁/[19:36] 꿀팁/[20:14] .buttonup a span/[20:41] 꿀팁/[21:04] css3를 이용한 버튼/[21:06] 꿀팁/[21:07] border-radius/[21:37] 꿀팁/[21:38] 이미지 같은 버튼 디자인/[22:35] 꿀팁/[23:22] 꿀팁/[23:41] 꿀팁/[23:42] line-height/[24:00] #login_comb .foota/[24:44] 꿀팁/[24:59] 꿀팁/[25:17] 꿀팁/[26:10] P class=“atwo” 상속관계/[26:25] 꿀팁/[26:59] button type 상속관계/[27:05] 꿀팁/[27:43] 꿀팁/[28:27] Login 상속관계/[28:28] 꿀팁/[28:54] input type 상속관계/[29:36] 꿀팁/[29:49] 꿀팁/[29:59] 꿀팁/[30:16] loginon 상속관계/[30:25] 꿀팁/[30:46] 로그인유지 상속관계/[31:09] input type 상속관계/[31:13] 꿀팁/[31:20] loginon 상속관계/[31:52] 꿀팁/[31:54] login_comb 상속관계/[32:07] class=“buttonup” 상속관계/[32:48] a href 회원가입 상속관계/[34:00] “foota”상속관계
09.42분 로그인버튼 코딩과 여러 목록을 유형별로 만들기 (1)
로그인 버튼을 이미지같이 디자인하는 코딩방법과 여러 목록을 유형별로 만들어 디테일 하게 디자인하는 방법에 대해 학습합니다. (휴대기기 가로로 눕혀 볼 수 있도록 코딩하기)

책갈피 : [02:32] .login_comc/[31:52] 꿀팁/[04:39] 꿀팁/[04:52] .buttonup_a/[05:10] 꿀팁/[06:06] .buttonup_a a/[07:43] 꿀팁/[07:44] display:table-cell/[08:00] 꿀팁/[09:33] (border적용)/[10:10] 꿀팁/[10:24] 꿀팁/[11:01] (버튼 디자인)/[11:05] 꿀팁/[11:33] 꿀팁/[12:48] (이미지)/[13:49] 꿀팁/[13:58] 꿀팁/[16:34] 꿀팁/[16:35] 상속관계/[16:59] buttonup_a/[17:52] a href="#"/[18:32] 꿀팁/[19:23] class="imoo" 상속관계/[19:42] 꿀팁/[20:35] em 상속관계/[20:42] 꿀팁/[21:24] 유형별 목록 만들기/[24:14] .mum_list/[25:15] .mum_list li/[27:02] 꿀팁/[27:58] margin-top/[27:59] 꿀팁/[28:28] 꿀팁/[29:40] .mum_list .category/[29:49] 꿀팁/[30:14] 꿀팁/[30:43] 꿀팁/[31:15] .mum_list .category .tic/[31:29] 꿀팁/[31:43] 꿀팁/[32:23] .mum_list .imageaa/[32:37] 꿀팁/[34:37] 꿀팁/[35:52] 꿀팁/[37:04] .mum_list .momtxt/[37:24] 꿀팁/[37:39] 꿀팁/[38:37] .mum_list .momtxt strong/[38:45] 꿀팁/[38:59] 꿀팁/[39:12] price/[39:55] 꿀팁/[40:14] 꿀팁/[40:22] 꿀팁
10.41분 여러 목록을 유형별로 만들기 (2)
유형별로 만들어진 목록의 카테고리와 텍스트를 디테일하게 디자인하는 방법에 대해 학습합니다.

책갈피 : [00:27] price .num/[00:45] 꿀팁/[00:47] lone-through/[01:54] 꿀팁/[01:55] font:bold/[03:55] price .won/[04:10] 꿀팁/[04:40] 꿀팁/[05:03] 꿀팁/[05:27] price .prodc/[05:37] 꿀팁/[06:37] priceb/[06:48] 꿀팁/[07:25] priceb .num/[07:29] 꿀팁/[07:55] priceb .won/[08:24] 꿀팁/[08:36] 꿀팁/[09:32] period, buy/[09:58] 꿀팁/[10:06] 꿀팁/[10:33] 꿀팁/[10:54] period/[11:04] 꿀팁/[11:15] 꿀팁/[12:22] mum_list 상속관계/[12:24] 꿀팁/[12:59] li 상속관계/[13:07] 꿀팁/[13:57] a 상속관계/[14:05] 꿀팁/[14:40] "category" 상속관계/[14:50] 꿀팁/[15:22] "tic“ 상속관계/[15:34] 꿀팁/[16:16] "imageaa" 이미지 상속관계/[16:27] 꿀팁/[17:01] 꿀팁/[17:31] "momtxt“/[17:39] 꿀팁/[17:54] momtxt strong 상속관계/[18:00] 꿀팁/[18:34] "price“ 상속관계/[18:48] 꿀팁/[19:04] "num" 14,000 상속관계/[19:13] 꿀팁/[19:55] "won" 원 상속관계/[19:59] 꿀팁/[20:43] "priceb“ 상속관계/[20:46] 꿀팁/[21:04] "num" 상속관계/[21:08] 꿀팁/[21:29] "won" 상속관계/[21:50] "buy" , "period" , "txt" 상속관계/[22:03] 꿀팁/[22:47] 꿀팁/[25:16] .mum_list/[25:51] 꿀팁/[26:19] title_one/[26:58] 꿀팁/[27:58] 꿀팁/[28:34] title_one .onea/[28:42] 꿀팁/[28:54] 꿀팁/[30:16] 꿀팁/[30:32] title_one .oneb/[32:42] onec/[30:43] 꿀팁/[31:45] 꿀팁/[31:54] 꿀팁/[32:47] 꿀팁/[33:17] 꿀팁/[33:41] 꿀팁/[33:54] 꿀팁/[34:18] 꿀팁/[34:19] letter-spacing/[34:45] oned/[35:00] 꿀팁/[35:24] 꿀팁/[35:59] 꿀팁/[36:57] class="mum_list" 상속관계/[37:00] 꿀팁/[37:33] class="alist" 상속관계/[37:38] 꿀팁/[38:14] a 상속관계/[38:18] 꿀팁/[38:40] "title_one" 상속관계/[38:49] 꿀팁/[39:02] 꿀팁/[39:25] "oneb" 상속관계/[39:30] 꿀팁/[40:12] 꿀팁/[40:13] "onec" 상속관계/[40:38] "oned“ 상속관계/[40:42] 꿀팁
11.26분 여러 목록을 유형별로 만들기 (3)
유형별 목록의 카테고리에 이미지를 넣지 않고 css3만을 사용해서 볼록하게 디자인하는 방법과 디테일한 텍스트 디자인에 대해 학습합니다.

책갈피 : [00:56] 목록유형 NO3/[02:22] bestinfo_b 구분/[02:35] 꿀팁/[02:37] margin-bottom/[04:12] mum_listsam/[04:53] 꿀팁/[05:28] mum_listsam li/[05:53] 꿀팁/[07:01] 꿀팁/[07:52] 꿀팁/[07:53] gradient/[10:12] mum_listsam li a /[10:18] 꿀팁/[10:19] display:block/[11:44] 꿀팁/[12:30] 꿀팁/[12:49] 꿀팁/[13:45] mum_listsam li/[14:02] 꿀팁/[14:13] 꿀팁/[14:19] Helvetica/[14:20] 꿀팁/[14:30] 꿀팁/[14:57] 배경에 이미지/[16:27] mum_listsam li/[16:43] 꿀팁/[17:42] mum_listsam li/[18:05] 꿀팁/[18:57] 꿀팁/[19:03] 꿀팁/[19:26] mum_listsam 상속관계/[19:40] 꿀팁/[20:24] li 상속관계/[20:29] 꿀팁/[21:33] a, class ‘alzio 모바일웹개발자’/[21:37] 꿀팁/[23:17] 꿀팁/[23:43] strong 상속관계/[24:00] 꿀팁
12.34분 페이지목록숫자 블록처리
div를 하나로 만들어서 a가 있다면과 span 있다면 span/span이 있다면 으로 이루어지는 css상속관계에 대해 학습합니다.

책갈피 : [01:21] span/[03:21] pagess/[03:28] 꿀팁/[03:47] 꿀팁/[05:06] pagess a, .pagess em/[05:20] display:inline-block/[05:22] 꿀팁/[09:30] a, em 여백주기/[09:46] 꿀팁/[09:58] 꿀팁/[10:05] / 의 이해/[10:10] 꿀팁/[11:32] 꿀팁/[11:33] border-radius/[12:41] 꿀팁/[13:35] pagess a span/[14:18] 꿀팁/[15:08] 꿀팁/[15:15] 꿀팁/[15:50] pagess a/[16:00] 꿀팁/[17:05] pagess a span/[17:07] 꿀팁/[18:53] pagess em/[19:09] 꿀팁/[19:34] pagess em span/[20:06] 꿀팁/[21:27] pagess a.lr_ic/[22:35] 꿀팁/[22:36] no-repeat, background/[23:11] 꿀팁/[23:12] text-indent/[23:54] 꿀팁/[25:18] 꿀팁/[25:54] pagess a.next span span/[25:56] 꿀팁/[27:05] 꿀팁/[27:06] pagess 상속관계/[27:40] “#” , “lr_icprev” a/[27:52] 꿀팁/[29:18] span 상속관계/[29:26] 꿀팁/[30:24] 꿀팁/[30:26] span 이전 상속관계/[32:04] 꿀팁/[32:23] 꿀팁/[32:24] em 상속관계/[33:08] 꿀팁
13.53분 페이지기본제작 및 SNS블록, 웹툰출력방법
CSS3의 gradient와 radius 장점을 백번 활용해서 완벽한 버튼을 제작하는 방법에 대해 학습합니다.

책갈피 : [04:01] mainwrap/[04:28] 꿀팁/[04:36] wrap_title/[05:23] 꿀팁/[06:11] 꿀팁/[06:50] wrap_title .subjec/[07:42] 꿀팁/[07:49] 꿀팁/[08:28] wrap_title .subjec h1/[08:35] 꿀팁/[09:28] 꿀팁/[09:54] subjec/[10:06] 꿀팁/[10:12] 꿀팁/[12:00] subjec .cp/[12:11] padding-top/[12:12] 꿀팁/[12:57] 꿀팁/[14:04] subjec .cp em/[14:13] 꿀팁/[14:22] 꿀팁/[15:00] 꿀팁/[15:01] font-style/[16:16] subjec .cp span/[17:39] 꿀팁/[18:19] contentone/[18:27] 꿀팁/[18:37] 꿀팁/[19:59] sns 블록 제작/[20:48] sharesns/[20:55] 꿀팁/[21:21] 꿀팁/[22:19] sharesns ul .basic li/[22:49] 꿀팁/[23:13] text-align:center/[23:14] 꿀팁/[24:01] sharesns ul .basic li a/[24:07] 꿀팁/[25:13] 꿀팁/[26:08] 꿀팁/[26:09] gradient (linear)/[27:03] sharesns ul .basic li a span/[27:25] 꿀팁/[27:38] 꿀팁/[29:00] snsbgic/[29:04] 꿀팁/[30:15] twitter 버튼/[30:51] float:left/[30:53] 꿀팁/[31:10] 꿀팁/[32:07] 꿀팁/[33:27] twitter a/[33:34] 꿀팁/[33:43] 꿀팁/[34:48] twitter a span/[35:00] 꿀팁/[36:33] facebook 버튼/[36:36] 꿀팁/[36:59] 꿀팁/[37:58] 꿀팁/[38:22] metwo 버튼/[38:29] 꿀팁/[38:35] 꿀팁/[38:40] 꿀팁/[39:22] yozm 버튼/[39:27] 꿀팁/[40:40] imgww/[41:07] 꿀팁/[41:53] imgww img/[43:16] mainwrap 상속관계/[43:21] 꿀팁/[43:46] wrap_title 상속관계/[44:22] subjec 상속관계/[45:07] 꿀팁/[45:16] h1 상속관계/[45:40] 꿀팁/[45:52] cp 상속관계/[46:34] b ALZIO 상속관계/[47:18] 꿀팁/[47:19] em 상속관계/[47:56] span 개발자버전 상속관계/[48:24] sharesns 상속관계/[48:25] 꿀팁/[49:03] basic 상속관계/[49:35] 꿀팁/[49:56] twitter 상속관계/[50:30] 꿀팁/[50:53] a 상속관계/[51:09] 꿀팁/[51:47] 꿀팁/[51:48] snsbgic 상속관계/[52:18] 꿀팁
14.32분 실용적인 페이지하단
최종적인 페이지 마무리와 기존의 간단한 모바일하단 보다는 실용성있고, 디자인적인 하단 부분을 제작하고. 가로 세로 여백을 동일하게 주는 방법에 대해 학습합니다.

책갈피 : [01:21] footer/[03:03] footer/[03:19] 꿀팁/[03:35] 꿀팁/[04:22] 꿀팁/[04:31] 꿀팁/[04:40] 꿀팁/[05:13] footer top/[05:51] 꿀팁/[05:49] overflow:hidden/[06:58] 꿀팁/[07:47] footer top a/[07:56] 꿀팁/[08:35] white-space:nowrap/[08:36] 꿀팁/[09:36] 꿀팁/[10:54] footer top pertwo/[13:14] footer min/[13:27] 꿀팁/[13:28] border-top/[13:43] 꿀팁/[14:16] footer min a/[14:25] 꿀팁/[14:33] 꿀팁/[14:53] 꿀팁/[16:20] 꿀팁/[17:08] footer min a span/[17:27] 꿀팁/[18:16] footer min a pasoone/[18:49] footer min a pasotwo/[19:31] 꿀팁/[21:45] footer address/[21:57] 꿀팁/[22:05] 꿀팁/[22:33] 꿀팁/[23:37] footer address t/[23:47] 꿀팁/[23:53] 꿀팁/[24:37] footer address t a/[25:37] footer address m/[25:45] 꿀팁/[27:19] footer 상속관계/[27:30] 꿀팁/[27:57] top 상속관계/[28:44] a 상속관계/[28:52] 꿀팁/[30:07] min 상속관계/[30:08] 꿀팁/[30:28] a 상속관계/[30:29] 꿀팁/[31:12] 꿀팁/[31:16] span 상속관계
[실무자 초빙 강의] 실무역량 강화를 위한 모바일웹제작 실전편
15.1시간 17분 실무능력 향상을 위한 특별강의 ! 모바일에 따른 viewport정의, css3 @media
모바일에 따른 viewport선언을 보여드리며, html5, css3 속성을 이용한 상단 디자인을 정의합니다. 더 나아가 css3의 @media속성을 이용해 가변적인 스크린 크기에 대응하는 방법에 대해 알아봅니다.

책갈피 : [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] "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.1시간 24분 실무능력 향상을 위한 특별강의 ! 실무적으로 접근하는 레이아웃 구성 & 제이쿼리의 사용
html5, css3를 이용해 실제 사용되는 홈페이지의 레이아웃을 구성하며 실무적으로 접근하고 있습니다. 또한 모바일에서 필수적인 제이쿼리 사용에 대해 간략히 설명합니다.

책갈피 : [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.1시간 21분 실무능력 향상을 위한 특별강의 ! 표준화 작업을 위한 디버깅 작업
html5로 구성된 섹션들을 정의하고 실습하면서, 실제 실무에서 발생하는 여러 버그들을 해결하는 능력을 키울 수 있도록 강의를 진행합니다.

책갈피 : [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/[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] "mainIcon2012"/[44:20] 출력값확인/[45:44] 스페셜 쇼핑 CSS/[47:04] section/[49:01] 이미지가로정렬/[50:58] clear:both 처리/[51:45] 높이 버그처리/[54:41] 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.1시간 13분 실무능력 향상을 위한 특별강의 ! 실무에 적용하는 HTML5, CSS3 완벽파악
css3속성을 사용하여 실무에서 사용되는 버튼을 제작&홈페이지에 삽입하고, 모바일에서 출력되는 위치별 구성을 상황에 맞도록 배치하기위한 표준화작업을 강의합니다.

책갈피 : [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] 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.1시간 7분 실무능력 향상을 위한 특별강의 ! 웹표준 기반의 모바일 레이아웃 만들기
모바일 웹사이트 제작에 웹표준과 HTML5를 활용하려는 웹 퍼블리셔들을 위한 실무강의입니다. HTML5및 CSS3를 적용시킨 모바일웹 제작 기법에 대해 자세히 알려드립니다.

책갈피 : [00:27] 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] "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] "productButton"/[38:40] 버튼영역 정의/[40:06] 버튼 가로정렬/[41:56] 베너삽입/[43:20] 네비게이션 탭구현/[44:45] section id/[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.26분 실무능력 향상을 위한 특별강의 ! 웹표준 기반의 모바일 레이아웃 만들기
모바일 웹사이트 제작에 웹표준과 HTML5를 활용하려는 웹 퍼블리셔들을 위한 실무강의입니다. HTML5및 CSS3를 적용시킨 모바일웹 제작 기법에 대해 자세히 알려드립니다.[2014년 2월 녹화]

책갈피 : [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] 좌측 하단 제작/[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] 배너 이미지 따로
두번째 이야기
21.25분 모바일 홈페이지 기본부터 쉽게합시다~!!
이론이 아닌 실제 제작하면서 스마트폰으로 실시간 확인하는 강의 입니다. 사용된 스마트폰 운영체제는 아이폰과 안드로이드 에서 실시간 확인하며 첫시간이라 기본적인 내용이며 최종적인 완성작을 보여드립니다.

책갈피 : [00:00] 이런분들이 이용하세요/[04:02] 스마트폰 및 pc용 자동이동/[07:33] 기본 웹문서 선언/[10:49] 바로가기 아이콘/[14:53] CSS파일 기본설정/[18:26] 완성작 보기/[23:14] 모바일홈페이지 제작한 이유
22.25분 전체 레이아웃, 상단BG 로고 마무리
스마트폰 이동및 보안소스 등을 설명하고 기본 CSS선언 을 합니다. 사용하지 않았던 fieldset, legend 내용을 진행하고 스마트폰 가로 세로 에 알맞게 반응할 BG와 고정될 로고까지 작업합니다.

책갈피 : [00:00] 모바일용 이동소스, 툴숨김/[04:39] vertical-align:top/[05:15] ul, dl, ol/[05:47] fieldset, legend/[10:17] container/[13:18] min-width:320px;max-width:100%/[15:30] header, logobg/[21:24] logobg img
23.25분 검색바 넣기
파비콘이 않되는 운영체제와, webkit엔진 CSS작업시 문제점 확인 입니다, 사파리가 5로 업그레이드 되면서 발생되는문제까지 알려드리고 대응할 방식까지 전부 선언합니다.

책갈피 : [00:00] 아이폰 파비콘 안드로이드 NO/[03:43] body 에 많은적용/[04:34] -webkit-text-size-adjust:none/[08:14] 적용된 검색바 디자인기능/[11:37] Search, /[12:16] Search_h overflow:hidden;/[16:35] Search_w /[17:12] position:relative 필요한 이유/[18:40] Search .in_w/[21:43] Search .in/[24:15] -webkit-appearance:none
24.18분 아이폰 업데이트 후 변경사항, 상단메뉴 넣기
아이폰4G와 3G 시절의 브라우저 차이 대략난감했던 경험담, 상단 메뉴를 넣으면서 BG가로 및 세로라인 과 구분 이미지 를 25%로 설정해서 보여주는 것 까지 합니다.

책갈피 : [00:00] 사파리버전업이후 변경사항/[00:49] .Search in_ic/[02:27] vertical-align:middle/[06:44] top_m/[08:03] top_m ul li/[12:18] top_m li.noo/[12:55] top_m li a/[14:54] wrap/[17:18] -webkit-border-radius: 15px
25.18분 메인 아이콘 두가지 유형
기본아이콘의 가로세로 변경시 동일한 여백과 내용으로 출력되고 아래에 두가 지 아이콘도 같은방식이지만 다르게 출력되는 걸 확인할수 있습니다.

책갈피 : [00:00] 가로세로 비율/[01:07] 메뉴안내/[02:08] Mine position:relative/[03:25] Mine ul /[05:02] Mine li display:inline-block/[06:55] 여백주고 가운데정렬 중요/[09:48] 메뉴별 클래스 디자인/[11:11] 링크가 있다면 display:block/[14:20] Mine2 아래아이콘 배치/[15:30] Mine2 에 a가 있다면
26.18분 하단출력
하단에 출력되는 메뉴들과 카피라이트 가운데 정렬등의 배치를 의외의 간단한 작업으로 출력되는 걸 확인할수 있습니다.

책갈피 : [01:02] footer/[03:18] footer .menu/[05:50] position:relative/[10:42] footer span b/[13:55] footer menu2/[15:35] footer 내용 인쿠르드
27.19분 폰트 반드시em처리, 서브페이지 기본틀
상단에 최소한의 자리만 잡는이유를알려드리고 앱이정말 필요한 이유를 알려드리고 직접 상단작업을 마무리 합니다.

책갈피 : [00:00] em으로 해야하는 이유/[09:03] logobg_sub/[10:25] logobg_sub img/[13:06] header h2/[14:43] header h1/[15:45] header h3
28.17분 테이블 없이도 dl로 충분합니다.
회사소개의 dl처리로 인한 내용을 셋팅하는 부분을 강의하며 ceo사진과 동시에 박스안에 내용을 쉽게 넣는 부분까지 완벽히 강의합니다.

책갈피 : [00:00] wrap_sub/[01:50] sub_page_a/[03:49] sub_page_a dl/[04:06] sub_page_a dl dt/[05:25] sub_page_a dl dd/[06:00] sub_page_a dl.aw/[08:06] aw dt dd p/[13:23] sub_page_a p span h1
29.19분 로그인 코딩
배경bg로 하는것이 아닌 div로 이중테두리로 하며 스마트폰이나 타블릿 컴 모두에서 도 동일한 %로 나오도록 작업합니다.

책갈피 : [00:00] login_bak1 ~ 2/[07:39] login/[10:25] id pw/[14:50] inn
30.17분 로그인 반드시 입력할 내용, 학습정보 코딩
로그인창에서 보안로그인 및 반드시 알고 계실내용과 동시에 내 학습정보의 내용을 class코딩및 기존내용에서 몇가지를 추가하게 됩니다.

책갈피 : [00:00] login span ~ b/[03:00] sub_page_noa p span/[10:17] sub_page_b~h1~h2~span
31.17분 메뉴리스트의 정의
게시판부터 어지간한 웹메뉴의 스마트폰출력 용으로 사용하실수 있도록 기본적인 내용부터 실무모두를 다루고 있습니다.

책갈피 : [00:00] menu_listA/[02:06] menu_listA ul li/[04:30] menu_listA ul li a/[07:21] menu_listA ul li .ic1
32.20분 테이블 셋팅 및 li 목록메뉴
웹표준에서 강의한것 처럼 justify 의 필요성을 알려드리고, 강의맵과 학과소개 리스트에내용을 점층적으로 선언합니다.

책갈피 : [00:00] text-align justify/[03:28] map_title_a/[04:44] table_ex ~ pakTitle/[08:59] table 선언/[13:15] header h4 ~ a/[17:43] menu_listB
33.21분 기존 테이블 게시판 LI 로 튜닝하기
테이블로 작성된 게시판 에 db를 건드리지 않고 ul만수정하기 위한 어려움, 하지만 실제 li테그로 연동해서 내용을 변경하는 것 까지 모두 보여드립니다.

책갈피 : [00:00] 기존게시판 에로사항/[03:41] sub_page_c/[09:44] menu_listC ~ li ~ a/[12:56] title/[17:35] sub_page_c as bs
34.21분 기존 테이블 게시판 LI 로 튜닝하기 2
게시판 리스트 가 종료되고 글보기 내용 및 목록리스트 1~5 박스형태 와 나머지 아이콘 을 배치합니다.

책갈피 : [00:00] sub_page_c memo/[02:17] sub_page_c ~ cs ~ img/[11:28] bord_foota ~ b/[15:09] bord_footb p img
35.17분 글쓰는곳, 전화, 홈페이지에 구글API 맵표시
게시판 기능 최종마무리 와 함께 안드로이드 에서는 따로 링크를 해줘야 전화연결되는 것 완성하고 가장핵심은 구글API맵 입니다. 스마트폰은 이동성 이기때문에 회사홈페이지 지도를 실시간으로 보여줄수 있으며 쉽게사용하도록 구글맵 사이트 삽입강의를 해드립니다.

책갈피 : [00:00] 글 입력란 수정하기/[05:27] 스마트폰 전화링크/[07:40] 구글API 맵
36.24분 일반, 갤러리, 웹진 게시판, 상품목록까지 li~ 완벽마스터
상품목록 도 li로 통일하고, 일반 이나 갤러리, 웹진형 게시판 도 쉽게 사용하세요~ 강의를 이용하신 분들은 바로 사용하도록 해당소스를 유형별로 강의합니다. 유형별 웹표준에서 정의를 완벽히 배울수 있는 내용입니다.

책갈피 : [02:11] li_proj/[06:08] li_proj h1/[09:44] li_proj .asnew/[12:48] li_proj .asnew li/[16:52] li_proj .asnew li .spa/[19:05] li_proj .asnew li .spa img/[20:19] li_proj .asnew li .ac/[22:01] li_proj .asnew li .spa .ac img
37.24분 일반, 갤러리, 웹진 게시판, 상품목록까지 li~ 완벽마스터 2 상황별 변수
상품목록 도 li로 통일하고, 일반 이나 갤러리, 웹진형 게시판 도 쉽게 사용하세요~ 강의를 이용하신 분들은 바로 사용하도록 해당소스를 유형별로 강의합니다. 유형별 웹표준에서 정의를 완벽히 배울수 있는 내용입니다.

책갈피 : [00:00] li_proja .asnew li .lopl/[03:30] li_proja .asnew li .ada/[06:07] li_proja .asnew li .pd/[07:07] li_proja .asnew li .price/[08:20] li_proja .asnew li .ic1/[10:20] li_proja li a
38.30분 SNS마케팅 실무
친구에게 알리기. 트위터부터 페이스북까지 모두 글을 남길 수 있게 하세요. 반드시 키값 적용으로 단축URL로 작성되게 해야 모든 브라우저에서 문제가 없습니다. QR코드 또한 상품별로 자동화해서 모바일과 PC용이 동일하게 나오게 하세요.
39.3분 QR 코드 및 앱의 중요성 캠코더 시연
QR 코드 및 앱의 중요성에 대해 캠코더 시연을 합니다.
40.33분 안드로이드 및 아이패드 관련 에뮬레이터 설치 및 이후방향
안드로이드는 이클립스를 설치하고 전문적으로 설치작업을 해야 합니다. 해당내용은 김철수(앱강의) 강사님이 직접 설치과정 및 실행강의를 해드리고 있습니다. 목적은 패드를 가지고있지 않더라도 원할한 디자인작업을 하기 위함이며, 모바일홈페이지와 어떤 분리작업이 필요한지 이후방향을 제시해드립니다.
41.10분 pc용 이동 필요성 및 소스
아이폰, 안드로이드 두대를 카메라로 녹화해서 구현실습합니다. iMAC와 태블릿의 접속시 발생되는 한계를 PC용으로 접속되게 전환해야하는 이유와 방법모두 알려드리고, 직접사용하실수 있도록 PC용 소스를 제공해드립니다. 사용된 기술은 jQuery UI / PHP

ajax	Angular.js [1 + 2]	AngularJS [활용]	asp	asp.net
Bootstrap	c++	c++ STL	Cocos2d-x	C＃ 6.0 [입문+실무]
c언어 [실무]	c언어 [입문]	ExtJS4	GIT	Hadoop
Hive	HTML5 & CSS3 [입문 + 고급]	java [입문+고급]	jquery mobile & UI	jquery [실무]
jquery [입문 + 고급]	jsp	labview 2009	labview 2012	LINQ
MariaDB	MATLAB [실무]	MATLAB [입문]	Maven	MFC programming
Ms SQL [입문+실무]	My SQL [입문+실무]	Mybatis	Nmap	Node.js
Node.js [호스팅]	OpenCV [입문+고급]	OpenGL	Oracle	PHP [입문+실무]
PHP 쇼핑몰 개발	QuarkXPress8	R 프로그래밍 [실무]	R 프로그래밍 [입문]	Spring
SPSS	SQLite	Struts2	verilog [입문+고급]	VHDL [실무]
web html+비즈 [입문]	XML [실무]	그누보드4s & 배추빌더 & 모바일	그누보드4s [css point]	그누보드5
델파이 [입문+고급]	드루팔	드림위버 cc	드림위버 cc 2017 [입문+고급]	드림위버 cs5
드림위버 cs6	드림위버 mx2004	드림위버 mx2004 한글	디자인 패턴	라이트룸5
루비(ruby)	리눅스 서버관리 [입문+고급]	모바일 [입문+실무]	모바일UI 실무 [css3 Skill Up]	반응형웹 [전문과정]
비주얼베이직 2013	센차 아키텍트	센차터치2	스위시 맥스3	스칼라 프로그래밍
스케치북 프로	안드로이드 NDK	안드로이드 스튜디오 + Gradle [실무]	안드로이드 어플 개발 [활용]	액션스크립트3.0
앱 인벤터 [실무]	워드프레스 [입문+고급]	웹기획 + 제작실습	웹표준 [입문 + 고급]	유니티 3D
인디자인 cc & 전자책app만들기	인디자인 cs4	인디자인 cs5	인디자인 cs6	일러스트 cc [입문+고급]
일러스트 cs3	일러스트 cs4	일러스트 cs4 한글	일러스트 cs5	일러스트 cs6
일러스트CS 상상실현	자바 네트워크	자바스크립트 [실무 + 활용]	자바스크립트 [입문]	제로보드xe
코믹스튜디오4.0	킴스큐	테크노트	텍스트큐브	파워빌더
파이썬 3 + 3.6 [입문+실무]	파이썬 3.6 [OK]	파이썬 [고급]	페인터11 한글	페인트샵 프로 X2
포토샵 cc 2017 [OK]	포토샵 cc [입문+고급]	포토샵 cs2	포토샵 cs2 한글	포토샵 cs4
포토샵 cs4 한글	포토샵 cs5	포토샵 cs6	포토샵7.0한글판	폰갭
플래시 cc	플래시 cs5	플래시 cs6	플래시8	플래시8 무비
플래시8 작품	플래시8 한글	플렉스빌더3	현업 퍼블리싱 [실무]

123D Design	3d max 2010	3d max 2013	3d max 2014	creo 2.0 [실무]
creo 2.0 [입문]	creo 3.0 [실무]	creo 3.0 [입문]	creo 4.0	creo1.0 [실무]
creo1.0 [입문]	FUSION360	NC코드	poser 2012	UG NX10 [실무]
UG NX10 [입문]	UG NX11 [입문 + 실무]	UG NX7 [실무]	vue7	라이노 4.0 [실무]
라이노 4.0 [입문]	라이노 4.0 주얼리	라이노 5.0 [입문+실무]	라이노 5.0 주얼리	라이노 브이레이
레빗 아키텍쳐 2010	레빗 아키텍쳐 2013	레빗 아키텍쳐 2015	레빗 아키텍쳐 2017	마스터캠 9.1
마스터캠 9.1 3D	마스터캠x5	마스터캠x5 3D	마스터캠x6	마스터캠x6 3D
마스터캠x9	마스터캠x9 3D	마스터캠x9 [현장실무]	마야 2011	마야 2011 캐릭터리깅
마야 2013	마야 2014 + 캐릭터리깅	베가스 10.0 [실무]	베가스 10.0 [입문]	베가스 11 [실무]
베가스 11 [입문]	베가스 12 [입문+고급]	베가스 8.0	베가스 9.0	사운드포지 10
솔리드엣지 ST2	솔리드웍스 2010	솔리드웍스 2012	솔리드웍스 2013	솔리드웍스 2014
솔리드웍스 2017 [입문 + 실무]	스케치업 2013	스케치업 2013 [실무]	스케치업 2014	스케치업 2014 [실무]
스케치업 2016	스케치업 2017	스케치업 모델링+브이레이 2.0	스케치업 브이레이	스케치업6
스케치업7 [실무]	스케치업7 [입문]	스케치업7.1 [실무]	스케치업7.1 [입문]	스케치업8 [실무]
스케치업8 [입문]	시네마4D	시네마4D R14	시벨리우스6	실무도면제작 + 도면컬러링
아키캐드 13	알리아스 2014	에디우스6	에디우스7 [입문+고급]	에디우스8
에프터이펙트 cc	에프터이펙트 cs4 [실무]	에프터이펙트 cs4 [입문]	에프터이펙트 cs5 [실무]	에프터이펙트 cs5 [입문]
에프터이펙트 cs6	오토캐드 2010	오토캐드 2010 인테리어도면	오토캐드 2011	오토캐드 2012
오토캐드 2013	오토캐드 2014	오토캐드 2015	오토캐드 2017	인벤터 2010
인벤터 2013	인벤터 2014	인벤터 2017	치프아키텍트 x6	카티아 v5 [실무]
파워디렉터10	파워디렉터8	파워디렉터9	파워밀 [현장실무]	파워밀2010 All New
포디움 / 피라네시	프리미어 프로 cc	프리미어 프로 cs4	프리미어 프로 cs6	피날레 2010
피날레 2011	피날레 2012	피날레 2014 [입문 + 고급]

Aperture3	Compressor4	iBooks Author2	motion5	로직 프로 X
키노트	파이널컷 프로 7	파이널컷 프로 X

엑세스2002	엑세스2003	엑세스2007	엑세스2010	엑세스2013
엑세스2016	엑셀 2003 함수	엑셀 2007 함수	엑셀 2010	엑셀 VBA 2013 [실무]
엑셀 VBA 2016 [실무]	엑셀 함수 정리 [실무]	엑셀2002	엑셀2002 UP!	엑셀2002 실용
엑셀2002 후다닥	엑셀2003	엑셀2003 활용	엑셀2007	엑셀2013
엑셀2016	워드2003	워드2007	워드2013	워드2016
컴퓨터활용능력1급 실기	컴퓨터활용능력1급 필기	파워포인트2002	파워포인트2003	파워포인트2007
파워포인트2010	파워포인트2013	파워포인트2016	프레지

모바일 [입문+실무]

학과 카테고리

고객센터

MY페이지

Member