<모바일 홈페이지 강좌 리뷰>
- 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
'추천강의' 카테고리의 다른 글
| Ms SQL 교육 리뷰 추천 (0) | 2017.10.24 |
|---|---|
| 포토샵cc 강좌 추천 교육 (0) | 2017.10.24 |
| SQLite 강좌 추천 리뷰 (0) | 2017.10.24 |
| 프레지 강의 추천 리뷰 (0) | 2017.10.24 |
| 컴퓨터활용능력1급 실기 교육 추천 (0) | 2017.10.24 |