IT전문교육 의 리더!

HOME>IT전문가>모바일>모바일UI 실무 [css3]

모바일UI 실무 [css3]

20회차 속성과정|전체 : 15시간 57분|회차당 평균 : 47분51초
590,000355,000
  • 이용기간 2개월|전문강사 : 채명수/박찬수


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

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

    책갈피 : [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] 꿀팁

  • 0350분 상속관계 & 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] 꿀팁

  • 0449분 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”

  • 0535분 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] 꿀팁

  • 0639분 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] 꿀팁

  • 0740분 로그인창 세팅 & 코딩 (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”

  • 0834분 로그인창 세팅 & 코딩 (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”상속관계

  • 0942분 로그인버튼 코딩과 여러 목록을 유형별로 만들기 (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] 꿀팁

  • 1041분 여러 목록을 유형별로 만들기 (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] 꿀팁

  • 1126분 여러 목록을 유형별로 만들기 (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] 꿀팁

  • 1234분 페이지목록숫자 블록처리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] 꿀팁

  • 1353분 페이지기본제작 및 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] 꿀팁

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

    책갈피 : [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 상속관계

  • [실무자 초빙 강의] 실무역량 강화를 위한 모바일웹제작 실전편
  • 151시간 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] 상품가격정의

  • 161시간 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] 출력값확인

  • 171시간 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)

  • 181시간 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

  • 191시간 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] 출력값확인

  • 2026분 실무능력 향상을 위한 특별강의 ! 웹표준 기반의 모바일 레이아웃 만들기모바일 웹사이트 제작에 웹표준과 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] 배너 이미지 따로


스포츠 한국 : [교육]IT전문인력들, 알지오 강의 찾는 이유는?






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